Flutter（九）Row水平布局与Column垂直布局

Row与Column都是继承的Flex弹性布局

水平布局，行

Row(
              // 在水平方向上，子widget的对齐方式，是整体位置的偏移，靠左，居中，靠右等。只有当MainAxisSIze.max时才有意义
//              mainAxisAlignment: MainAxisAlignment.start,  // 如果是TextDirection.ltr则是左对齐，rtl是右对齐
              mainAxisAlignment: MainAxisAlignment.center,// 居中对齐
//              mainAxisAlignment: MainAxisAlignment.end,  // 如果是TextDirection.ltr则是右对齐，rtl是左对齐
//              mainAxisAlignment: MainAxisAlignment.spaceAround,//屏幕与子widget之间留一定空隙，子widget之间距离相等
//              mainAxisAlignment: MainAxisAlignment.spaceBetween,//屏幕与子widget之间不留空隙，子widget之间距离相等
//              mainAxisAlignment: MainAxisAlignment.spaceEvenly,//屏幕与子widget之间，子widget之间距离相等
            //在水平方向上，这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
//              mainAxisSize: MainAxisSize.min,// 尽可能小，包裹

            //在垂直方向上，子widget的对齐方式，整体偏移  ，参考verticalDirection
//              crossAxisAlignment: CrossAxisAlignment.start,// VerticalDirection.down时上对齐
//              crossAxisAlignment: CrossAxisAlignment.center,// 居中
//              crossAxisAlignment: CrossAxisAlignment.stretch,
//              crossAxisAlignment: CrossAxisAlignment.end,// 下对齐
//              crossAxisAlignment: CrossAxisAlignment.baseline,

            //在水平方向上，子widget的排列方向，
//              textDirection: TextDirection.ltr,//从左到右
//              textDirection: TextDirection.rtl,//从右到左

            //垂直方向上的排列方向
//              verticalDirection: VerticalDirection.up,// 从下往上
//              verticalDirection: VerticalDirection.down,// 从上往下

//              textBaseline: TextBaseline.alphabetic,
//              textBaseline: TextBaseline.ideographic,
              children: <Widget>[
//                Text(" flutter good ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" bad rn ",style: TextStyle(backgroundColor: Colors.blue),),
//                Text(" complex native ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),

MainAxisAlignment的各种情况

image.png

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,// 居中对齐
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
//                Text(" flutter good ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" bad rn ",style: TextStyle(backgroundColor: Colors.blue),),
//                Text(" complex native ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,//
              //在水平方向上，这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
                Text(" MainAxisSize.max时MainAxisAlignment各种情况 ",style: TextStyle(backgroundColor: Colors.green),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,//
              //在水平方向上，这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" start ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,// 居中对齐
              //在水平方向上，这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" center ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,//
              //在水平方向上，这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" end ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,//屏幕边缘与widget，子widget之间，空隙等距
              //在水平方向上，这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" spaceEvenly ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,//屏幕边缘不留空隙，子widget之间空隙相等
              //在水平方向上，这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" spaceBetween ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,//
              //在水平方向上，这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
                Text("MainAxisAlignment",style: TextStyle(backgroundColor: Colors.green),),
                Text(" spaceAround ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" complex  ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),

          ],
        ),
      ),
    );
  }
}

Column

属性与Row一样，只是效果是在垂直方向上的