关于android:Flutter系列之Flex布局详解

Flutter 是 Google 推出的跨平台 UI 框架，能够疾速地在 Android 和 IOS 上构建高质量的应用程序，其次要特点是 Flutter 具备疾速开发的能力、富裕表现力和灵便的 Ui 以及良好的原生性能，本篇文章次要介绍 Flutter 中的 Flex 布局，如下：

Flex 根底
Flex 罕用设置
Row 和 Column
Expanded 和 Flexible
Spacer

Flex 布局形式曾经宽泛应用在前端、小程序开发之中，如果之前曾经学习过 Flex 布局，那么在 Flutter 中也是大同小异的，Flexible Box 示意图如下：

Flex Widget 能够设置主轴方向，如果通晓主轴方向，能够间接应用 Row 或者 Column，Flex Widget 不能滚动，如果波及到滚动能够尝试应用 ListView，Flex Widget 的内容超过其宽度和高度，则显示黄黑相间的正告条纹，以程度方向为例呈现的报错信息如下：

I/flutter (14749): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞════════════════════════════════════════════  ═════════════  
I/flutter (14749): The following assertion was thrown during layout:  
I/flutter (14749): A RenderFlex overflowed by 440 pixels on the right.

报错显示如下：

Flex 罕用属性如下：

direction
mainAxisAlignment
mainAxisSize
crossAxisAlignment
verticalDirection
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 都继承 Flex，Row 主轴的方向为程度方向，Column 主轴的方向为竖直方向，即在 Flex 根底上设置了主轴方向 direction，如下：

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

如果确定主轴方向，能够间接应用 Row 或者 Column，应用形式和 Flex 统一。

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

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

比照成果如下：

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 用来调节 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,  
              ),  
            \],  
          ),  
        ));  
  }  
}

显示成果如下：

Flex 根底

Flex 罕用设置

1. direction

2. mainAxisAlignment：

3. mainAxisSize

4. crossAxisAlignment

5. verticalDirection

6. textBaseline

Row 和 Column

Expanded 和 Flexible

Spacer