flutter第二话题-布局约束

1.背景

开始看 flutter 的约束时，感觉非常难理解。一会紧约束，一会松约束，布局大小跟自己想象的为什么不一样。这个记录讨论一下自己的见解。有不对的地方欢迎指出。

2.flutter约束

布局中会有各种盒子大小，真实渲染盒子大小和预设可能不一样，这一切都是约束在起作用。一句话：父向下传递约束，子向上传递宽高。 如何理解这句话，就很重要。

这里举几个例子：

2.1 一些例子很重要

js 复制代码

Column(
        children: [
          Container( // 我听指挥，没有宽高，下级你自由发挥
            color: Colors.pink,
            child: Text( // 我听父级的，自由展示宽度
                '我想要200x200sa;lfjsadjf;sajfsa;fjsafjsal;fjsa;lfjsa;lfjsa;ldfjsad;lfjsald;jfl;sadjfl;safjls;afjs;afjsal;fjsdajfdlsa'),
          ),
          Container( // 我听指挥，必须200*200
            color: Colors.yellow,
            width: 200,
            height: 200,
            child: Text( // 父级告诉我，我必须200*200 我的空间只有200*200
                '我想要200x200sa;lfjsadjf;sajfsa;fjsafjsal;fjsa;lfjsa;lfjsa;ldfjsad;lfjsald;jfl;sadjfl;safjls;afjs;afjsal;fjsdajfdlsa'),
          ),
          Container( // 我听指挥，必须200*200，下级你是200*200
            color: Colors.yellow,
            width: 200,
            height: 200,
            child: Container( // 我听指挥，必须100*100 ，但是父级告诉我，min是200.所以我是200*200
              color: Colors.red,
              width: 100,// 不生效
              height: 100,//不生效
              child: Text( // 父级告诉我有200*200
                  '我想要200x200sa;lfjsadjf;sajfsa;fjsafjsal;fjsa;lfjsa;lfjsa;ldfjsad;lfjsald;jfl;sadjfl;safjls;afjs;afjsal;fjsdajfdlsa'),
            ),
          ),
          Center(
            child: Container( // 我听指挥，必须200*200
              color: Colors.yellow,
              width: 200,
              height: 200,
              child: Center( // 我听父级的，我是200*200 。但是我好说话，下级你可以是0<widht<200
                child: ConstrainedBox(// 我听指挥，最大100.但是父级告诉我，我可以0<widht<200。我在这个区间内，我就是 0-100.
                  constraints: const BoxConstraints(
                    maxWidth: 100, // 宽松约束：最大100宽
                    maxHeight: 100, // 宽松约束：最大100高
                  ),
                  child: Container( // 我听指挥，没有。我听父级的，0-100.所以我是100.
                    color: Colors.red.withOpacity(0.3), 
                    child: const Text(  // 我听父级的，0-100
                      '这是一段很长的文本内容，会自动换行并撑开到最大100x100的空间限制内',
                      style: TextStyle(fontSize: 12),
                    ),
                  ),
                ),
              ),
            ),
          ),
          Center(
            child: Container( // 我听指挥，必须200*200
              color: Colors.yellow,
              width: 200, 
              height: 200,

              child: ConstrainedBox( // 我听指挥，0-100.但是父级告诉我，最小200.所以我是200*200
                constraints: const BoxConstraints(
                  maxWidth: 100, // 不生效
                  maxHeight: 100, // 不生效
                ),
                child: Container(// 我听指挥，没有，我听父级的200*200.我好说话，下级你可以0-200
                  color: Colors.red.withOpacity(0.3), // 添加背景色看清楚边界
                  child: const Text( // 我听父级的 0-200
                    '这是一段很长的文本内容，会自动换行并撑开到最大100x100的空间限制内',
                    style: TextStyle(fontSize: 12),
                  ),
                ),
              ),
            ),
          ),
        ],

3.如何理解这些问题

总结：记住以下一些标志：

紧约束标志（width/height）,宽松约束标志（minWidth/maxWidth minHeight/minHeight）,无约束：无宽高
子元素永远不能超出父级宽度，超出发生越界，越界是不合理的
父级约束，自己的约束，自身大小共同决定渲染元素的大小（指明的约束：Container/SizedBox/BoxConstraints 等，隐藏的约束：Center，Warp,Flex等，还有自身元素的大小（盒子模型））