![Flutter实战入门](https://wfqqreader-1252317822.image.myqcloud.com/cover/55/32436055/b_32436055.jpg)
上QQ阅读APP看书,第一时间看更新
3.1.6 容器类组件(Row和Column)
Row和Column组件是最常用的容器类组件,可以控制多个子控件,Row是水平方向,Column是垂直方向,主要属性参见表3-9。
表3-9 Row和Column属性
![](https://epubservercos.yuewen.com/E5359F/17517093106688906/epubprivate/OEBPS/Images/b3-9-i.jpg?sign=1739280291-iaAjeATvxzEn45iUouLpEYSFhVO3oFjH-0-7810e90903dcd6f343a1b4e4f3a47cc1)
有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所示。
![](https://epubservercos.yuewen.com/E5359F/17517093106688906/epubprivate/OEBPS/Images/t3-13-i.jpg?sign=1739280291-GRNaBbRA4H1rn3D5B6b8jPioRxHaX70m-0-e189d5d1a785df50c3196c7d3df196c6)
图3-13 Row效果
对齐方式属性参见表3-10。
表3-10 对齐方式属性
![](https://epubservercos.yuewen.com/E5359F/17517093106688906/epubprivate/OEBPS/Images/b3-10-i.jpg?sign=1739280291-pv9i0mAVzNl7oGHuCmFqq4A1JIvP2E7d-0-7a60d5156a98bb727f20bd40637bff0b)