14 | 经典布局:如何定义子控件在父容器中排版的位置?
![](https://static001.geekbang.org/resource/image/dc/b7/dc9e98d9bd582e91d8747716b4399ab7.jpg)
该思维导图由 AI 生成,仅供参考
- 深入了解
- 翻译
- 解释
- 总结
![](https://static001.geekbang.org/resource/image/d0/e4/d0880927e2a522a038be2d04bf19dfe4.png)
Flutter中的布局规则对于构建漂亮的界面至关重要。本文介绍了Flutter中常用的布局控件,包括单子Widget布局、多子Widget布局、层叠Widget布局等。在Flutter中,布局控件的划分非常详细,相比原生Android、iOS平台多了不少种类,这为开发者提供了更多的选择和灵活性。 文章重点介绍了单子Widget布局中的Container、Padding和Center的使用方法,以及它们的特点和区别。通过示例代码和图示,读者可以清晰地了解这些布局控件的使用方式和效果。接下来,文章还将介绍多子Widget布局的三种方式,即Row、Column和Expanded,帮助读者全面掌握Flutter中常用的布局方式。 通过本文的学习,读者可以快速了解Flutter中布局规则的特点和用法,为开发精美的App提供了重要的参考和指导。另外,文章还介绍了层叠Widget布局中的Stack和Positioned的使用方法,帮助读者实现多个控件堆放的布局效果。 总的来说,本文通过介绍Flutter中常用的布局控件,为读者提供了全面的布局概念和实际操作指南,使读者能够快速掌握如何搭建App的界面。同时,通过思考题的设置,也引发了读者对布局规则的深入思考和讨论。 总结:本文全面介绍了Flutter中常用的布局控件,包括单子Widget布局、多子Widget布局和层叠Widget布局,为读者提供了重要的参考和指导,使其能够快速了解并掌握Flutter中布局规则的特点和用法。
《Flutter 核心技术与实战》,新⼈⾸单¥59
全部留言(25)
- 最新
- 精选
- 江宁彭于晏Row 与 Column 自身的大小由父widget的大小、子widget的大小、以及mainSize设置共同决定(mainAxisSize和crossAxisSize) -主轴(纵轴)值为max:主轴(纵轴)大小等于屏幕主轴(纵轴)方向大小或者父widget主轴(纵轴)方向大小 -主轴(纵轴)值为min: 所有子widget组合在一起的主轴(纵轴)大小
作者回复: 赞
2019-08-05225 - 爱吃胡萝卜个人看来ios布局最核心的就是求解线性方程组,ios的uiview是不解耦的,属性配置,布局,交互都在一起。flutter 直接在系统层面进行解耦,分别对应装饰者模式,布局widget和交互接口,从系统设计层面进行解耦,更有利于程序健壮性和可读性
作者回复: 这个观点很新颖
2019-08-27211 - 许童童自身大小由主轴的大小属性确定,MainAxisSize.max。当它们嵌套时,还是按照自身的属性,确定主轴、纵轴、和自己的定位。
作者回复: 还有子Widget
2019-07-301 - sixgod想要让某个widget固定在页面某个位置的话需要用stack把整个页面包起来吗
作者回复: Align也可以
2019-10-14 - 面向加薪学习Stack 容器与前端中的绝对定位 请教一下,这个如果在适配不同设备的时候,会不会有问题?
作者回复: 绝对定位其实最终也是相对于父widget的大小进行定位,所以只要确保这个前提就能保证ui适配的安全性了
2019-09-17 - 浣熊特工队请问老师,如何设置一个Widget的宽度为百分比大小呢?
作者回复: 用Expanded就可以呀
2019-09-03 - Zxt请问子视图绝对定位布局时需要父视图的size,但获取size时会报错原因大概是父视图还没有渲染完成,这种情况应该怎么解决呢? 父视图尺寸不固定
作者回复: Stack+Positioned做相对布局就可以了呀,父视图位置即使再不固定,你在布局子Widget时也是需要相对父Widget的边界进行排版的
2019-08-30 - Cm trésor老师,你好,我在一个高度不固定的容器里画一条与容器等高的线该如何实现?尝试了好久都不行
作者回复: 试试Stack+Positioned+IntrinsicWidth
2019-08-282 - 罗勇与安卓布局大致对应关系: Row/Column -> LinearLayout Stack -> RelativeLayout Positoned -> AbsoluteLayout
作者回复: Stack和Positioned其实和Framelayout和RelativeLayout更像
2019-08-142 - 爱吃胡萝卜能不能抽空讲讲flutter 和ios以及aos布局思维方式的差异,因为经常使用自动布局,导致在写flutter 的时候各种布局错误。
作者回复: 最大的区别可能就是对于布局能力的扩展支持上。Flutter与原生在不同的布局行为上定义了常见的基本容器,不过对待特殊的布局样式,原生可以通过设置基本容器的属性搞定,而Flutter则会选择在外层再包装一层布局样式,通过组合搞定。
2019-08-123