【布局 widget】OverflowBox 与 SizedOverflowBox

简介: 【布局 widget】OverflowBox 与 SizedOverflowBox

image.png


OverflowBox

对于 OverflowBox ,文档只有一句话:把不同的约束强加给 child,允许 child overflow 父容器。这句话说的太简略了,使用的时候还是一头雾水,代码逻辑是这样的:

BoxConstraints _getInnerConstraints(BoxConstraints constraints) {
    return BoxConstraints(
      minWidth: _minWidth ?? constraints.minWidth,
      maxWidth: _maxWidth ?? constraints.maxWidth,
      minHeight: _minHeight ?? constraints.minHeight,
      maxHeight: _maxHeight ?? constraints.maxHeight,
    );
  }
  @override
  void performLayout() {
    if (child != null) {
      child?.layout(_getInnerConstraints(constraints), parentUsesSize: true);
      alignChild();
    }
  }
复制代码

用语言描述就是,优先取 OverflowBox 的 minWidth,maxWidth,minHeight,maxHeight,父级的约束值是用来兜底的,这样就清晰多了。parentUsesSize: true 是因为 OverflowBox 有 align 属性,需要摆放 child,比如想把 child 右对齐,如果不知道 child 的 size ,就无法知道 child 左边的 offset 是多少,所以 child 尺寸变化的时候,需要通知 OverflowBox ,让 OverflowBox 重新计算 offset ,调整位置。

OverflowBox 本身的大小是多少呢?下面两段代码给出解答。

@override
  bool get sizedByParent => true;
  @override
  Size computeDryLayout(BoxConstraints constraints) {
    return constraints.biggest;
  }
复制代码

sizedByParent 设置为 true 的意思是 OverflowBox 的尺寸只与 constrains 有关,也就是说父级完全可以决定 OverflowBox 的大小。具体是多大呢? constraints.biggest 的意思就是尽可能的大。

OverflowBox 给人的感觉是可以让 child 溢出,但它也可以缩小 child 的活动范围。所以 OverflowBox 的作用就是更改父级的约束。

溢出部分无法响应点击事件

SizedOverflowBox

一个有明确固定尺寸的组件,透传原始约束给子组件,子组件如果比父组件大,就会 overflow。

@override
  void performLayout() {
    size = constraints.constrain(_requestedSize);
    if (child != null) {
      child!.layout(constraints, parentUsesSize: true);
      alignChild();
    }
  }
复制代码

constraints.constrain(_requestedSize) 这句的意思就是在 constrains 的允许范围内,取最贴近 _requestedSize 的值。

通过代码可以看出,SizedOverflowBox 的尺寸是受约束和 size 参数共同影响的,也就是说,尺寸必须在约束允许的范围之内。比如约束 50

如果  SizedOverflowBox 的约束是 tight 约束,那么 SizedOverflowBox 就完全失去作用。因为 SizedOverflowBox 和 它的 child 都没有了发挥的空间,都只能一样大。

同样,溢出部分无法响应点击事件

应用场景

虽然这两个组件名字很像,但是效果上大相径庭。

比如实现下面的效果,用 OverflowBox 很合适。

image.png

Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
          child: OverflowBox(
              maxWidth: 110,
              maxHeight: 110,
              child: Container(
                width: 110,
                height: 110,
                decoration: BoxDecoration(border: Border.all(color: Colors.red)),
              )),
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
        )
])
复制代码

OverflowBox 的 child 红色 box 溢出 ,但不会影响 Container 的布局,相当于 css 中  outline 的效果。

SizedOverflowBox 有什么应用场景呢?在下图中蓝色的 box 溢出绿色的 box,这种适合用 SizedOverflowBox。


image.png

Container(
          color: Colors.green,
          alignment: Alignment.topRight,
          width: 100,
          height: 100,
          child: SizedOverflowBox(
              size: const Size(0, 0),
              child: Container(
                width: 20,
                height: 20,
                color: Colors.blueAccent,
              )
          ),
)
复制代码

这种效果一般用来做装饰。

OverflowBox 与 SizedOverflowBox 可以实现的效果用其它 widget 也可以实现,不过这两种情况下,用 OverflowBox 与 SizedOverflowBox 可读生更好些。


目录
相关文章
|
Kubernetes Java 微服务
Spring Boot与Kubernetes结合:构建高可靠、高性能的微服务架构
Spring Boot与Kubernetes结合:构建高可靠、高性能的微服务架构
453 0
|
前端开发 NoSQL MongoDB
一款基于Nodejs+express+mongodb的内容管理系统
一款基于Nodejs+express+mongodb的内容管理系统
250 0
|
自然语言处理 编译器 Linux
【Latex】texstudio使用和ACL论文模板初步解读
LaTeX是一类用于编辑和排版的软件,用于生成PDF文档。 LaTeX编辑和排版的核心思想在于,通过\section和\paragraph等语句,规定了每一句话在文章中所从属的层次,从而极大方便了对各个层次批量处理。 LaTeX在使用体验方
2135 0
【Latex】texstudio使用和ACL论文模板初步解读
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
11月前
|
前端开发 数据处理 开发者
Flutter应用开发中滚动性能优化与无限列表实现的重要性
本文深入探讨了Flutter应用开发中滚动性能优化与无限列表实现的重要性。首先分析了影响滚动性能的因素,如布局复杂度、重绘频率和数据处理等。接着介绍了优化方法,包括懒加载、简化布局、控制重绘和高效数据处理。最后详细讲解了无限列表的实现原理及步骤,并通过案例分析展示了具体应用,旨在为开发者提供实用的技术指导。
234 5
|
11月前
|
存储 缓存 Dart
Flutter&鸿蒙next 封装 Dio 网络请求详解:登录身份验证与免登录缓存
本文详细介绍了如何在 Flutter 中使用 Dio 封装网络请求,实现用户登录身份验证及免登录缓存功能。首先在 `pubspec.yaml` 中添加 Dio 和 `shared_preferences` 依赖,然后创建 `NetworkService` 类封装 Dio 的功能,包括请求拦截、响应拦截、Token 存储和登录请求。最后,通过一个登录界面示例展示了如何在实际应用中使用 `NetworkService` 进行身份验证。希望本文能帮助你在 Flutter 中更好地处理网络请求和用户认证。
508 1
|
数据采集 机器学习/深度学习 人工智能
云栖实录 | GenAI 时代 AI Infra 工程技术趋势与平台演进
本文根据2024云栖大会实录整理而成,演讲信息如下: 演讲人:林伟 | 阿里云智能集团研究员、阿里云人工智能平台 PAI 负责人;黄博远|阿里云智能集团资深产品专家、阿里云人工智能平台 PAI 产品负责人 活动:2024 云栖大会 - AI Infra 核心技术专场、人工智能平台 PAI 年度发布专场
|
安全 关系型数据库 Linux
|
Java Maven Android开发
安卓项目使用阿里云镜像加速构建过程
安卓项目使用阿里云镜像加速构建过程
3344 0
|
NoSQL Redis Docker
使用 Docker Compose 接管现有容器的文档
使用 Docker Compose 接管现有容器的文档
216 2