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核心技术与实战
登录|注册

13 | 经典控件(二):UITableView/ListView在Flutter中是什么?

陈航 2019-07-27
你好,我是陈航。
在上一篇文章中,我和你一起学习了文本、图片和按钮这 3 大经典组件在 Flutter 中的使用方法,以及如何在实际开发中根据不同的场景,去自定义展示样式。
文本、图片和按钮这些基本元素,需要进行排列组合,才能构成我们看到的 UI 视图。那么,当这些基本元素的排列布局超过屏幕显示尺寸(即超过一屏)时,我们就需要引入列表控件来展示视图的完整内容,并根据元素的多少进行自适应滚动展示。
这样的需求,在 Android 中是由 ListView 或 RecyclerView 实现的,在 iOS 中是用 UITableView 实现的;而在 Flutter 中,实现这种需求的则是列表控件 ListView。

ListView

在 Flutter 中,ListView 可以沿一个方向(垂直或水平方向)来排列其所有子 Widget,因此常被用于需要展示一组连续视图元素的场景,比如通信录、优惠券、商家列表等。
我们先来看看 ListView 怎么用。ListView 提供了一个默认构造函数 ListView,我们可以通过设置它的 children 参数,很方便地将所有的子 Widget 包含到 ListView 中。
不过,这种创建方式要求提前将所有子 Widget 一次性创建好,而不是等到它们真正在屏幕上需要显示时才创建,所以有一个很明显的缺点,就是性能不好。因此,这种方式仅适用于列表中含有少量元素的场景
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(28)

  • 大土豆
    我想问的最关键的一点是,flutter的列表有重用的概念吗?1000条数据,是会渲染出1000个视图对象还是像Androd或者iOS原生的那样重用机制,就渲染屏幕当中的的视图对象

    作者回复: 后者

    2019-07-27
    2
    7
  • 季末灬离殇
    double offsetY = scrollNotification.metrics.pixels;
    滚动过程中通过偏移量更改isTop即可。

    作者回复: 赞

    2019-07-27
    4
    3
  • Dominic
    有没有完整的代码放github上,后端程序表示片段代码,运行不起来

    作者回复: 更新了github链接

    2019-07-31
    1
    1
  • NASA
    希望每节能配有小demo,毕竟每个人水平都不同

    作者回复: 更新了github链接

    2019-07-30
    1
    1
  • 杨闯
    你好,我们现在需要在debug的时候引用一些库,而在release的时候不引用一些库,而这个库使用了fmdb,因此有以下两个问题
    1、在dart代码中,如何通过判断来决定要不要将import这个库和使用这个库的相关方法,而现在不能完成编译。
    2、如果将这个库放到dev_dependencies里面,在编译release的时候,这个库没有被引入进来,但是fmdb被引入进来了,怎么避免fmdb给引用进来,是哪里出现问题了吗,还是哪里需要进行特别的设置

    作者回复: 1.试试assert
    2.你可以把这个库的所有依赖都完全展开,放到dev_dependencies中

    2019-07-29
    1
    1
  • 许童童
    老师你好,CustomScrollView 的sliver还是不是特别理解,可以再给点参考资料吗?

    作者回复: 可以看看这个https://medium.com/@greg.perry/decode-customscrollview-d5a60fcfb9fb

    2019-07-27
    3
    1
  • arronK
    1. cacheExtent
    2. notification.metrics
    2019-12-12
  • 狗子不要喝奶茶
    课后小作业的预加载:是否使用cacheExtent呢

    作者回复: 赞

    2019-10-29
  • 赤茗
    问一下问什么ListView和SliverList(其他 list没试)为什么一定要以Scaffold作为根布局?我直接 return CustomScrollView的话,只有SliverAppBar部分是正常的,下边的SliverList显示是错误的

    作者回复: 因为Scafford是构建页面的脚手架呀,其他的组件大都依赖这个结构

    2019-10-24
  • 微笑美男😄
    老师 ,separated 在分割线里面没法设置itemExtent 是吧

    作者回复: 是

    2019-10-10
  • 巫山老妖
    如果要用Flutter来实现ListView,其实可以讲的东西很多,比如item复用、item事件点击、下拉刷新实现,滚动底部刷新。

    作者回复: 是的,不过这几个内容的基本方向在本次分享都已经覆盖到了,高阶的一些用法除了下拉刷新涉及到滚动监听+自定义视图更新之外,其他的通过Flutter提供的基本API实现,也不复杂

    2019-10-04
  • 钱钱钱我爱钱
    老师,我发现example里的ListView UI异常了,因为这里没办法上传图片,我写在了博客里。
    https://blog.csdn.net/aprilcuhk/article/details/101520028
    希望老师可以解答一下,谢谢!!!

    作者回复: 最后一个item的边界是ListView的边框,设计上就不应该存在分割线。如果你想实现分割线的效果,可以自己画一个

    2019-09-27
  • 有妖气
    老师,NestedScrollView中body是一个customScrollview。这个customScrollview中包含一个listview,那么怎么知道listview已经滑动到了底部,目前想在内部的listview中做一个上拉刷新的操作。

    作者回复: 通过NotificationListener的metrics:

    NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification scrollInfo) {
        if (scrollInfo.metrics.pixels ==
            scrollInfo.metrics.maxScrollExtent) {
          loadMore();
        }
      },
      child: ListView.builder(
        // ...
      ),
    ),

    2019-09-08
  • 咖啡凉了
    _controller.addListener(() {// 为控制器注册滚动监听方法

          if(_controller.offset > 1000) {// 如果 ListView 已经向下滚动了 1000,则启用 Top 按钮

            setState(() {isToTop = true;});

          } else if(_controller.offset < 300) {// 如果 ListView 向下滚动距离不足 300,则禁用 Top 按钮

            setState(() {isToTop = false;});

          }

        });
    这里的setstate在滚动中会一直重复调用吧,会不会影响性能呢

    作者回复: 是会重复调用,因为Element与Renderboject会复用,所以整体渲染性能不受影响。但Widget确实会频繁重建,可以考虑在外层做一个简单判断,不重复设置。

    2019-09-02
  • 这得从我捡到一个鼠标垫开始说起
    cacheExtent是用这个参数实现预加载的对吧?

    作者回复: 对

    2019-08-26
  • Geek_614bf3
    航哥把经典的iOS效果带入了flutter

    作者回复: 哈哈

    2019-08-21
  • 右手边
    老师您好!会讲调试相关的内容吗?

    作者回复: 后面有一节会专门介绍调试

    2019-08-19
  • 🌙
    如果我不需要这种效果呢?比如上滑图片马上消失,或者上滑时变换图片

    作者回复: 可以自己通过ScrollController的监听器去定义滚动期间的行为

    2019-08-19
  • C
    为什么 ScrollNotification 滚动停止时回调 ScrollEndNotification 之后又回调了一次 UserScrollNotification 呢?

    作者回复: 你确认下你的Widget树中有没有其他的ScrollView

    2019-08-17
  • 🌙
    联动的操作在哪呢?是否是使用sliver就一定是这个效果?

    作者回复: 滚动视差就是联动效果的一种体现

    2019-08-16
    1
收起评论
28
返回
顶部