Flutter的控件
Flutter提供的控件非常多，都可以在Flutter Widget 索引中进行查看。
对于Flutter而言，所有可见的都是Widget。即使一个全新的页面，也是一个Widget。没有Android中的Activity，它和IOS有些类似，对于IOS而言，所有的东西都是ViewController。
Flutter中布局的构建，基本都是通过Row、Column来实现的。思想也就类似于H5中的Div。
- Row/Column：实现页面中的一块控件
- Container：控制控件的内外边距
- Expanded：实现类似于Flex的功能，用来分配控件空间
如何布局
- 找出行和列.
- 布局包含网格吗?
- 有重叠的元素吗?
- 是否需要选项卡?
- 注意需要对齐、填充和边框的区域.
Flutter很大的问题就在于一旦页面比较复杂，小控件较多的话，嵌套层级会非常深，所以Flutter官方推荐将子控件通过函数返回，或者创建一个Widget类来实现该模块
布局的主方向
对于Row而言，Horizontal为主轴，而Vertical为横轴
对于Column而言，Vertical为主轴，而Horizontal为横轴
不同布局的主轴
Column+Row实现复杂布局
通过Raw+Column可以实现卡片里通用的上下、左右的布局。
Column+Raw的混合使用
其中：
- 通过
Container的padding属性来设置EdgeInsets外边距，如果需要实现内边距，则可以使用margin属性
Container - 当需要圆角的时候，可以在
Container的decoration中设置BoxDecoration来添加，在BoxDecoration.borderRadius属性中设置圆角 - 通过
Expanded来实现H5中Flex的布局，或者说Android中的Weight来分配Widget剩余的空间 - 通过
crossAxisAlignment来设置Android中的Gravity也就是内容的位置
控件实现：
class TitleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(32.0), // 设置边距，上下左右全为32
child: new Row(
children: [
new Expanded( //上下文本的Widget
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start, // 从Widget的开始处绘制内容
children: [
new Container(
padding: const EdgeInsets.only(bottom: 8.0), // 控制文本的外边距为底部8像素
child: new Text(
'Oeschinen Lake Campground',
style: new TextStyle(
fontWeight: FontWeight.bold, // 设置字体为粗体
),
),
),
new Text(
'Kandersteg, Switzerland',
style: new TextStyle(
color: Colors.grey[500], // 设置字体颜色为灰色
),
),
],
),
),
new Icon(
Icons.star, // 设置icon
color: Colors.red[500], // 设置图标颜色为红色
),
new Text('41'),
],
),
);
}
}
如果在
Raw中设置mainAxisAlignment: MainAxisAlignment.spaceEvenly，则代表将控件空间平均分给子控件，但是如果子控件中有Expanded，那会以Expanded子控件为主，mainAxisAlignment则不会生效
调整Widget的大小
如果有如下图所示的情况，中间的控件或者其他控件需要占据不同的比例分配空间，则可以使用flex属性，来进行空间分配。
不均等分配空间
默认每个子widget的
flex都是1，当有不为1的情况出现，则会根据flex之和，再按比例分配子控件空间。
body: new Center(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(
child: new Image.asset('images/pic1.jpg'),
),
new Expanded(
flex: 2,
child: new Image.asset('images/pic2.jpg'),
),
new Expanded(
child: new Image.asset('images/pic3.jpg'),
),
)
)
控件层叠Stack
在Android中可以使用FrameLayout来层叠控件，而在Flutter中，则是通过Stack来实现。
Stack
相关实现：
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
var stack = new Stack( // 创建Stack Widget
alignment: const Alignment(0.6, 0.6),
children: [
new CircleAvatar( // 圆形头像的控件
backgroundImage: new AssetImage('images/pic.jpg'), // 图片
radius: 100.0, // 图片的圆角
),
new Container(
decoration: new BoxDecoration(
color: Colors.black45, // Container的背景色
),
child: new Text(
'Mia B',
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
);
// ...
}
}
参考资料
在Flutter中构建布局