前言

目前Flutter常见的布局方式主要有4种：1、线性布局 2、流式布局 3、弹性布局 4、层叠布局

今天我们主要介绍线性布局

流式布局

弹性布局

层叠布局

线性布局

所谓线性布局，即指沿水平或垂直方向排布子组件。
** Flutter中通过Row和Column来实现线性布局，类似于Android中的LinearLayout。**
关键字Row、Column

1 水平方向（关键字Row）

class testState extends State<test> with BaseBar {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: defaultWidth, height: defaultHeight);
    return Scaffold(
        appBar: AppBaseBar("线性布局水平方向"),
        body: Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("1",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.yellow,
              child: Text("3",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("3",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
          ],
        )
    );
  }

线性布局水平方向示例图

2 垂直方向（关键字Column）

class testState extends State<test> with BaseBar {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: defaultWidth, height: defaultHeight);
    return Scaffold(
        appBar: AppBaseBar("线性布局水平方向"),
        body: Column(
          children: [
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("1",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.yellow,
              child: Text("3",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("3",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
          ],
        )
    );
  }
}