专栏首页阿策小和尚【Flutter 专题】68 图解基本约束 Box (三)

【Flutter 专题】68 图解基本约束 Box (三)

和尚对约束 Box 探索之路还在继续,和尚今天主要学习一下 Overflow 相关 Box

OverflowBox

源码分析

class OverflowBox extends SingleChildRenderObjectWidget {
  const OverflowBox({
    Key key,
    this.alignment = Alignment.center,  // 对齐方式
    this.minWidth,                      // 允许最小宽度
    this.maxWidth,                      // 允许最大宽度
    this.minHeight,                     // 允许最小高度
    this.maxHeight,                     // 允许最大高度
    Widget child,
  })
}

分析源码可得,OverflowBox 通过设置最大最小宽高对子 Widget 进行约束,且与父 Widget 相关,子 Widget 可能会溢出父 Widget

案例尝试

和尚通过如下几种场景探索 OverflowBox 与父 Widget 和子 Widget 的关联关系,其中 alignment 是通用的对齐方式,不在此单独说明;由于 OverflowBox 允许子 Widget 溢出父 Widget,很多朋友用此实现自定义 Dialog

  1. Widget 无约束,仅设置 minWidth / minHeight,子 Widget 宽高小于等于 OverflowBox 最小宽高;此时 child.width <= minWidth && child.height <= minHeight,最终以 OverflowBox 设置的最小宽高约束子 Widget
return Container(color: Colors.blueAccent.withOpacity(0.4),
    child: OverflowBox(alignment: Alignment.center, minHeight: 100,
        child: Container(color: Colors.purple.withOpacity(0.4), width: 50, height: 50)));
  1. Widget 无约束,仅设置 minWidth / minHeight,子 Widget 宽高大于 OverflowBox 最小宽高;此时 minWidth < child.width < maxWidth,最终以子 Widget 设置的宽高展示;
 return Container(color: Colors.green.withOpacity(0.4),
    child: OverflowBox(alignment: Alignment.center, minHeight: 100, minWidth: 100,
        child:Container(color: Colors.purple.withOpacity(0.4), width: 150, height: 150)));
  1. Widget 无约束,设置 maxWidth / maxHeight,若 child.width > maxWidth || child.height > maxHeight 则以 OverflowBox 设置的最大宽高约束子 Widget;若 child.width < maxWidth && child.height < maxHeight 则按照上述两种情况进行约束;
return Container(color: Colors.orange.withOpacity(0.4),
    child: OverflowBox(alignment: Alignment.center,
        minHeight: 100, maxWidth: 150, maxHeight: 150,
        child: Container(color: Colors.purple.withOpacity(0.4), width: 50, height: 50)));
return Container(color: Colors.grey.withOpacity(0.4),
    child: OverflowBox(alignment: Alignment.center,
        minHeight: 100, minWidth: 100, maxWidth: 150, maxHeight: 150,
        child: Container(color: Colors.purple.withOpacity(0.4), width: 200, height: 200)));
  1. Widget 有约束,设置 maxWidth > parent.width || maxHeight > parent.height,此时允许子 Widget 宽高大于父 Widget 宽高,其约束方式与上述情况相同;
return Container(width: 200, height: 200, color: Colors.brown.withOpacity(0.4),
    child: OverflowBox(alignment: Alignment.center,
        minHeight: 100, minWidth: 50, maxHeight: 250, maxWidth: 250,
        child: Container(color: Colors.purple.withOpacity(0.4))));
  1. 对于大部分涉及最大最小宽高的 Widget,最小宽高均不允许大于最大宽高,使用时请注意;
return Container(width: 200, height: 200, color: Colors.brown.withOpacity(0.4),
    child: OverflowBox(alignment: Alignment.center,
        minHeight: 250, minWidth: 50,
        child: Container(color: Colors.purple.withOpacity(0.4))));

SizedOverflowBox

源码分析

class SizedOverflowBox extends SingleChildRenderObjectWidget {
  const SizedOverflowBox({
    Key key,
    @required this.size,                // 约束 Size
    this.alignment = Alignment.center,  // 对齐方式
    Widget child,
  })
}

分析源码可知,SizedOverflowBoxSizedBoxOverflowBox 的结合,和尚简单理解 SizedBox 设置基本约束,OverflowBox 设置子 Widget 与父 Widget 关系,是否溢出;

案例尝试

size 是对子 Widget 的基本尺寸约束,alignment 是通用的对齐方式,和尚按如下场景进行尝试;

  1. Widget 无约束,若 child.width <= Size.x && child.height <= Size.y,以子 Widget 宽高约束展示;
return Container(color: Colors.green.withOpacity(0.4),
    child: Center(child: SizedOverflowBox(
        size: Size(100, 100), alignment: Alignment.center,
        child: Container(width: 50, height: 50, color: Colors.blueAccent.withOpacity(0.6)))));
  1. Widget 无约束,若 child.width > Size.x || child.height > Size.h,以子 Widget 宽高溢出展示;
