一位Android程序员入坑Flutter后整理出一份超详细的学习笔记

实际上Flutter没有xml了, 并且是通过Widgets的嵌套来实现一个布局的。

如：

• Center是一个可以把子View放置在中央的容器；

• Row对应的就是LinearLayout + Horizontal，Column对应的就是LinearLayout + Vertical，他们都具备一个属性叫做crossAxisAlignment，有点类似gravity，来控制子View相对于父View的位置。

• Expanded支持一个类似weight的属性，叫flex。

• Container是一个具有decoration属性的容器，可以用来控制背景色，border, margin等等。

• Stack有点像是一个特殊的RelatetiveLayout或者ConstraintLayout，children属性指定了它的子View，第一个是Base View，alignment属性指定了后面的子View相对于BaseView的位置，如alignment: const Alignment(0.6, 0.6)指定了位于BaseView右下角的位置。

• ListTile是一个特殊的ListItem，有三个属性，分别是左边的Icon (leading)，文字 (title)，以及右边的Icon (trailing)。

• 还有诸如ListView，GridView，Card等等比较熟悉的Widgets。

另外有一个类似于我们Activity的Widgets:

• 叫做MaterialApp, 可以指定theme, title, 以及子View home, 还有更重要的页面跳转routes.

MaterialApp(

title: ‘Welcome to Flutter’,

home: …,

routes: …,

theme: ThemeData(

primaryColor: Colors.white

),

)

还有一个类似于Fragment的：

• 叫做Scaffold，中文意思是脚手架，它包含一个appBar (ActionBar)与一个body，appBar可以指定title与actions (类似于action button的点击事件)。

Scaffold(

appBar: AppBar(

title: Text(widget.title),

actions: […],

),

body: …,

)