Flutter 弹性布局基石flex算法flexible示例详解
作者:IAM17 发布时间:2021-10-16 01:05:41
flex 布局算法
Flutter 弹性布局的基石 是 flex 和 flexible。理解了这两个 widget,后面的row,column 就都轻而易举了。本文用示例的方式详细介绍 flex 的布局算法。
先布局 flex 为 0 或 null 的 child。在 main 轴上 child 受到的约束是 unbounded。如果 crossAxisAlignment 是 CrossAxisAlignment.stretch, 在 cross 轴上的约束是 tight,值是 cross 轴上收到约束的最大值。否则,在 cross 轴上的约束是 loose。
为 flex 不为 0 的 child 申请空间,flex 值越大,按比例得到的可以占用的空间越大。
为 flex 不为 0 的 child 分配空间。main 轴方向的最大值是第二步申请到的空间的值。如果 child 的fit 参数为 FlexFit.tight,child在主轴方向 受到 tight 约束,值为第二步申请到的空间的值。如果 child 的 fit 参数为 FlexFit.loose,child在主轴方向 受到 loose 约束。child在主轴方向可以任意小,但不能超第二步申请到的空间的值。
flex cross 轴的高度是能包住所有 child,并不超过最大约束。
flex main 轴的宽度与 mainAxisSize 有关。如果 mainAxisSize 是 MainAxisSize.max,main 轴的宽度是最大约束值,否则是能包住所有child ,但不超过最大约束。
flex自己的尺寸和 child 的尺寸确认后,根据 mainAxisAlignment 和 crossAxisAlignment 摆放 child。
看了算法并不直观,下面通过实例讲解。
非弹性组件在 main 轴受到的约束是 unbounded
Flex(
direction: Axis.horizontal,
children: [
Container(
width: 1000,
height: 100,
color: Colors.red[200],
),
],
)
我们看到,Flex 在主轴的约束是 unbounded,所以 container 可以取值 1000,超出屏幕,显示警告。
fit 参数
flex 值越高,可以分到的空间越大。但能否占满空间取决于 fit 参数
Flex(
direction: Axis.horizontal,
children: [
Flexible(flex:2 ,child: Container(width: 50,height: 80,color: Colors.green,),),
Flexible(flex:1, child: Container(width: 100,height: 50,color: Colors.blue[300],),),
Container(width: 50,height: 100,color: Colors.red[200],
),
],
)
假设宽一共 200,布局过程:
先分配非弹性 child 红色块 50。
绿色和蓝色块是弹性块,它们会瓜分剩下的 150,按 flex 值,绿色块应该分 100,蓝色块分 50。
绿色块的 fit 值是 loose,flex 不强制它把空间占满,所以它只点了 50。蓝色块的 fit 值 是 loose,它的 width 比 50 大 flex 会强制它的宽度为 50。效果就是右边还剩下 50,那本来是分给绿色块的。
如果绿色块的 fit 值修改为 FlexFit.tight,剩下的空间就会被占满了,这个时候 width 会被忽略。
flexible 的作用就是为了修改 child 的 parentData,给 child 增加 fit, flex 布局信息。让 flex 根据这些信息为 child 布局。
Expanded
class Expanded extends Flexible {
const Expanded({
super.key,
super.flex,
required super.child,
}) : super(fit: FlexFit.tight);
}
Expanded 其实就是 fit 固定为 FlexFit.tight 的 flexible。其实可以直接用 flexible 的,但因为 Expanded 太常用了,所以单独加了一个类。同时 Expanded 也更加有语义。Expanded 和 flexible 的关系就像 Center 和 Align的一样。
Spacer
class Spacer extends StatelessWidget {
const Spacer({super.key, this.flex = 1})
: assert(flex != null),
assert(flex > 0);
final int flex;
@override
Widget build(BuildContext context) {
return Expanded(
flex: flex,
child: const SizedBox.shrink(),
);
}
}
Spacer 的 child 是 SizedBox.shrink(),用来占位,没有实际的意义。Spacer 是 Expanded 的包装,就是为了占空位用的。
至于摆放 child 的规则大同小异,如果有不明白的同学可以看 这篇 Flutter Wrap 图例
Flex 和 Flexible 如果都掌握了,Row 和 Colmn 自然就会了。因为 Row 只是 direction 为 Axis.horizontal 的 Flex,Column 只是 direction 为 Axis.vertical 的 Flex。
来源:https://juejin.cn/post/7180962741950087224
猜你喜欢
- 本文实例为大家分享了android实现密码框右侧显示小眼睛的具体代码,供大家参考,具体内容如下实现效果<?xml version=&q
- Apache Dubbo是一款高性能、轻量级的开源 Java RPC 框架,它提供了三大核心能力:面向接口的远程方法调用,智能容错和负载均衡
- 此篇文章是我一个小白对委托的理解和总结,请高手多多评判指教。委托就是一种后期绑定机制,说的直白点就是在调用的时候才去传递业务逻辑的一种算法。
- 一、前言滚动条一般用于加载进度,我们在看视频的时候或者在浏览网页的时候经常能看到加载进度的页面。在程序开发中,默认的进度加载样式可能跟程序风
- 前言在计算机内存中,数据的存储方式都是以0和1的形式存储,也就是二进制的形式,数据是如何向内存写入的呢?整形数据以补码的形式存储,浮点型的存
- 这里给大家带来的是动态webservice调用接口并读取解析返回结果的具体示例,非常的简单,注释也很详细,小伙伴们可以参考下。using S
- 最新Spring Data JPA官方参考手册 Version 2.0.0.RC2,2017-07-25https://docs.sprin
- 面试题1:说一下抽象类和接口有哪些区别?正经回答:抽象类和接口的主要区别:从设计层面来说,抽象类是对类的抽象,是一种模板设计;接口是行为的抽
- 本文实例为大家分享了java基于UDP实现在线聊天的具体代码,供大家参考,具体内容如下效果图:一、学习UDP的简单使用步骤接收端:Datag
- 前言EasyCache升级兼容 Springboot2,有个业务系统启动总是会卡住,最后抛出超时异常,如下:java.util.concur
- 一、什么是锁擦除锁擦除是指虚拟机即时编译器(JIT)在运行时,对一些代码上要求同步,但是被检测到不可能存在共享数据竞争的锁进行擦除。锁擦除的
- 一.线程不安全多线程的执行环境中,程序的执行结果和预期的结果不符合,这就称为发生了线程不安全现象二.那些情况导致了线程不安全?大致分为以下5
- 问题现象今天在做一个需求:将存入数据库中的数据读到后解析成list遍历分析数据格式:"[1677660600000, 167766
- 本文实例为大家分享了Android仿今日头条订阅频道,供大家参考,具体内容如下源码:Android实现今日头条订阅频道布局文件<?xm
- springmvc提供了 * ,类似于过滤器,他将在我们的请求具体出来之前先做检查,有权决定接下来是否继续,对我们的请求进行加工。 * ,可
- 一、按钮组件1.1 提交按钮组件package swing;import java.awt.*;import java.awt.event.
- 今天深度学习一下《Java并发编程的艺术》的第1章并发编程的挑战,深入理解Java多线程,看看多线程中的坑。注意,哈肯的程序员读书笔记并不是
- 在 Kotlin 中,reduce() 和 fold() 是函数式编程中常用的高阶函数。它们都是对集合中的元素进行聚合操作的函数,将一个集合
- 在c和c++中,我们知道没办法起一个变量名叫int,因为这是C/C++保留的关键字,起这么一个变量名没办法区分到底是int类型还是int变量
- @Transactional是我们在用Spring时候几乎逃不掉的一个注解,该注解主要用来声明事务。它的实现原理是通过Spring AOP在