return Container(color: Colors.orange.withOpacity(0.4),
    child: Center(child: SizedOverflowBox(
        size: Size(100, 100), alignment: Alignment.center,
        child: Container(width: 150, height: 150, color: Colors.purple.withOpacity(0.4)))));
  1. Widget 有约束时,若 child.width <= Size.x && child.height <= Size.y 时,与状况一相同;若 child.width > parent.width >= Size.x || child.height > parent.height >= Size.y,则子 Widget 溢出 SizedOverflowBox 到父 Widget 约束宽高展示;
return Container(width: 150, height: 150, color: Colors.redAccent.withOpacity(0.4),
    child: Center(child: SizedOverflowBox(
        size: Size(100, 100), alignment: Alignment.center,
        child: Container(width: 250, height: 50, color: Colors.grey.withOpacity(0.8)))));
  1. Widget 有约束时,若 Size.x > parent.width || Size.y > parent.height,最终展示的最大宽高是父 Widget 约束的宽高(子 Widget 溢出或非溢出);
return Container(width: 150, height: 150, color: Colors.redAccent.withOpacity(0.4),
    child: Center(child: SizedOverflowBox(
        size: Size(400, 400), alignment: Alignment.topLeft,
        child: Container(width: 150, height: 50, color: Colors.grey.withOpacity(0.8)))));

小理解

和尚尝试了诸多约束 Box,甚至有些 Box 在使用和功能上大同小异,相同的功能,可以用其他的 Widget 来实现但为什么要有这么多约束 Box

和尚对此理解还不够深入,仅简单的交流个人理解,如有错误请多多指导!对于常用的 SizedBox 既可以用作约束盒子也可以作为空间占位符,对此 Container 完全可以实现,还可以实现很多复杂效果;SizedBox 存在的理由:和尚认为一是 SizedBox 功能更单一,相对于 Container 性能更好(Flutter 渲染性能很高,可以忽略不计);二是 SizedBox 功能性更加清晰明确;合理利用各 Widget 会让编码更加清晰高效;

和尚对约束 Box 的探索暂时到此,希望大家可以对各类 Box 多多尝试!

来源:阿策小和尚

本文分享自微信公众号 - 阿策小和尚(gh_8297e718c166)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 腾讯云服务器上部署LNMP环境

    最近在学Laravel,同参考文章,本来只是在虚拟机上运行,但现在正好因为手上有腾讯云服务器,所以就直接拿来部署Laravel。

    用户6468650
  • 令人惊叹的前端路由原理解析和实现方式

    ? 在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂。想要搞懂路由内部实现还是...

    腾讯技术工程官方号
  • Jira是什么

    JIRA这个工具接触有好几年了,在多个海外项目上都用过这个工具。去年又在项目上深度使用后就有点爱不释手了,回国后也在找机会推荐给其它项目上用。最近正好有新项目需...

    用代码征服天下
  • 腾讯云服务器搭建网站

    对于服务器来说稳定、极速就选择 2核 4G内存配置的云服务器比较稳妥。这个配置跑网站是比较轻松无压力的。配上 avada主题,可以做出的很大气、高大上的企业网站...

    用户6577384
  • 短视频系统源码APP开发由哪些功能模块组成?

    近年来,随着新媒体技术的快速发展,短视频系统源码APP,如今已经成为一种网络传播主流。短视频的快速兴起,究其原因,既有其形式的简约、技术的成熟等基础性因素,也源...

    布谷安妮
  • 从零开始搭建腾讯云服务器

    腾讯云服务器是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件,即可迅速创建或释放任意多台云服务器。...

    用户6248011
  • 股市舆情情感分类可视化系统

    在项目当前目录下:$ python manage.py runserver 浏览器打开127.0.0.1:8000

    机器学习AI算法工程
  • wordpress如何防止url被篡改

      一位网友反馈说他的wordpress网站经常被篡改url,访问网站直接跳到不相关的页面,只能进入数据库那修改wp_option表中修改homeurl字段才能...

    ytkah
  • 虚拟主机和云服务器怎么选?

    虚拟主机已经有了一段时间的历史,近几年随着其技术的不断成熟,以及其低廉的价格,成为众多站长的首选对象。但近两年云计算的出现,衍生出云服务器这个产物。这时,很多站...

    用户6570794
  • 腾讯云网站备案时常见驳回原因及解决办法

    腾讯云网站备案时还是会遇到很多被驳回的情况,大家也不要慌都是可以解决的。毕竟都是一些固定的规律,我们只要按照系统要求的去准备、提交资料就没问题了。

    魏艾斯博客www.vpsss.net

扫码关注云+社区

领取腾讯云代金券