Flutter开发指南

2019-03-07 本文已影响0人兜里没糖

Flutter简介

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，Flutter是完全免费、开源的。Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建UI。

框架组成

Flutter包括一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具。这些组件可以帮助您快速地设计、构建、测试和调试应用程序。Flutter的核心思想是一切皆为widget。
Flutter框架是一个分层的结构，每个层都建立在前一层之上。

在这里插入图片描述

Android：底层引擎是C++代码通过Android的NDK编译，上层通过Dart编译器编译，以native code方式运行;
iOS：底层引擎是C++代码通过LLVM编译，上层通过AOT-compiled，也是以native code方式运行;

Flutter核心理念

Flutter组件采用函数式响应框架构建，组件鉴于当前的配置和状态来描述视图，组件状态发生改变，组件会重构其配置和状态。然后底层框架会将最新的配置和状态与先前的做对比，由此产生一个最小的差值，并由此差值来决定底层渲染树从旧状态过度到新状态。

热加载模式

Flutter是采用热加载模式的，hot reload的原理是插桩，debug模式下，对每一个方法和成员进行插桩，运行期间reload就生效了，无需重新安装。注：全局变量初始化、静态成员初始化、main方法不能热加载。

Material和Cupertino

Flutter 内置了对Material（默认，安卓样式）和Cupertino (iOS-flavor)的 UI 组件库。提供了可定制的 UI 组件，不再受制于OEM控件的限制。

Widget

Widget 是每个 Flutter 应用的基础。Flutter 具有一致的、唯一的对象模型—— Widget。Widget 通过组合来组成层级结构。每个 Widget 都内嵌在父 Widget 中，并继承父 Widget 的属性。

Flutter安装

必要环境

Git环境

Mac安装Flutter SDK

// 修改成国内镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
// 克隆flutter sdk
git clone -b dev https://github.com/flutter/flutter.git
// 配置环境变量
open ~/.bash_profile
// 添加flutter的环境变量
export PATH="路径/flutter/bin:$PATH"
// 保存配置文件
source ~/.bash_profile
// 运行flutter命令
flutter -h
flutter doctor

Windows安装Flutter SDK，同上

配置环境变量（用户变量）：

PUB_HOSTED_URL=https://pub.flutter-io.cn    
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

克隆bate分支到系统路径中：

git clone -b beta https://github.com/flutter/flutter.git

将克隆下来的项目bin目录配置到环境变量Path中；
运行flutter命令；

安装链接设备工具

brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller

更新Flutter的版本

终端执行命令：flutter upgrade

VSCode安装插件

需要安装的插件：Flutter（会自动安装Dart）

创建项目和运行项目

进入vscode -> 查看 -> 命令面板操作，快捷键：cmd+shift+p

cmd+shift+p -> Flutter: new project -> 输入项目名称

cmd+shift+p -> Debug:Select and Start Debugging -> Flutter -> 运行项目

vscode的快捷键

vscode终端下执行操作：

R键：点击后热加载，预览效果
P键：在虚拟机中显示网格
O键：切换Android和iOS的预览模式
Q键：退出调试预览模式

其他快捷键：
Shift+Alt+F：对齐代码

Dart语言基础

Dart简介

Dart是Google发布的开源编程语言，面向对象的语言，可用于全平台开发，适用于Web开发，跨平台移动应用开发，脚本或者服务端开发。

Dart数据类型和方法

变量声明使用var； final声明一个不可修改的变量；
常量声明使用const，必须是编译器常量；
final和const的区别：
Dart的数据类型：Number（Int、double）、String、Boolean、List、Map、Runes、Symbols；
Dart中的方法可选参数有两种形式：根据命名({})和根据位置([])；可选参数必须在具体参数后面；
匿名方法可赋值给变量，通过变量进行引用；
闭包和js类似，是一个方法（对象），定义在其他方法内部，可以访问外部方法内的局部变量；

Scaffold脚手架

目的是帮助开发者快速构建APP；Scaffold 实现了基本的 Material Design 布局结构。
Scaffold 有下面几个主要属性：

appBar - 显示在界面顶部的一个 AppBar。
body - 当前界面所显示的主要内容 Widget。
floatingActionButton - Material 设计中所定义的 FAB，界面的主要功能按钮。
persistentFooterButtons - 固定在下方显示的按钮，比如对话框下方的确定、取消按钮。
drawer - 抽屉菜单控件。
backgroundColor - 内容的背景颜色，默认使用的是 ThemeData.scaffoldBackgroundColor 的值。
bottomNavigationBar - 显示在页面底部的导航栏。
resizeToAvoidBottomPadding - 类似于 Android 中的android:windowSoftInputMode='adjustResize'，控制界面内容 body 是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。

Flutter布局

Layout结构

Single-child layout widgets：父级widget中只能包含唯一一个子级widget主要有： Contrainer、Padding、Center等；
Multi-child layout widgets：父级widget中能包含多个子级widget主要有： Row、Column等；默认支持flex布局；

Flutter组件

flutter提供的UI库： Material-UI库

TextWidget

textAlign：对齐方式
maxLines：最大行数
overflow：溢出效果（无效果、省略号效果、渐变效果）

持续更新。。。