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等,还有自身元素的大小(盒子模型) )

相关推荐
带娃的IT创业者37 分钟前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
非凡ghost2 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求
Stanford_11062 小时前
React前端框架有哪些?
前端·微信小程序·前端框架·微信公众平台·twitter·微信开放平台
洛可可白2 小时前
把 Vue2 项目“黑盒”嵌进 Vue3:qiankun 微前端实战笔记
前端·vue.js·笔记
学习同学3 小时前
从0到1制作一个go语言游戏服务器(二)web服务搭建
服务器·前端·golang
-D调定义之崽崽3 小时前
【初学】调试 MCP Server
前端·mcp
四月_h3 小时前
vue2动态实现多Y轴echarts图表,及节点点击事件
前端·javascript·vue.js·echarts
文心快码BaiduComate4 小时前
用Zulu轻松搭建国庆旅行4行诗网站
前端·javascript·后端
行者..................5 小时前
手动编译 OpenCV 4.1.0 源码,生成 ARM64 动态库 (.so),然后在 Petalinux 中打包使用。
前端·webpack·node.js
小爱同学_5 小时前
一次面试让我重新认识了 Cursor
前端·面试·程序员