[版权申明]非商业目的注明出处可自由转载
博文地址：https://blog.csdn.net/ShuSheng0007/article/details/110292757
出自：shusheng007

前言

最近公司为了节约成本竟然要将公司的主力App从原生改为Flutter，天真的以为使用了Flutter就可以节约一半的开发成本。从技术上来评价这个决定真的是太糟糕了，但是也许决策者有其自身的考量，屁股决定脑袋，这本就无可厚非。。。对于我们的影响就是要学习一项新的技术，从另一方面来说这也是好事，但是公司没有给学习的时间，直接就上手了，导致初期还是遇到些许困难的，所以此处我将一些实践过的坑记录下来，一来方便自己日后查看，二来可以帮助遇到同样问题的同学。

我初期遇到的比较难受的问题就是关于布局约束的问题，总是搞不太懂。

Flutter 简介

官方定义

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase

Flutter在跨平台开发上的势头确实很猛，其比ReactNative 晚3年多出现，但是目前在GitHub上的星星数目已经比RN多了，突破了10万大关，而RN才9万多…

布局约束

在第一天使用Flutter布局的时候，最让我们头疼的就是那些布局的约束，完全无从下手，所以在此我记录一下到目前为此我对其的理解

总原则

Flutter官网对其有精辟的总结：

Constraints go down. Sizes go up. Parent sets position
约束向下，尺寸向上，Parent决定位置

理解了上面的话也就掌握了布局的80%，剩下的就是熟悉各种控件了。那它是什么意思呢？

下图红色Container是Center的child，绿色Container是红色Container的child。

下面是上图的代码：

Center(child: Container(color: Colors.red,padding: EdgeInsets.all(10),// alignment: AlignmentDirectional.bottomEnd,constraints: BoxConstraints(minWidth: 100, maxWidth: 200, minHeight: 100, maxHeight: 200),child: Container(color: Colors.green,width: 100,height: 100,),),)

约束向下：绿色的方块（儿子）的大小受红色方块（父亲）的约束。
爸爸告诉儿子：儿子，你今天请小姑娘吃饭最低200块标准，不然有点寒酸，但是最多不能超过1000块，不然爸爸肉疼。

尺寸向上：整个控件尺寸由绿色方块根据其父亲的约束决定。
儿子于是找饭店请姑娘吃饭，只挑消费水平在200到1000块的，只有这样才符合他爸爸的约束，回家才能不挨揍…

Parent决定位置：子控件的位置由其父控件设置。
爸爸还规定了儿子必须在自家楼下那几个饭店请小姑娘

我们可以看到，外层红色Container通过constraints属性指定了约束：宽高最小为100，最大为200。值得注意的是这个约束也包含其Padding。我们设置4边分别为10个单位的padding，那么其实留给绿色Container发挥的空间只有80到180了。

前面展示的是约束与尺寸的问题，那么某个空间的位置由谁确定呢？由它爸爸来确定。
例如此处红色方块之所以在屏幕中间就是由其爸爸Center决定的。那么绿色方块的位置如何确定呢？这是由它爸爸来指定，此处它爸爸是红色Container，里面有个属性alignment，可以指定其Child相对于自己的位置，不过值得注意的时，使用此属性就意味着红色Container将会直接膨胀到其最大约束，此处就是会膨胀为300*300的尺寸。

如果你觉得这个位置设置不符合你的需求，你也可以为绿色方块引入新的爸爸，例如Align 来设置其位置。

控件类型

总体来说控件的行为可以分为3中

使自己尽量大，例如Center
使自己与其儿子一样大
有自己特定的大小，例如Text,其大小由其字体大小决定

控件约束示例

MaterialApp

我们App的最外层，它会给其子控件强加一个约束，宽高必须是屏幕的宽高，所以如果你你放一个Container，一顿设置宽高都么什么鸟用，它还是会填充整个屏幕，而且会把这个约束再强加给它的儿子

Container

这是个神奇的控件，是个多面手。当不设置宽高及约束时，其会使自己尽可能的大，但是设置了宽高后就成了固定大小的控件。还可以设置背景等

其内部的constraints属性使其可以完成ConstrainedBox的任务。

Center

它对其儿子的约束非常宽松，它儿子的尺寸可以从0到Center的最大值。当你的尺寸设置不起作用时，你又搞不明白时，加个这哥们往往可以解决，但是最好还是要明白本文上面讲的知识。

UnconstrainedBox

用的很少，但是其可以使某个控件摆脱它爸爸对他它的约束。

UnconstrainedBox(child:Container(color:Colors.blue,width: 100,height: 100,),) ,)

上面的代码可以直接写在MaterialApp，保持100*100的大小，如果没有UnconstrainedBox，那么不管Container宽高设置多大，其尺寸都是要占满整个屏幕的。

Row,Column

这两个可能是最常用布局文件了。在main轴方向等于其子控件尺寸，在cross轴方向占据尽可能大的尺寸。他们对其子控件几乎没有约束，要多大给多大，只要它能给。

总结

其他请参考官方文档 Understanding constraints

程序员真的是要活到老学到老，我常常在想我们这么高强度地锻炼脑细胞，到老了是不是就不会得老年痴呆了。。。

初识Flutter之搞定布局约束相关推荐

微信小程序中wxml和wxss的样式说明，彻底搞定布局排版
对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
一劳永逸的搞定 flex 布局
2019独角兽企业重金招聘Python工程师标准>>> 寻根溯源话布局一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候, ...
必读 | 深入理解 Flutter 的布局约束
前言本文最初来自于社区成员 Marcelo Glasberg 在 Medium 发表的文章--"初学者应知应会的 Flutter 高级布局规则 (Flutter: The Advanced ...
【Android】毫无耦合性，一个Item根布局搞定 item侧滑删除菜单，像IOS那样简单的使用侧滑删除。
重要的话开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView. ...
android 仿快递步骤_【干货速递，建议收藏】Android 流式布局，一篇搞定
今天我们来看Android的流式布局. 所谓流式布局指的是ViewGroup中同一行的宽度不足以容纳下一个子view时,进行换行处理,而不需要考虑子view的大小,每一行的高度以其中最高者为准. Ta ...
C语言的底层逻辑剖析函数篇（其二），0基础搞定函数，初识函数递归，超详解
这里写目录标题 C语言的底层逻辑剖析函数篇(其二),0基础搞定函数,初识函数递归,超详解开篇语函数的调用(嵌套调用和链式访问) 1.嵌套调用 2.函数的链式访问函数的声明和定义函数声明和定义分 ...
无需任何自定义，一个布局搞定仿微信支付宝密码框
全网太多的密码输入框的实现方案,基本上都是自定义之类的.看起来还是挺麻烦,冥思苦想,想出了一种简单方案,一个布局就搞定.布局如下; <?xml version="1.0" e ...
一篇文章搞定《Android布局优化》
------<一篇文章搞定Android布局优化> 前言为什么要进行布局优化? Android绘制原理双缓冲机制布局加载原理布局加载优化的一些方法介绍 AsyncLayoutInf ...
一文搞定Matplotlib 各个示例丨建议收藏
摘要:Matplotlib 是 Python 的绘图库. 它可与 NumPy 一起使用 ,Matplotlib也是深度学习的常用绘图库,主要是将训练的成果进行图形化,因为这样更直观,更方便发现训练中的 ...

初识Flutter之搞定布局约束

前言