Flutter 核心技术与实战
陈航
前美团点评高级技术专家
42432 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 48 讲
Flutter 核心技术与实战
15
15
1.0x
00:00/00:00
登录|注册

14 | 经典布局:如何定义子控件在父容器中排版的位置?

Positioned
Stack
Expanded
Column
Row
Center
Padding
Container
Positioned
Stack
Expanded
Column
Row
Center
Padding
Container
层叠布局
多子Widget布局
单子容器
层叠Widget布局
多子Widget布局
单子Widget布局
思考题
总结
布局规则
经典布局:如何定义子控件在父容器中排版的位置?
参考文章

该思维导图由 AI 生成,仅供参考

你好,我是陈航。
在前面两篇文章中,我们一起学习了构建视图的基本元素:文本、图片和按钮,用于展示一组连续视图元素的 ListView,以及处理多重嵌套的可滚动视图的 CustomScrollView。
在 Flutter 中,一个完整的界面通常就是由这些小型、单用途的基本控件元素依据特定的布局规则堆砌而成的。那么今天,我就带你一起学习一下,在 Flutter 中,搭建出一个漂亮的布局,我们需要了解哪些布局规则,以及这些规则与其他平台类似概念的差别在哪里。希望这样的设计,可以帮助你站在已有经验的基础上去高效学习 Flutter 的布局规则。
我们已经知道,在 Flutter 中一切皆 Widget,那么布局也不例外。但与基本控件元素不同,布局类的 Widget 并不会直接呈现视觉内容,而是作为承载其他子 Widget 的容器。
这些布局类的 Widget,内部都会包含一个或多个子控件,并且都提供了摆放子控件的不同布局方式,可以实现子控件的对齐、嵌套、层叠和缩放等。而我们要做的就是,通过各种定制化的参数,将其内部的子 Widget 依照自己的布局规则放置在特定的位置上,最终形成一个漂亮的布局。
Flutter 提供了 31 种布局 Widget,对布局控件的划分非常详细,一些相同(或相似)的视觉效果可以通过多种布局控件实现,因此布局类型相比原生 Android、iOS 平台多了不少。比如,Android 布局一般就只有 FrameLayout、LinearLayout、RelativeLayout、GridLayout 和 TableLayout 这 5 种,而 iOS 的布局更少,只有 Frame 布局和自动布局两种。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

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-05
    2
    25
  • 爱吃胡萝卜
    个人看来ios布局最核心的就是求解线性方程组,ios的uiview是不解耦的,属性配置,布局,交互都在一起。flutter 直接在系统层面进行解耦,分别对应装饰者模式,布局widget和交互接口,从系统设计层面进行解耦,更有利于程序健壮性和可读性

    作者回复: 这个观点很新颖

    2019-08-27
    2
    11
  • 许童童
    自身大小由主轴的大小属性确定,MainAxisSize.max。当它们嵌套时,还是按照自身的属性,确定主轴、纵轴、和自己的定位。

    作者回复: 还有子Widget

    2019-07-30
    1
  • 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-28
    2
  • 罗勇
    与安卓布局大致对应关系: Row/Column -> LinearLayout Stack -> RelativeLayout Positoned -> AbsoluteLayout

    作者回复: Stack和Positioned其实和Framelayout和RelativeLayout更像

    2019-08-14
    2
  • 爱吃胡萝卜
    能不能抽空讲讲flutter 和ios以及aos布局思维方式的差异,因为经常使用自动布局,导致在写flutter 的时候各种布局错误。

    作者回复: 最大的区别可能就是对于布局能力的扩展支持上。Flutter与原生在不同的布局行为上定义了常见的基本容器,不过对待特殊的布局样式,原生可以通过设置基本容器的属性搞定,而Flutter则会选择在外层再包装一层布局样式,通过组合搞定。

    2019-08-12
    3
收起评论
显示
设置
留言
25
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部