实际上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
, 以及子Viewhome
, 还有更重要的页面跳转routes
.
MaterialApp(
title: ‘Welcome to Flutter’,
home: …,
routes: <String, WidgetBuilder> …,
theme: ThemeData(
primaryColor: Colors.white
),
)
还有一个类似于Fragment的:
- 叫做
Scaffold
,中文意思是脚手架
,它包含一个appBar (ActionBar)与一个body,appBar可以指定title与actions (类似于action button的点击事件)。
Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: […],
),
body: …,
)