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

70次阅读

共计 6900 个字符，预计需要花费 18 分钟才能阅读完成。

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

  1. Flex 根底
  2. Flex 罕用设置
  3. Row 和 Column
  4. Expanded 和 Flexible
  5. Spacer

Flex 根底

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 罕用设置

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 能够使 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,  
              ),  
            \],  
          ),  
        ));  
  }  
}

显示成果如下：

正文完
android
发表至： android
2022-02-11
 0
关于android:Opengl-ES之FBO
关于android:Android-序列化框架-Gson-原理分析可以优化吗
关于android:培养用户习惯提升应用留存｜Google-Play-开发者播客节目-第十五期
关于android:本塔科技借力VR-Engine提供更优质的3D-VR内容