iOS-Flutter 布局组件-线性布局

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 15 天，点击查看活动详情

Flutter中线性布局通常通过Row和Column来实现线性布局，它们都继承Flex。Row和Column都有主轴和纵轴之分，如果布局是沿水平方向，那么主轴指水平方向，纵轴指垂直方向。如果布局沿垂直方向，那么主轴就是垂直方向，而纵轴就是水平方向。在线性布局中，有两个定义对齐方式的枚举类：MainAxisAlignment和CrossAxisAlignment，分别代表主轴和纵轴。

Row

Row可以沿水平方向排列其子Widget。

Row({
  ...  
  //表示水平方向子组件的布局顺序（是从左往右还是从右往左），默认为系统当前Locale环境的文本方向。 
  TextDirection textDirection,
  //表示Row在主轴方向占用的空间，默认是MainAxisSize.max,表示尽可能多的占用水平方向空间，此时Widgets实际占用多少水平空间，row的宽度始终等于水平方向的最大宽度。
  MainAxisSize mainAxisSize = MainAxisSize.max,
  //组件占用水平空间的对齐方式：如果值为，MainAxisSize.min，则此属性无意义，因为子组件的宽度等于Row的宽度，属性为MainAxissSize.max时才有意义，MainAxisAlignment.start 表示textDirection沿初始方向对齐，MainAxisAlignment.end则相反，MainAxisAlignment.center表示居中对齐，textDirection是mainAxisAlignment的参考系。
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  //表示Row纵轴的对齐方向，默认是VerticalDirection.down，表示从上到下。
  VerticalDirection verticalDirection = VerticalDirection.down,  
  表示子组件在纵轴方向的对齐方式，Row的高度等于子组件中最高的子元素高度，它的取值和MainAxisAlignment一样，不同的是参考系是VerticalDirection,即verticalDirection的值为VerticalDirection.down时，crossAxisAlignment.start指顶部对齐，verticalDirection值为VerticalDirection.up时，crossAxisAlignment.start指底部对齐。crossAxisAlignment.end和crossAxisAlignment.start正好相反
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  //子组件数组
  List<Widget> children = const <Widget>[],
})

Column(
  //测试Row对齐方式，排除Column默认居中对齐的干扰
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(" hello world "),
        Text(" I am Jack "),
      ],
    ),
    Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(" hello world "),
        Text(" I am Jack "),
      ],
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.end,
      textDirection: TextDirection.rtl,
      children: <Widget>[
        Text(" hello world "),
        Text(" I am Jack "),
      ],
    ),
    Row(
      crossAxisAlignment: CrossAxisAlignment.start,  
      verticalDirection: VerticalDirection.up,
      children: <Widget>[
        Text(" hello world ", style: TextStyle(fontSize: 30.0),),
        Text(" I am Jack "),
      ],
    ),
  ],
);

Column

Column可以在垂直方向排列其子组件，参数和Row一样，不同的是布局方向为垂直，主轴和纵轴正好相反

class CenterColumnRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text("hi"),
        Text("world"),
      ],
    );
  }
}

Row和Column都只会在主轴方向占用尽可能大的空间，而纵轴的长度则取决于它们最大子元素的长度。

如果我们想让两个文本空间在整个手机屏幕中间对齐，我们有两种方法：

• 将Column的宽度指定为屏幕宽度-通过ConstrainedBox或SIzeBox来强制更改宽度限制。

ConstrainedBox(
//将`minWidth`设为`double.infinity`，可以使宽度占用尽可能多的空间。
  constraints: BoxConstraints(minWidth: double.infinity), 
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text("hi"),
      Text("world"),
    ],
  ),
);

• 使用Center组件，后面研究。

特殊情况

如果Row里面嵌套Row，或者Column里面再嵌套Column，那么只有最外面的Row或者Column会占用尽可能大的空间，里面的Row或Column所占用的空间为时机大小：

Container(
  color: Colors.green,
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max, //有效，外层Colum高度为整个屏幕
      children: <Widget>[
        Container(
          color: Colors.red,
          child: Column(
            mainAxisSize: MainAxisSize.max,//无效，内层Colum高度为实际高度  
            children: <Widget>[
              Text("hello world "),
              Text("I am Jack "),
            ],
          ),
        )
      ],
    ),
  ),
);

如果想让里面的Column占满外部Column，可以使用Expanded组件：

Expanded( 
  child: Container(
    color: Colors.red,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center, //垂直方向居中对齐
      children: <Widget>[
        Text("hello world "),
        Text("I am Jack "),
      ],
    ),
  ),
)

Expanded是弹性组件，会根据组件大小进行拉伸。