flutter Row 垂直或水平放置多個widget

使用行（Row）水平排列widget，使用列（Column）垂直排列widget。在行或列中嵌套行或列實現復雜的布局。如下圖所示：

 

 

此布局按行排列。該行包含兩個子布局，左側一列和右側的圖片

對於行（Row）來說，主軸是水平方向，橫軸是垂直方向。對於列（Column）來說，主軸是垂直方向，橫軸是水平方向

 

使用mainAxisAlignment和crossAxisAlignment屬性控制行或列對齊（使用
MainAxisAlignment和CrossAxisAlignment類中的常量）
如下圖：3個圖像都是100像素，屏幕寬度大於300像素，可以設置主軸對齊方式為spaceEvently，它會在每個圖像之前和之后分配空閑的水平空間

 

代碼如下：

appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Image.asset('images/pic1.jpg'),
如果要widget按比例占據空間大小，可以將widget放到ExpandedWidget中，ExpandedWidget的flex屬性，用於確定widget的彈性系數，默認為1
如下圖：創建一個由3個widget組成的行，其中中間widget的寬度是其他兩個widget的兩倍，將中間widget的彈性系數設置為2

代碼如下：

class ExpandedState extends State<ExpandedS> {
@override
Widget build(BuildContext context) {
// TODO: implement build
　　return new Scaffold(
　　　　appBar: new AppBar(title: new Text('ExpandedTest')),
　　　　　　body: new Center(
　　　　　　　　child: new Row(
　　　　　　　　　crossAxisAlignment: CrossAxisAlignment.center,
　　　　　　　　　　children: [
　　　　　　　　　　　　new Expanded(child: new Image.asset('images/1.jpg')),
　　　　　　　　　　　　new Expanded(child: new Image.asset('images/2.jpg'), flex: 2,),
　　　　　　　　　　　　new Expanded(child: new Image.asset('images/3.jpg'))
　　　　　　　　　　],

　　　　　　　　),
　　　　　　),
　　　　);
　　}
}

默認情況下，行或列沿着其主軸會占用盡可能多的空間，如果要將widget聚集在一起，可以將mainAxisSize設置為MainAxisSize.min
如下圖，將五角星挨個排列，而不是分散占成一行

 

---------------------
作者：Super_666
來源：CSDN
原文：https://blog.csdn.net/Super_666/article/details/81334895
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！