Flutter开发进阶：项目创建及Widget布局

flutter是一款移动应用跨平台框架，使用Dart语言编写的一份代码可以生成iOS和Android两个高性能、高保真的应用程序。Flutter不借助原生的渲染能力，而是自己实现了一套与Android和iOS一样的渲染原理，从而在性能上与原生平台基本保持一致。目前Flutter支持了iOS、Android，Windows、linux、macOS、Web平台的运行。

项目源码:点击下载

1、项目创建

开发flutter应用，我们通常使用的工具是Android Studio。创建一个flutter项目，可以通过Android Studio来创建，也可以通过命令行来创建。

1.通过Android Studio来创建

• 启动Android Studio，找到Create New Flutter Project；
• 然后会来到一个让选择项目类型的页面Flutter Application、Flutter Plugin、Flutter Package、Flutter Module；选择Flutter Application；
• 输入Project name、Flutter SDK path、Project location信息，点击下一步，然后等待一小会即可创建成功。

注意事项：
1.Flutter Application-全新的App，包含标准的Dart与Native层；Flutter Module-混编到已有的Android/iOS工程内；Flutter Plugin-平台插件，包含Dart与Native层的实现；Flutter Package-纯Dart工程，仅有Dart层实现。
2.需要注意的是Project name只能只用小写字母或者下划线；

2.通过命令行创建

/*创建Flutter Application*/flutter create  appname/*创建Flutter Module*/flutter create -t module appname_module/*创建Flutter Plugin*/flutter create --template=plugin appname_plugin/*创建Flutter Package*/flutter create --template=package appname_package

在创建项目的过程中可以指定Android和iOS的平台开发语言:-i objc或-i swift可指定iOS平台是OC还是Swift;-a java或-a kotlin可指定Android是Java还是Kotlin。更多选项可以通过flutter create --help来查看。

创建好的项目，包括android,ios,lib等目录，main函数和我们开发写的Dart代码都在lib目录中。

2、基础语法

基础类型：

- num  包括int & double  int.isEven, int.isOdd;  int.toDouble;double.toInt();  double.round();//常用函数- String:  var a = "today";var b = "hello", var c = a + b; //字符串拼接  a[0];//取第一个字符； a*2;//字符串a的内容重复2遍  print("a + b = ${ a + b}")//{放运算表达式}- list  创建可变list: var  list = [1,2,3,"name"]  创建不可变list：var list = const [1,2,3,"name"]  按下标访问list[2]="xyz"  添加/删除元素list.add("xxx"); list.insert(1,"cat");list.remove("cat");list.clear();  排序:list.sort()  截取:list.sublist(5,7)//从4到7,前闭后开,包含3个元素- Map   创建可变Map: var map = {"name":"ccc", "age":244};   创建不可变Map:var map =const  {"name":"ccc"};   按键访问 map["name"] = "520";   var list = ["ccc", "255"]; list.asMap()//{0:"ccc", 1:244}- ??=, ??  var a; a ??= 5; a=10; //如果a为nil就赋值，否则直接返回  var b; print("${b ?? 5}")//如果b有值，直接返回，反之取??后面的- =>箭头函数- 可选参数，空安全- 匿名函数- 闭包:定义在函数里面的的函数就是闭包，闭包也是一个对象，可以访问外部函数的局部变量。func() {  int count = 0;  return ()=>print(count++);}let func1 = func();func1();func1();func1();func1();//分别打印1/2/3/4let func2 = func();func2();func2();func2();func2();//分别打印1/2/3/4

flutter项目使用的dart语言，其基础语法与Swift和Kotlin非常接近。
接下来我们简单列举一个例子，定义一个Worker类

调用部分如下：

void main() {  Worker.key = "222";  print(Worker.key);  Worker worker = Worker("name", 19, "nickname");  worker.printAll();}

3.基础结构

flutter项目从main启动后，调用runApp()，即可将UI载入：

void main() {  runApp(TextWidget());}//在widget中我们重载Widget build(BuildContext context)函数，返回创建的widgetclass TextWidget extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Container(      padding: EdgeInsets.all(44),      color: Colors.yellow,      child: Text(          "Hello Flutter",          textAlign:TextAlign.center,/*文本居中显示*/          textDirection:TextDirection.ltr,/*文字阅读顺序*/          style: TextStyle(          color: Colors.red,/*文字颜色*/          fontSize: 40/*文字大小*/        )      )    );  }}

flutter中MaterialApp代表Material Design风格的应用，内部包含该风格应用所需要的基本控件, 其home属性应用的根节点。Scaffold名为脚手架，为应用提供了导航栏、Tab等:

• appBar:导航栏NavigationBar位居页面最顶部
• bottomNavigationBar：标签栏Tabbar，位居页面最底部
• body:除appBar/bottomNavigationBar以外的屏幕中间区域
  接下来，我们把这些基础组建给弄出来看看:

void main() {  runApp(const App());}class App extends StatelessWidget {  const App({Key? key}) : super(key: key);  @override  Widget build(BuildContext context) {    return MaterialApp(        debugShowCheckedModeBanner:false,        home: Scaffold(            appBar: AppBar(                title: Text('Explorer App')            ),            body: TextWidget()        )    );  }}

这样我们后面做基础组建的学习只需要修改Scaffold.body即可。

4.布局控件

在原生开发中我们常用frame、AutoLayout布局，在h5项目中我们常用flex布局。在flutter开发中，Dart为我们提供了类似flex布局Row，Column， Stack等。

4.1 Row、Column表示一组平面上排列的元素

其中Row主轴mainAxisAlignment是从屏幕左侧到右侧，交叉轴从屏幕顶部到下方；Column主轴crossAxisAlignment从屏幕的上方到下方，交叉轴是从屏幕的左侧到右侧。

• mainAxisAlignment变量-主轴

start-元素居左/居上显示，元素之间间距为0，多余的空间居右/下；
center-元素居中显示，元素间艰巨为0，多余的空间一分为二居左右/上下；
end-元素居右/下显示，元素之间间距为0，多余的空间居左/上；
spaceBetween-元素分开显示，多余的空间分配到元素与元素之间；
spaceAround-整体空间按照元素的个数均分，多余的空间显示在元素的左右/上下两侧；
spaceEvenly-将多余的空间均分于左+元素之间+右/上+元素之间+下；

• CrossAxisAlignment变量-交叉轴：

start:元素居上/左显示；
center:元素居上下居中/左右居中；
end:元素居下/右显示
stretch：元素拉伸
baseline：用于Text基线对齐

Row布局的主轴为x+方向，交叉轴为y+方向；Column的主轴为y+方向，交叉轴为x+方向。搞清楚这两个最常用的布局，开发中如鱼得水。

4.2.Stack一组垂直于屏幕排列的元素，

整组处于父容器中的位置通过alignment来确定，alignment接受一个AlignmentDirectional类型的对象，该对象两个属性start，y分别表示处在x轴，y轴上的位置。内部定义父视图x轴方向起点为-1，中点为0，右侧为1，父视图y轴方向起点为-1，中点为0，右侧为1。该类也有一些常用的位置定义,比如

/// The center point, both horizontally and vertically.  ///  /// Consider using [Alignment.center] instead, as it does not need to  /// be [resolve]d to be used.  static const AlignmentDirectional center = AlignmentDirectional(0.0, 0.0);

该布局用起来相对简单: