Flutter七：Flutter布局类Widget

提纲

基础布局：

居中（Center）
对齐（Align）
线性布局（Row与Column）
弹性布局（Flex）
缩放布局（FittedBox）
折叠布局（Stack结合Alignment、Positioned）
索引折叠布局（IndexStack）

宽高尺寸处理：

设置具体尺寸（SizedBox）
限定最大宽高布局（LimitedBox）
调整宽高比（AspectRatio）
百分比布局（FractionallySizedBox）
没有约束的布局（UnconstrainedBox）
多重限制
它尺寸限制类容器

组件装饰和视觉效果

旋转盒子（RotatedBox）
透明度处理（Opacity）

其他布局

控制是否显示布局（Offstaage）

流式布局（Wrap与Flow）/ 结合chip实现流式布局

Wrap（按照宽高自动换行布局）

1. 概念

在学习Row和Colum时，如果子widget超出屏幕范围，则会报溢出错误，这是因为Row默认只有一行，如果超出屏幕不会折行。
流式布局：超出屏幕显示范围会自动折行的布局。Flutter中通过Wrap和Flow来支持流式布局，将上例中的Row换成Wrap后溢出部分则会自动折行，也就是说主轴上控件不足时，则向次轴扩展，适用于需要按照宽度或者高度让child自动换行的场景。

2. 属性

属性名称	类型	默认值	说明
direction	Axis	Axis.horizontal	主轴（mainAxis）的方向，默认为水平
alignment	WrapAlignment	WrapAlignment.start	主轴方向上的对齐方式，默认为start。
spacing	double	0.0	主轴方向上的间距
runAlignment	WrapAlignment	WrapAlignment.start	run的对齐方式。run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行
runSpacing	double	0.0	run的间距
crossAxisAlignment	WrapCrossAlignment	WrapCrossAlignment.start	交叉轴（crossAxis）方向上的对齐方式。
textDirection	TextDirection		文本方向
verticalDirection	VerticalDirection	VerticalDirection.down	定义了children摆放顺序，默认是down，见Flex相关属性介绍

3. 使用

Wrap(
            //chip之间的距离
            spacing: 8.0,
            //行之间的距离
            runSpacing: 0.0,
            children: [        
              Chip(
                label: Text(
                  "大飞",
                  style: TextStyle(color: Colors.white),
                ),
                backgroundColor: Colors.black,
              ),
              Chip(
                //左侧小图标
                avatar: Icon(
                  Icons.add,
                  color: Colors.white,
                ),
                //@required 必须有的，标签
                label: Text(
                  "乔布斯",
                  style: TextStyle(color: Colors.white),
                ),
                //小标签的内边距
                labelPadding: EdgeInsets.all(5.0),
                //小标签的颜色
                backgroundColor: Colors.black,
                //
                deleteIcon: Icon(Icons.delete),
                deleteIconColor: Colors.white,
                deleteButtonTooltipMessage: "手下留情",
                onDeleted: () {},
              ),
            ],
          )
//如果是网络返回数据，条目是不固定的，需要将chip存放在一个集合中
Widget itemChildView(List articles) {
    List tiles = [];

    Widget content;

    for (var item in articles) {
      tiles.add(InkWell(
        onTap: () {
          RouteUtil.toWebview(context, '${item.title}', '${item.link}');
        },
        child: Container(
          padding: EdgeInsets.only(left: 10.0, right: 10.0),
          child: Chip(
            label: Text(
              item.title,
              style: TextStyle(
                  fontSize: 12.0,
                  color: CommonUtil.randomColor(),
                  fontStyle: FontStyle.italic),
            ),
            labelPadding: EdgeInsets.only(left: 3.0, right: 3.0),
            // backgroundColor: Color(0xfff1f1f1),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5.0)),
            materialTapTargetSize: MaterialTapTargetSize.padded,
          ),
        ),
      ));
    }

    content = Wrap(
      alignment: WrapAlignment.start,
      spacing: 0.0,
      runSpacing: 1.0,
      children: tiles,
    );
    return content;
  }

Chip（碎片）

• 概念：碎片，一般是用作标签
• 场景：事物的属性或标签，历史搜索记录等。
• 属性

属性	说明
avatar	标签左侧Widget，一般为小图标
label	标签
labelStyle	标签风格
labelPadding
deleteIcon	删除图标
onDeleted	删除回调，为空时不显示删除图标
deleteIconColor	删除图标的颜
deleteButtonTooltipMessage	删除按钮的tip文字
shape	形状.默认两端是半圆形
clipBehavior	Clip.none
backgroundColor	背景颜色
padding
materialTapTargetSize	设置为MaterialTapTargetSize.shrinkWrap时，clip距顶部距离为0；设置为MaterialTapTargetSize.padded时距顶部有一个距离