Flutter 布局方式之线性布局

前言

目前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,
              )),
            ),
          ],
        )
    );
  }
}

线性布局垂直方向

3 线性布局的注意事项

当我们布局超过一行的时候，这时候系统是不会帮我们换行的，也就是说会造成一个问题。UI溢出。

UI溢出

水平排列，使用Row对视图进行水平排列
垂直排列，使用Column对视图进行垂直排列
Flutter中子视图超过父视图会报视图溢出

为了解决这个问题，我们就需要了解到Flutter第二个布局，流式布局