Flutter 10 Flex布局

Flex常用设置

1. direction
2. mainAxisAlignment
3. mainAxisSize
4. crossAxisAlignment
5. verticalDirection
6. textBaseline

1. direction

设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。

2. mainAxisAlignment：

设置子 Widget 沿着主轴方向的排列方式，默认 MainAxisAlignment.start，可设置的方式如下：

• MainAxisAlignment.start：左对齐，默认值;
• MainAxisAlignment.end：右对齐;
• MainAxisAlignment.center：居中对齐;
• MainAxisAlignment.spaceBetween：两端对齐;
• MainAxisAlignment.spaceAround：每个 Widget 两侧的间隔相等，与屏幕边缘的间隔是其他 Widget 之间间隔的一半;
• MainAxisAlignment.spaceEvently：平均分布各个 Widget，与屏幕边缘的间隔与其他 Widget 之间的间隔相等.

对比效果如下：

3. mainAxisSize

设置主轴的大小，默认 MainAxisSize.max，可设置的值如下：

• MainAxisSize.max：主轴的大小是父容器的大小；
• MainAxisSize.min：主轴的大小是其子 Widget 大小之和。

对比效果如下：

​

将 mainAxisAlignment 设置成 spaceBetween，如果 mainAxisSize 设置为 max，则是整个 Row 宽度基础上按照 spaceBetween 的方式进行排列，如果 mainAxisSize 设置为 min，则是三个 Container 宽度之和范围内按照 spaceBetween 的方式进行排列。

4. crossAxisAlignment

设置子 Widget 沿着交叉轴方向的排列方式，默认 CrossAxisAlignment.center，可设置的方式如下：

• CrossAxisAlignment.start：与交叉轴的起始位置对齐；
• CrossAxisAlignment.end：与交叉轴的结束位置对齐；
• CrossAxisAlignment.center：居中对齐；
• CrossAxisAlignment.stretch：填充整个交叉轴；
• CrossAxisAlignment.baseline：按照第一行文字基线对齐。

对比效果如下：

​

5. verticalDirection

设置垂直方向上的子 Widget 的排列顺序，默认为 VerticalDirection.down，设置方式如下：

• VerticalDirection.down：start 在顶部，end 在底部；
• VerticalDirection.up：start 在底部，end 在顶部。

对比效果如下：

​

 注意观察交叉轴设置的 CrossAxisAlignment.end，在此基础上垂直方向上的变化。

6. textBaseline

设置文字对齐的基线类型，可设置的值如下：

• TextBaseline.alphabetic：与字母基线对齐；
• TextBaseline.ideographic：与表意字符基线对齐；

使用时当 crossAxisAlignment 设置为 baseline 时，必须设置 textBaseline 属性的值，使用方式如下：

// textBaseline  
class FlexSamplePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Flex Sample"),  
        centerTitle: true,  
      ),  
      body: Row(  
        children: <Widget>\[  
          Expanded(  
              child: Row(  
                children: <Widget>\[  
                  Text("躬",style: TextStyle(fontSize: 40,),),  
                  Text("x",style: TextStyle(fontSize: 60,),),  
                  Text("ing",style: TextStyle(fontSize: 16,),),  
                  Text("之",style: TextStyle(fontSize: 16,),),  
                \],  
          )),  
          Expanded(  
              child: Row(  
                crossAxisAlignment: CrossAxisAlignment.baseline,  
                textBaseline: TextBaseline.alphabetic,  
                children: <Widget>\[  
                  Text("躬",style: TextStyle(fontSize: 40,),),  
                  Text("x",style: TextStyle(fontSize: 60,),),  
                  Text("ing",style: TextStyle(fontSize: 16,),),  
                  Text("之",style: TextStyle(fontSize: 16, ),),  
                \],  
          )),  
          Expanded(  
              child: Row(  
                crossAxisAlignment: CrossAxisAlignment.baseline,  
                textBaseline: TextBaseline.ideographic,  
                children: <Widget>\[  
                  Text("躬",style: TextStyle(fontSize: 40, ),),  
                  Text("x",style: TextStyle(fontSize: 60,),),  
                  Text("ing",style: TextStyle(fontSize: 16,),),  
                  Text("之",style: TextStyle(fontSize: 16,),),  
                \],  
              ))  
        \],  
      ),  
    );  
  }  
}  

 分别为不设置 textBaseline 属性、设置 TextBaseline.alphabetic 和 TextBaseline.ideographic，对比效果如下：

