Flutter实战入门
上QQ阅读APP看书,第一时间看更新

3.1.6 容器类组件(Row和Column)

Row和Column组件是最常用的容器类组件,可以控制多个子控件,Row是水平方向,Column是垂直方向,主要属性参见表3-9。

表3-9 Row和Column属性

有3个Container子控件分别为1、2、3,子控件平均分布在Row内,代码如下:


Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            width: 50,
            height: 30,
            decoration: BoxDecoration(
                border: Border.all(
                    color: Colors.red, width: 1, style: BorderStyle.solid)),
            child: new Text("1"),
            alignment: AlignmentDirectional.center,
          ),
          Container(
            width: 50,
            height: 30,
            decoration: BoxDecoration(
                border: Border.all(
                    color: Colors.red, width: 1, style: BorderStyle.solid)),
            child: new Text("2"),
            alignment: AlignmentDirectional.center,
          ),
          Container(
            width: 50,
            height: 30,
            decoration: BoxDecoration(
                border: Border.all(
                    color: Colors.red, width: 1, style: BorderStyle.solid)),
            child: new Text("3"),
            alignment: AlignmentDirectional.center,
          ),
        ],
      )

代码运行效果如图3-13所示。

图3-13 Row效果

对齐方式属性参见表3-10。

表3-10 对齐方式属性