Flutter垂直布局、水平布局、流式布局属性介绍和基本使用。

前言

关于flutter的垂直布局（Column）和水平布局（Row）和流式布局（Wrap）属性介绍和简单使用。废话不多说，上才艺。

---

Column属性介绍

属性	作用
MainAxisAlignment	主轴对准
CrossAxisAlignment	横轴对齐
MainAxisSize	主轴尺寸
TextDirection	文字方向
VerticalDirection	垂直方向
TextBaseline	文字基线

Row属性介绍

属性	作用
MainAxisAlignment	主轴对准
CrossAxisAlignment	横轴对齐
MainAxisSize	主轴尺寸
TextDirection	文字方向
VerticalDirection	垂直方向
TextBaseline	文字基线

Warp属性介绍

属性	作用
direction	方向
alignment	对齐
spacing	间距
runAlignment	运行对齐
runSpacing	运行间距
crossAxisAlignment	横轴对齐
textDirection	文字基线
verticalDirection	垂直方向
clipBehavior	裁剪

提示：以下是三种布局的的基本使用

二、使用步骤

1.Column

代码如下（示例）：

Container(
            height: 300,
            child: Column(
              // mainAxisSize: MainAxisSize.min,//主轴上的可用空间最小化
              mainAxisSize: MainAxisSize.max,//主轴上的可用空间最大化
              // textDirection:TextDirection.rtl,//文字从右向左
              textDirection:TextDirection.ltr,//文字从左向右
              mainAxisAlignment: MainAxisAlignment.center, //主轴居中
              crossAxisAlignment: CrossAxisAlignment.center, //横轴居中
              // verticalDirection:VerticalDirection.down,//从顶部开始，并垂直堆叠到底部
              verticalDirection:VerticalDirection.up,//从底部开始，并垂直朝顶部堆叠
              // textBaseline:TextBaseline.alphabetic,//用于对齐字母字符的字形底部的水平线
              textBaseline:TextBaseline.ideographic,//用于对齐表意字符的水平线
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.redAccent,
                  alignment: Alignment.center,
                  child: Text('1 redAccent'),
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.greenAccent,
                  alignment: Alignment.center,
                  child: Text('2 greenAccent'),
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.lightBlueAccent,
                  alignment: Alignment.center,
                  child: Text('3 lightBlueAccent'),
                ),
              ],
            ),
          ),

具体效果：

1.Row

代码如下（示例）：

Container(
            height: 100,
            child: Row(
              // mainAxisSize: MainAxisSize.min,//主轴上的可用空间最小化
              mainAxisSize: MainAxisSize.max,//主轴上的可用空间最大化
              // textDirection:TextDirection.rtl,//文字从右向左
              textDirection:TextDirection.ltr,//文字从左向右
              mainAxisAlignment: MainAxisAlignment.center, //主轴居中
              crossAxisAlignment: CrossAxisAlignment.center, //横轴居中
              // verticalDirection:VerticalDirection.down,//从顶部开始，并垂直堆叠到底部
              verticalDirection:VerticalDirection.up,//从底部开始，并垂直朝顶部堆叠
              // textBaseline:TextBaseline.alphabetic,//用于对齐字母字符的字形底部的水平线
              textBaseline:TextBaseline.ideographic,//用于对齐表意字符的水平线
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.redAccent,
                  alignment: Alignment.center,
                  child: Text('1 redAccent'),
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.greenAccent,
                  alignment: Alignment.center,
                  child: Text('2 greenAccent'),
                ),
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.lightBlueAccent,
                  alignment: Alignment.center,
                  child: Text('3 lightBlueAccent'),
                ),
              ],
            ),
          ),

具体效果：

1.Wrap

代码如下（示例）：

Container(
            height: 300,
            child: Wrap(
              direction: Axis.vertical, //方向垂直
              alignment: WrapAlignment.center, //居中对齐
              spacing: 5.0,//间距
              runAlignment: WrapAlignment.center,
              runSpacing: 15.0,//横轴上至少间隔15.0个逻辑像素
              textDirection: TextDirection.ltr, //文字从左向右
              crossAxisAlignment: WrapCrossAlignment.center, // clipBehavior: RenderWrap.runtimeType,
              children: <Widget>[
                Container(
                  width: 100,
                  height: 100,
                  color: Colors.redAccent,
                  alignment: Alignment.center,
                  child: Text('1'),
                ),
                Container(
                  width: 100,
                  height: 100,
                  alignment: Alignment.center,
                  color: Colors.greenAccent,
                  child: Text('2'),
                ),
                Container(
                  width: 100,
                  height: 100,
                  alignment: Alignment.center,
                  color: Colors.lightBlueAccent,
                  child: Text('3'),
                ),
                Container(
                  width: 100,
                  height: 100,
                  alignment: Alignment.center,
                  color: Colors.greenAccent,
                  child: Text('4'),
                ),
                Container(
                  width: 100,
                  height: 100,
                  alignment: Alignment.center,
                  color: Colors.lightBlueAccent,
                  child: Text('5'),
                ),
                Container(
                  width: 100,
                  height: 100,
                  alignment: Alignment.center,
                  color: Colors.redAccent,
                  child: Text('6'),
                ),
              ],
            ),
          ),

具体效果：

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，如果对你有用的话，可以点赞加关注哦。如有不足之处，可在下方评论留言。