​

两者虽然在对应基线含义上有所不同，但是测试没发现不同，后期继续留意观察，知道的朋友可以评论指出。

Row和Column

Row 和 Column 都继承 Flex，Row 主轴的方向为水平方向，Column 主轴的方向为竖直方向，即在 Flex 基础上设置了主轴方向 direction，如下：

// Row  
direction: Axis.horizontal,  
/// Column  
direction: Axis.vertical,  

如果确定主轴方向，可以直接使用 Row 或者 Column，使用方式和 Flex 一致。

Expanded和Flexible

Flexible 的 fix 属性默认为 FlexFit.loose，而 Expanded 继承 Flexible，其 fix 属性指定为 FlexFit.tight，两者因为其 fix 属性不用而不同，若将 Flexible 的 fit 属性设置为 FlexFit.tight，则 Flexible 与 Expanded 等效，可设置的 fit 属性如下：

• tight：强制填充可利用的空间；
• loose：不强制填充可利用空间，Widget自身大小。

对比效果如下：

​

Expanded和Flexible

Expanded 可以使 Row、Column、Flex 里面的组件填充沿着主轴可利用的空间，如果多个 Widget 都使用了 Expanded 组件，可以使用 Expanded 的 flex 属性按照比例分配主轴空间，flex 属性相当于 Android LinearLayout 的 weight 属性，如下：

// Expanded  
class ExpandedSamplePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
        appBar: AppBar(  
          title: Text("Row Sample"),  
          centerTitle: true,  
        ),  
        body: Row(  
          mainAxisAlignment: MainAxisAlignment.start,  
          mainAxisSize: MainAxisSize.max,  
          children: <Widget>\[  
            Expanded(  
              flex: 1,  
              child: Container(  
                  width: 50,  
                  height: 50,  
                  color: Colors.red,  
                  child: Center(  
                    child: Text(  
                      "A",  
                      style: TextStyle(fontSize: 20, color: Colors.white),  
                    ),  
                  )),  
            ),  
            Expanded(  
              flex: 2,  
              child: Container(  
                  width: 50, // Row Expanded下width无效  
                  height: 50, // Column Expanded下height无效  
                  color: Colors.green,  
                  child: Center(  
                    child: Text(  
                      "B",  
                      style: TextStyle(fontSize: 20, color: Colors.white),  
                    ),  
                  )),  
            ),  
            Container(  
                width: 50,  
                height: 50,  
                color: Colors.yellow,  
                child: Center(  
                  child: Text(  
                    "C",  
                    style: TextStyle(fontSize: 20, color: Colors.white),  
                  ),  
                )),  
          \],  
        ));  
  }  
}  

 显示效果如下：

​

Spacer

Spacer 用来调节 Widget 之间的间距，会占据所有的剩余空间，因此 MainAxisAlignment 的设置将无效，Spacer 的属性 flex 用于设置剩余空间的分配权重，默认值为 1，表示占据所有剩余空间，如果两个以上 Spacer 则按照 flex 分配剩余空间，代码参考如下：

class RowSamplePage1 extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
        appBar: AppBar(  
          title: Text("Row Sample"),  
          centerTitle: true,  
        ),  
        body: ConstrainedBox(  
          constraints: BoxConstraints(maxHeight: 150),  
          child: Row(  
            children: <Widget>\[  
              Container(  
                width: 80,  
                height: 80,  
                color: Colors.red,  
              ),  
              Spacer(flex: 1,),  
              Container(  
                width: 80,  
                height: 80,  
                color: Colors.green,  
              ),  
              Spacer(flex: 2,),  
              Container(  
                width: 80,  
                height: 80,  
                color: Colors.yellow,  
              ),  
            \],  
          ),  
        ));  
  }  
}  

 显示效果如下：

​