flutter listview 滚动到底部_Flutter系列之Flex布局详解

7c6388e1167c30071d031775167d2dcf.png
PS:长期坚持是一件很难的事。
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 示意图如下:
d9dd5b9497bd8423bfb37f807caad9aa.png
关于这张图的介绍请查看前面这篇文章:
  • 微信小程序之Flex容器详解

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.
报错显示如下:
d70f0062442fbbfb689421584af8235a.png
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 之间的间隔相等.

对比效果如下:
9ce3e71192d667c939e85d25f019fa3e.pngmainAxisAlignment
3. mainAxisSize
设置主轴的大小,默认 MainAxisSize.max,可设置的值如下:
  • MainAxisSize.max:主轴的大小是父容器的大小;

  • MainAxisSize.min:主轴的大小是其子 Widget 大小之和。

对比效果如下:
d42f8e9d7bd1fb94f0f0e88eaab26eef.pngmainAxisSize
将 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:按照第一行文字基线对齐。

对比效果如下:
4f8ea06a5da6874df3a9499bb2a7bdce.pngcrossAxisAlignment
5. verticalDirection
设置垂直方向上的子 Widget 的排列顺序,默认为 VerticalDirection.down,设置方式如下:
  • VerticalDirection.down:start 在顶部,end 在底部;

  • VerticalDirection.up:start 在底部,end 在顶部。

对比效果如下:
cf6190a697244622dfec5fba2c539e1d.pngverticalDirection
注意观察交叉轴设置的 CrossAxisAlignment.end,在此基础上垂直方向上的变化。
6. textBaseline
设置文字对齐的基线类型,可设置的值如下:
  • TextBaseline.alphabetic:与字母基线对齐;

  • TextBaseline.ideographic:与表意字符基线对齐;

使用时当 crossAxisAlignment 设置为 baseline 时,必须设置 textBaseline 属性的值,使用方式如下:
// textBaselineclass FlexSamplePage extends StatelessWidget {@override
  Widget build(BuildContext context) {return Scaffold(
      appBar: AppBar(
        title: Text("Flex Sample"),
        centerTitle: true,
      ),
      body: Row(
        children: [
          Expanded(
              child: Row(
                children: [
                  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: [
                  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: [
                  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,对比效果如下:
0409794662d26bca890845f1e528df24.png
两者虽然在对应基线含义上有所不同,但是测试没发现不同,后期继续留意观察,知道的朋友可以评论指出。
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自身大小。

对比效果如下:
02a3e48aee37300ed912437ba7015b5a.pngExpanded和Flexible
Expanded 可以使 Row、Column、Flex 里面的组件填充沿着主轴可利用的空间,如果多个 Widget 都使用了 Expanded 组件,可以使用 Expanded 的 flex 属性按照比例分配主轴空间,flex 属性相当于 Android LinearLayout 的 weight 属性,如下:
// Expandedclass 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: [
            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),
                  ),
                )),
          ],
        ));
  }
}
显示效果如下:
1e9cc183be85145a19218bd8eced23a3.png
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: [
              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,
              ),
            ],
          ),
        ));
  }
}
显示效果如下:
bc2dccf7aef48fb103b2c5170cc4ba80.png
以上主要学习了 Flutter 中 Flex 布局相关内容,重点是理解 Flex 基本概念,在此基础上对 Flex 布局进行了学习和验证。 推荐阅读:
  • Flutter系列之Navigator使用详解

  • 编译时注解详解及实现ButterKnife

  • Wireshark分析验证TCP协议
26b7b0225038bb82cf1ef09491903d22.png
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值