21Flutter 布局 —— 理解 BoxConstraint（盒约束）布局模型.pdfVIP

Flutter 布局 —— 理解 BoxConstraint （盒约束）布局 模型 前⾯讲了 Flutter ⼀些 UI Widget 的使⽤，但实际开发中，我们还需 要将这些 Widget 按照⼀定的布局组合起 ，Flutter 的布局和 Android、iOS、WEB 的布局有相似之处，也有不同之处。 所以这节，主要讲⼀下 Flutter 的布局原理：BoxConstraints （盒 约束）。 什么是 BoxConstraints （盒约束）？ BoxConstraints 翻译过 是 盒约束，⽤于指定 Widget ⼤⼩的约 束。 Flutter 的 Widget 都是通过 BoxConstraints 约束⼤⼩的。 BoxConstraints 如何来约束Widget的⼤ ⼩？ 如上图，以左上⻆为原点，在 X轴 和 Y轴 上设置最⼩值和最⼤值,就 对应了 BoxConstraints 的四个属性： 1. minWidth . maxWidth 3. minHeight 4. maxHeight 这四个属性可以确定如下的关系： 0.0 = minWidth = Widget宽度的实际⼤⼩ = maxWidth = double.infinity 0.0 = minHeight = Widget⾼度的实际⼤⼩ = maxHeight = double.infinity 这样就会形成⼀个矩形的范围：不⼩于⻩⾊的矩形，不⼤于绿⾊的矩 形，这样就确定了⼀个 Widget 的⼤⼩范围， Flutter 采⽤ BoxConstraints 是为了更好的适配多种平台。 Flutter 如何确定 Widget 的⼤⼩？ 前⾯讲的 BoxConstraints，只能确定 Widget ⼤⼩的⼀个范围，并 不能知道 Widget 的确切⼤⼩，这样是⽆法绘制的，那么 Flutter 是 如何确定 Widget ⼤⼩的呢？ 这是⼀个Widget树的结构，为了确定 Widget 的⼤⼩： 1. ⽗Widget 会将⾃⼰的 BoxConstraints 传递给⾃⼰的 ⼦ Widget，直到传到树的叶节点 （没有⼦节点了），因此树的叶 节点会拥有所有⽗节点的 BoxConstraints，这些 BoxConstraints 会相互影响。 . 叶节点的Widget 会根据这些 BoxConstraints 和⾃⼰的 BoxConstraints 计算出⾃⼰的⼤⼩，并将⾃⼰的⼤⼩返回给 ⽗ Widget。 3. ⽗Widget 得到 ⼦Widget 的⼤⼩后，根据 ⼦Widget 的⼤ ⼩、前⾯ ⽗Widget 们传递的 BoxConstraints 和⾃⼰的 BoxConstraints，同样可以计算出⾃⼰的⼤⼩，这样依次往上 传递⾄ 根Widget。 所以 Widget 的⼤⼩是受其 ⽗Widget 的约束和⾃⼰ ⼦Widget 的⼤⼩共同影响的 BoxConstraints 的种类 对 BoxConstraints 的四个属性赋不同的值，会有不同的约束效果， 为了更直观的了解这些约束效果，写了⼀个简单的 demo ： import package:flutter/material.dart; void main() = runApp(MyApp( Hello World )); class MyApp extends StatefulWidget { // This widget is the root of your application. String content; MyApp(this.content); @override StateStatefulWidget createState() { // TODO: implement createState return MyAppState(); } } class MyAppState extends StateMyApp { void increment() { setState(() { widget.content += d ; }); } @override Widget