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.如何理解这些问题

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

  1. 紧约束标志(width/height),宽松约束标志(minWidth/maxWidth minHeight/minHeight),无约束:无宽高

  2. 子元素永远不能超出父级宽度,超出发生越界,越界是不合理的

  3. 父级约束,自己的约束,自身大小 共同决定渲染元素的大小 (指明的约束:Container/SizedBox/BoxConstraints 等,隐藏的约束:Center,Warp,Flex等,还有自身元素的大小(盒子模型) )

相关推荐
玉宇夕落4 小时前
🌌用CSS3打造“星球大战”片头:前端是代码界的导演,让文字在星空中翻滚
前端·javascript
gustt4 小时前
CSS3 动画实战:打造星球大战开场动画
前端·css
colorFocus4 小时前
Promise与async/await的接口串联和并联
前端·javascript
流星稍逝4 小时前
前端解决两数计算精度确实问题
前端
stringwu4 小时前
Flutter 中的 MVVM 架构实现指南
前端·flutter
俩毛豆4 小时前
【页面路由导航】三步实现页面跳转的完整示例
前端·harmonyos
Happy coder4 小时前
【avalonia教程】17mvvm简介、command
前端·javascript·vue.js
喵叔哟4 小时前
9. 从0到上线:.NET 8 + ML.NET LTR 智能类目匹配实战--Web API 接口与前端集成:把能力对外开放
前端·.net
烟袅4 小时前
CSS Animation 全面解析:从入门到实战,打造丝滑动效
前端·css
前端西瓜哥4 小时前
平面几何:多边线光滑化处理
前端