Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

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

陈航 2019-07-30
你好,我是陈航。
在前面两篇文章中,我们一起学习了构建视图的基本元素:文本、图片和按钮,用于展示一组连续视图元素的 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/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(18)

  • 江宁彭于晏
    Row 与 Column 自身的大小由父widget的大小、子widget的大小、以及mainSize设置共同决定(mainAxisSize和crossAxisSize)
    -主轴(纵轴)值为max:主轴(纵轴)大小等于屏幕主轴(纵轴)方向大小或者父widget主轴(纵轴)方向大小
    -主轴(纵轴)值为min: 所有子widget组合在一起的主轴(纵轴)大小

    作者回复: 赞

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

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

    2019-08-27
    2
  • 艾姆希
    看其他资料不会举例子所以有时候看的一头雾水,陈航老师就会举例子,让人一看就知道就是这么回事,很棒
    2019-07-30
    1
  • 颜为晨
    cross axis 好像是横轴😁
    2019-10-30
  • 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
    1
  • 罗勇
    与安卓布局大致对应关系:
    Row/Column -> LinearLayout
    Stack -> RelativeLayout
    Positoned -> AbsoluteLayout

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

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

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

    2019-08-12
  • Mr.J
    老师您好,在Fluuter中布局的时候,经常碰到大小超出范围,有时候在这个模拟器上运行没事,运行到别的设备上就会有提示说布局超出范围,这个问题要怎么注意呢

    作者回复: 多试试几个不同尺寸的模拟器

    2019-08-05
    1
  • Ω
    使用 Android studio 如何在手机屏幕上查看控件所占有的位置大小

    作者回复: 试试Flutter inspector

    2019-08-02
    1
  • Dendi
    Stack布局中最下面一行文字应该是叠加在绿色视图上的吧,只是由于位置的原因向下偏移了

    作者回复: 是的,如果Text的top再往上移一些就叠加了

    2019-08-02
  • Tidom
    满满的干货
    2019-07-31
  • Running
    Row与Column是根据mainSize以及父Widget共同决定,如果父Widget没法确定大小,那么Row与Column就会出错

    作者回复: 赞

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

    作者回复: 还有子Widget

    2019-07-30
  • 许童童
    老师讲得真好,之前看了很多Flutter布局的书,都没有讲到要点,看了老师这篇文章,真的是醍醐灌顶啊!
    2019-07-30
收起评论
18
返回
顶部