Flutter-线性布局

Widget—Column

• Column中主轴方向是垂直方向
• mainAxisAlignment设置主轴对齐方式
• crossAxisAlignment设置交叉轴对齐方式
• children设置内容

Widget—Row

主轴方向为水平方向，其余属性一致

代码区

class MyPage extends StatelessWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  Center(//居中组件,当没有指定widthFactor和heightFactor的时候，会尽可能的大
      child: Container(//用有颜色属性的Container包裹部件，加上背景色，方便识别
        color: Colors.orange,//橘色为大部件
        child: Column(//包含了一个线性布局的大部件
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,//部件之间的距离，与部件和边框的距离，相等
          crossAxisAlignment: CrossAxisAlignment.center,//因为外面有Center部件包裹了，所以这里写不写都一样的居中效果。
          children:  [//以下四个Container是线性布局中的四个小部件
            Container(
              color: Colors.white,
              child: const Icon(Icons.settings,size: 50,),
            ),
             Container(
              color: Colors.red,
              child: const Icon(Icons.access_alarm,size: 50,),
            ),
            Container(
              color: Colors.blueAccent,
              child: const Icon(Icons.account_box,size: 50,),
            ),
            Container(//这个部件是Row布局部件，其中的小部件水平排列，即一行里面分列展示
              color: Colors.grey,//灰色区域，Row布局自然是一行灰色了
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,//部件之间的距离，与部件和边框的距离，是二比一的关系
                children: const [
                  Icon(Icons.settings,size: 50,),
                  Icon(Icons.access_alarm,size: 50,),
                  Icon(Icons.account_box,size: 50,),
                ],
              ),
            )
          ],
        ),
      )
    );
  }
}