Flutter-Row的使用说明

Flutter-Row的使用说明

Row的定义

Row和Container，Column，Stash基本上一样，都是一种存放其他Widget的容器，不同点在于Row、Column、Stash中存放的是一组Widget；Row具体请查看Row的定义：

Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,//将子Widget放置在什么位置
MainAxisAlignment.start，从左边开始布局
MainAxisAlignment.end，从右边开始布局
MainAxisAlignment.center，从中间开始布局
MainAxisAlignment.spaceBetween，相邻两个widget之间的距离相等
MainAxisAlignment.spaceAround，子widget平均分配空间，最左最又的组件离边的边距，为两个widget边距的一半，具体请自行设置查看效果
MainAxisAlignment.spaceEvenly，子widget平均分配空间，包括最左最右的widget离边的空间
MainAxisSize mainAxisSize = MainAxisSize.max,//设置Row在主轴上应该占据多少空间
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,//子元素应该如何沿着横轴放置，默认中间对齐
CrossAxisAlignment.satrt//设置子元素上边对齐
CrossAxisAlignment.end//设置子元素下边对齐
CrossAxisAlignment.stretch//每个子元素的上下对齐Row的上下边，相当于是拉伸操作
CrossAxisAlignment.baseline,//相当于CrossAxisAlignment.start,但是需要配合textBaseline，不然会报错
TextDirection textDirection,//设置子widget的左右显示方位，只有在crossAxisAlignment为start、end的时候起作用；
VerticalDirection verticalDirection = VerticalDirection.down,//设置垂直方向上的方向，通常用于Column中,在Row中使用的话，会影响子widget是上边距对齐，还是下边距对齐，跟 CrossAxisAlignment.end， CrossAxisAlignment.start相互影响，选择使用
TextBaseline textBaseline,//配合CrossAxisAlignment.baseline一起使用
List children = const [],//存放一组子widget
}

Row的基本使用

row主要用于在水平上进行布局，可以使一组widget进行水平排列，请参考如下使用方式

Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Icon(Icons.opacity),
      Icon(Icons.settings),
      Container(
        color: Colors.redAccent,
        width: 100.0,
        height: 100.0,
        child: Text('data'),
      ),
      Icon(Icons.ondemand_video),
    ],
  )

可以运行查看效果。

row.jpg

如果在使用的过程中不想让里面所有的子widget平局分配空间，需要在每个子widget之间自定义一个间距，这个时候需要使用SizedBox来增加上下间距，下面给出例子：

Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.end,
//        textBaseline: TextBaseline.ideographic,
  verticalDirection: VerticalDirection.up,
    children: [
      Icon(Icons.opacity),
      SizedBox(width: 60,),
      Icon(Icons.settings),
      Container(
        color: Colors.redAccent,
        width: 100.0,
        height: 100.0,
        child: Text('data'),
      ),
      Icon(Icons.ondemand_video),
    ],
  )

row_sizebox.jpg