Flutter完全开发手册
  • Flutter页面布局之Row和Column线性布局

    所谓线性布局,即指沿水平或垂直方向排布子组件。

    关键字Row、Column

    水平方向(关键字Row)

    
    class testState extends State 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,
                  )),
                ),
              ],
            )
        );
      }
    

    Flutter页面布局Row和Column线性布局

    垂直方向(关键字Column)

    
    class testState extends State 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,
                  )),
                ),
              ],
            )
        );
      }
    }
    

    Flutter页面布局Row和Column线性布局