Flutter-常用的weiget介绍（三）拥有多个子元素的widget
上一篇介绍了单个子元素的widget，但是我们布局中，往往在容器中不是放一个组件的，接下来，我们来介绍一下在flutter中拥有多个子元素的widget
拥有多个子元素的widget
Row
在水平方向上布局子部件的列表，可以让内容进行水平方向的排列，常用的属性如下：
- children： 子控件们
- crossAxisAlignment： 子widget应该如何沿着侧轴（垂直方向）放置
- CrossAxisAlignment.center 垂直方向居中显示
- textDirection： 设置水平方向是从左边排列还是从右边开始排列
- mainAxisAlignment： 子widget应该如何沿着主轴放置
- MainAxisAlignment.spaceBetween 两侧先贴边，然后平分剩余空间
- MainAxisAlignment.spaceAround 平分剩余空间
- MainAxisAlignment.start 从开头开始排列起
- MainAxisAlignment.end 从尾部开始排列起
- MainAxisAlignment.center 居中
- mainAxisSize： 主轴应该占据多少空间
- MainAxisSize.min 包裹内容
- MainAxisSize.max 占据父容器全部空间
示例demo
new Row(
children: [
new Image.asset(
'assets/images/logo.png',
width: 100,
),
new Image.asset('assets/images/logo.png', width: 100),
new Text('hello')
],
// 垂直方向的对齐方式
crossAxisAlignment: CrossAxisAlignment.center,
// 水平方向的对齐方式
textDirection: TextDirection.ltr,
// 水平方向 子widget的对齐方式
mainAxisAlignment: MainAxisAlignment.spaceBetween,
// 主轴宽度大小
mainAxisSize: MainAxisSize.max,
)
**注意：**如果行的非灵活内容（未包含在扩展或灵活小部件中的那些内容）在一起大于行本身，则说该行已经溢出。当一行溢出时，该行没有任何剩余空间可用于在其展开和弹性子项之间共
享。该行通过在溢出的边上绘制黄色和黑色条纹警告框来报告此情况。如果行外有空间，溢出量将以红色字体打印
Column
在垂直方向上布局子窗口小部件的列表，可以让内容进行垂直方向的排列，跟row用法类似，而且效果也是差不多的，只是一个是水平方向，一个是垂直方向，常用属性：
- children： 子控件们
- crossAxisAlignment： 子widget应该如何沿着横轴（水平方向）放置
- direction： 主轴方向
- mainAxisAlignment： 子widget应该如何沿着主轴放置
- mainAxisSize： 主轴应该占据多少空间
Stack
如果你想以一种简单的方式重叠几个子控件，这个类是有用的，Stack 允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开
发中的绝度定位（absolute positioning )布局模型设计的；类似于Android里面的帧布局；常用的属性：
- alignment： 对齐方式
- fit： 适应的方式
- overflow： 是否修剪溢出的控件
- textDirection： 文本方向，用于解决对齐的问题
- children： 子控件们
示例demo
new Stack(
children: [
new Image.asset('assets/images/logo.png'),
new Positioned(
child: new Image.asset('assets/images/logo.png'),
left: 10,
top: 10,
width: 50,
height: 50,
),
new Text('hello Web')
],
alignment: Alignment.center,
)
小结
- Stack 能够让 widget 堆叠来摆放
- 如果想让某一个子widget进行单独的位置摆放，我们可以利用 Positioned来实现
Flow
一个实现流布局算法的布局；常用的属性：
- delegate： 控制子控件的变换矩阵，这个需要自己来实现里面的布局思路，使用起来比较的复杂，但是灵活性很高
- children： 子控件们
GridView
用于多列表的排列，相比listView，一行可以放置多个；常用的属性：
- childrenDelegate： 子控件提供者代理
- gridDelegate： 控制字控件布局代理，不能为空
- 可以通过 初始化 SliverGridDelegateWithFixedCrossAxisCount 类来进行设置，里面有两个常用的属性，是需要去进行设置的：
- crossAxisCount 一行显示多少个
- crossAxisSpacing 子widget之间的距离
- controller： 滚动控制
- padding： 内边距
- scrollDirection： 滚动方向，默认是垂直滚动
- Axis.horizontal 水平滚动
- Axis.vertical 垂直滚动
- children： 子控件们
示例demo
new GridView(
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount:3,
crossAxisSpacing: 20
),
scrollDirection: Axis.vertical,
children: [
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
],
)
小结
- gridView可以适用于 一行显示多个的多列表展示
- 可以通过 scrollDirection来控制滚动的距离
- gridDelegate 属性是不能被省略的
- 可以通过 GridView里面一些方法来帮我们快速构建gridView，例如： GridView.count()
ListView
可滚动的线性小widget列表。ListView是最常用的滚动widget。它在滚动方向上一个接一个地显示其子项。在交叉轴上，子控件需要填充ListView；常用属性：
- childrenDelegate： 子控件提供者代理
- itemExtent： 确定每一个item的高度
- controller： 滚动控制
示例demo
new ListView(
itemExtent: 100,
children: [
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
new Image.asset('assets/images/logo.png'),
],
)
小结
- listView是使用特别多的控件
- 在这里仅仅演示了初级的入门，在多个子控件的情况下不方便使用，后续会对listView进行深入的讲解
在这里仅仅是对widget进行了介绍，让大家知道每一个widget有什么作用和效果，具体还需要大家多多去联系，才能去熟悉