学向勤中得，萤窗万卷书。这篇文章主要讲述Flutter 专题68 图解基本约束 Box#yyds干货盘点#相关的知识，希望能为你提供帮助。
            小菜对约束 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)));

   
   
   文章图片
   
   
2. 父 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)));

   
   
   文章图片
   
   
3. 父 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)));

   
   
   文章图片
   
   
4. 父 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))));

   
   
   文章图片
   
   文章图片
   
   
5. 对于大部分涉及最大最小宽高的 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, )

            分析源码可知，SizedOverflowBox 是 SizedBox 与 OverflowBox 的结合，小菜简单理解 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)))));

   
   
   文章图片
   
   
2. 父 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)))));

   
   
   文章图片
   
   
3. 【Flutter 专题68 图解基本约束 Box#yyds干货盘点#】父 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)))));

   
   
   文章图片
   
   
4. 父 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 多多尝试！

推荐阅读

• 

  安卓系统发展,安卓未来五年的发展趋势
• 

  支气管扩张|支气管扩张合并咯血患者的临床护理
• 

  红巧梅 红巧梅和玫瑰花一起泡有什么功效
• 

  plc模拟软件手机版，那有plc模拟编程软件下载
• 

  品牌|从小米独立出来之后，红米要设计独立UI了，会比MIUI更加流畅吗
• 

  空调和取暖器哪个更耗电
• 

  给小朋友解释雪是怎么形成的 冬天为什么会下雪
• 

  笑容作文600字 笑容作文500字
• 

  学心
• 

  销售毛利率一般为多少 销售毛利率计算公式是什么
• 

  单因素方差分析拒绝域,在单因素方差分析中,如果拒绝检验假设
• 

  摄影毁三代单反毁一生什么意思？
• 

  2023合肥幼儿园秋季招生摸底公告汇总 合肥幼儿园秋季招生时间
• 

  22/1000|22/1000 育儿中必须想明白什么是战，什么是略
• 

  菜鸟裹裹如何使用寄件功能 菜鸟裹裹寄件功能使用教程
• 

  恋爱必杀技 懂得吃醋
• 

  Android 原生开发H5React-Native使用利弊和场景技术分享
• 

  孩子的经典语录
• 

  小米粥煮太多,怎么处理 小米粥煮多了怎么保存
• 

  辣木籽直接吞有效果吗

• 数据结构第五站（树和二叉树）
• k8s-day2-名词解释（master）
• #yyds干货盘点# 通过淘宝数据学习爬虫，python scrapy requests与response对象
• 阿里云基本概念与基础架构 #yyds干货盘点#
• #yyds干货盘点# CoCon: A Self-Supervised Approach for Controlled Text Generation | ICLR 2021 论文
• 来自面试官一面MySQL索引的连续灵魂拷问
• #私藏项目实操分享#如何利用 onlyoffice 实现文档格式转换
• 我嗨了，竟然能直接访问github了，真不是标题党
• # yyds干货盘点 # 怎么在第一个PDF文件的中间，插入第二个PDF文件的内容（）