文章目录 一、ExpansionTile 构造方法 二、完整代码示例 三、相关资源 一、ExpansionTile 构造方法 ---- 下面是 ExpansionTile 的构造方法 ; 其中 required...// 列表展示时显示的 Widget 组件集合 this.trailing, // 标题右侧的 Widget 组件 this.initiallyExpanded = false...示例"), ), /// 列表组件 body: ListView( children: _buildList(),...map((name) => _generateWidget(name)).toList(), ); } /// 生成 ExpansionTile 下的 ListView 的单个组件...GitHub 地址 : https://github.com/han1202012/flutter_listview ( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 :
来实现，Flutter 也提供了类似的部件 ListView 实现 ListView 的方法主要有 通过 ListView 设置 children 属性实现 通过 ListView.custom 实现...ExpansionTile 既然讲到了 ListView，在日常开发中，折叠列表也是一个比较常用的，所以这边要提下 ExpansionTile 这个部件，因为相对比较简单，所以直接上代码了 class...那么实现折叠列表也就是通过 ListView 创建一个 ExpansionTile 列表即可，先准备下模拟的数据 final _keys = ['ParentA', 'ParentB', 'ParentC...GridView 生成列表可以通过 ListView 来实现，那么同样，实现网格列表 Flutter 也提供了 GridView 来实现，实现 GridView 的方法也很多...我数了下，大概有 10...因为 GridView 和 ListView 亮着都是可滑动的部件，直接拼接肯定会有「滑动冲突」，所以 Flutter 就提供了一个粘合剂，CustomScrollView，那么 Flutter 如何实现呢
前言 ---- 在前面的文章中我们介绍了可以展开的带标题控件ExpansionTile的用法，在文章的最后还是按照惯例给大家留下了一个问题。 实现如下效果： ?...可以看到界面整体上是一个listView,在ListView的第二例是一个ExpansionTile，ExpansionTile的内部是多个ListTile，trailing结合自定义动画将“+”icon...旋转22.5°变成了一个“×”，并且在ExpansionTile展开时改变了icon的颜色。...就是包含多个可展开面板的列表啰。...那么它又和前面讲过的ExpansionTile有什么区别，其实长得还是挺想的但是ExpansionPanelList在展开和关闭的时候是有动画的，比较不那么突兀。
，用于保存滑动过程中的状态； 2....递归 有的条目有子条目，有的没有，通过递归的方式遍历出每条数据； 通过 bean.children.isEmpty 来结束递归； 如 “直辖市”中的北京，下面没有 “市”了，也就是children.isEmpty...源码 学习flutter，很多不了解的地方都可以试着看看对应源码上面的注释。...extends StatefulWidget { 上面一段是 ExpansionTile 的源码注释。...粗略一看会发现几个熟悉的字眼：ListView，ListTile 不错，实现层级菜单的效果，需要搭配使用ListView与ListTile， 上面贴的关键代码中 _buildItem（）方法恰恰符合这一点
color, ), deleteIconColor: color, deleteButtonTooltipMessage: "删除该条", ); } } 在今天的文章中我们来看下...ExpansionTile的使用。...ExpansionTile ---- ExpansionTile是什么东西？其实就是一个有标题可以展开的控件而已，其他就跟其他的layout没有很大的差别了。...')), body: ListView(children: [ ExpansionTile(title: const Text('更多精彩'), children...')), body: ListView(children: [ ExpansionTile( title: const Text
和尚继续整理 Flutter 中日常用到的小知识点。 1....在键盘右下角会有不同的按钮样式。例如搜索页面在输入完成搜索信息后展示搜索的按钮更便捷。此时需要考虑 TextInputAction 属性，可自定义展示内容。...Flutter 提供了13种状态，但需注意的是有些是区分 Android 和 iOS 的，使用时需加注意。 ?...ExpansionTile 扩展Tile 和尚在学习过程中尝试了一下 ExpansionTile，是一个可向下扩展空间的 Widget，如效果图。...Spacer 创建一个可调节的空间隔，可用于调整 Flex 容器（如行或列）中窗口小部件之间的间距；默认 flex: 1。 ?
说Flutter是最流行的框架呢，是没有任何问题的，但它并不是一个最近才出现的开发框架。...2018.12 - Flutter1.0发布，它的发布将大家对Flutter的学习和研究推到了一个新的起点 2019.2 - Flutter1.2发布主要增加对web的支持 由此开看：Flutter在逐渐的走向成熟和壮大...，工具问题，版本问题 Flutter入门：快速上手Flutter开发 Dart基础知识 什么是声明式UI Flutter入门基础知识 项目结构、资源、依赖和本地化 认识视图(Views) 布局与列表 状态管理...JSON解析与复杂模型转换实用技巧 基于shared_preferences的本地存储操作 Flutter进阶提升：玩转列表组件 基于ListView实现水平和垂直方式滚动的列表 基于ExpansionTile...实现可展开的列表 基于GridView实现网格列表 高级功能列表下拉刷新与上拉加载更多功能实现 Flutter进阶提升：Flutter，Native混合开发 Flutter混合开发流程与创建Flutter
零、前言 FlutterUnit是【张风捷特烈】长期维护的一个Flutter集录、指南的开源App 如果你还未食用,可参见总汇集: 【 FlutterUnit 食用指南】 开源篇 欢迎 Star...---- Flutter Unit 解牛篇 将对项目的一些实现点进行剖析。 很多朋友问我，你代码折叠面板怎么做的?ExpansionTile展开的线去不掉吧?...Flutter Unit基本就是根据这种方法实现的代码面板折叠。 - - ? ?...---- 二、魔改ExpansionTile实现方案 上周六晚8:30在B站直播了ExpansionTile源码的解析。 只要看懂源码，其实魔改一下也是so easy 的。...null : Column(children: widget.children), ); } } 复制代码 ---- 在直播中说了ExpansionTile的核心实现是通过ClipRect
Flutter Unit 解牛篇 将对项目的一些实现点进行剖析。 很多朋友问我，你代码折叠面板怎么做的?ExpansionTile展开的线去不掉吧?...确实ExpansionTile展开上下会有线，非常难看，所以我未使用ExpansionTile方案 折叠效果的核心代码在源码的: components/project/widget_node_panel.dart...详见文章: toggle_rotate Flutter Unit基本就是根据这种方法实现的代码面板折叠。...二、魔改ExpansionTile实现方案 上周六晚8:30在B站直播了ExpansionTile源码的解析。 只要看懂源码，其实魔改一下也是so easy 的。...null : Column(children: widget.children), ); } } 复制代码 在直播中说了ExpansionTile的核心实现是通过ClipRect和Align
Flutter将UI组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。...Dart能成为Flutter不可或缺的一部分，根本原因还是因为其具有以下特性： 1）Dart是AOT（Ahead Of Time）编译的，编译成快速、可预测的本地代码，使Flutter几乎都可以使用Dart...最后，平台重新绘制真实的 DOM 到画布中。 React Native 是移动开发的一大进步，并且是 Flutter 的灵感来源，但 Flutter 更进一步。...在 Flutter 中，UI 组件和渲染器已经从平台中集成到用户的应用程序中。没有系统 UI 组件可以操作，所以原来虚拟控件树的地方现在是真实的控件树。...基于ListView实现水平和垂直方式滚动的列表 基于ExpansionTile实现可展开的列表 基于GridView实现网格列表 高级功能列表下拉刷新与上拉加载更多功能实现 Flutter进阶提升
参阅书籍： 《Flutter跨平台开发入门与实践》-- 向治洪（著） 6. 高级组件 6.1 可滚动组件 对于列表和长布局的显示溢出问题，可以使用Flutter提供的可滚动组件来处理。...6.1.1 Scrollable组件 在Flutter中，一个可滚动的组件直接或间接包含一个Scrollable组件，它是可滚动组件的基础组件。...目前，可滚动组件中的大部分组件都支持基于Sliver的延迟构建模型，如ListView、GridView。...在实际使用过程中，Flutter提供了SliverList、SliverGrid等可滚动组件的Sliver版本。...：视图窗口内部长度，大小等于屏幕显示的列表长度； extentAfter：列表中未滑入视图窗口部分的长度； atEdge：是否滚动到了可滚动组件的边界。
ScrollView在Flutter中等价于什么？ 谁是Flutter的列表组件？ 如何知道点击了列表中哪个item？ 如何动态更新ListView？...，可参考区贡献的媒体文章Flutter For Android Developers : How to design LinearLayout in Flutter?。...在Flutter中，最简单的方法是使用ListView。但在Flutter中，一个ListView既是一个ScrollView，也是一个Android ListView。...； 在 RN 中，通常用 FlatList 或 SectionList 来展示一个列表； 在 Flutter 中，你可以用 ListView 来达到相似的实现： import 'package:flutter...中，您可以创建一个适配器，然后您可以将它传递给ListView，该适配器将使用适配器返回的内容来展示每一行，从上面代码中不难看出，在Flutter中没有adapter的等价物，我们唯一要做的就是控制这个
GridView 将多个widget放在一个可滑动的表格中。 ListView 将多个widget放在一个可滑动的列表中。 Stack 在一个widget上面盖上另一个widget。...GridView 用GridView来将widget放入一个2维的列表中。 GridView提供了2个预装配好的列表，也可以自己建立自定义列表。 GridView支持滚动。...ListView 小结 把子视图装进列表中 水平或竖直都可以 支持滑动 相比于Column，可选配置比较少，但更易用并且支持滑动 和Android中的ListView差别不大 示例1 把ListTile...默认情况下，Card把自己的尺寸缩小为0像素。可以用SizedBox来指定card的尺寸。 Flutter中的Card有圆角和阴影效果。修改elevation可改变阴影效果。...ListTile 来自Material组件库的横向组件。可自定义3行文字及其可选的头尾图标。 此控件常与Card或ListView一起用。
本篇主要帮助剖析理解 Flutter 里的列表和滑动的组成，用比较通俗易懂的方式，从常见的 ListView 到 NestedScrollView 的内部实现，帮助你更好理解和运用 Flutter 里的滑动列表...Flutter 滑动列表 在 Flutter 里我们常见的滑动列表场景，简单地说其实是由三部分组成： Viewport ： 它是一个 MultiChildRenderObjectWidget 的控件...RenderSliver 我们都知道 Flutter 中的整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样的过程，而 Flutter 里的布局和绘制逻辑都在...SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 的高度； 使用 SliverOverlapInjector 将这个高度配置到 body 列表中，让列表知道顶部存在一个固定高度的区域...好了，本篇关于 Flutter 滑动列表的实现原理就介绍完了，如果你还有什么想说的，欢迎留言讨论。
---- SingleChildScrollView（可滑动 View） SingleChildScrollView 类似 Android 中的 scrollview ，且同样的只可包含有一个子元素...如果设置为 0.0，表示关闭预加载 children：列表项集合 semanticChildCount：提供语义信息的孩子的数量 item 数量固定的 listview 示例 listview 构造方法中的参数...这种方式只适合实现少量且数量固定的列表展示需求 import 'package:flutter/material.dart'; /** * @des Listview Widget * @author...ListView.builder 当 listview 的列表项较多或数量未知时，就需要使用 ListView.builder 来构建列表了 import 'package:flutter/material.dart...ListView.separated 当 listview 的 item 间需要分割线时，我们就需要用到 ListView.separated import 'package:flutter/material.dart
在此之前我们还是要说说 Flutter 的包管理方式，因为这是开发中必不可少的绕不开的一部分。...简单来说（翻译一下），通常在可滚动列表的容器中子项都会被装在重绘边界之内，以便列表在滚动时不需要将它们进行重绘。...在默认情况下，如果列表子元素不足以超出可视范围则不会产生可滚动行为。如超出可视范围则到达列表尽头时会停留并有水波样式出现。...源码中说到 ListView 有4中设置子元素的方式： List ListView.builder ListView.separated ListView.custom 第一种 List...其中的难点还是在于 ListView.custom 的实现上，他需要你自己去实现列表相关的所有东西：监听滚动、渲染子元素的方式、销毁子元素等等。
这样的需求，在iOS中是用UITableView实现的；而在Flutter中，实现这种需求的则是列表控件ListView。...ListView 在Flutter中，ListView可以沿一个方向（垂直或者水平方向）来排列其所有子Widget，因此常被用于需要展示一组连续视图元素的场景，比如通讯录、优惠券、商家列表等。...我定义了一个拥有100个列表元素的ListView，在列表项的创建方法中，分别将index的值设置为ListTile的标题与子标题。...在CustomScrollView中，这些彼此独立的、可滚动的Widget被称为Sliver。...总结 在处理展示一组连续、可滚动的视图元素的场景中，Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。
本篇主要帮助剖析理解 Flutter 里的列表和滑动的组成，用比较通俗易懂的方式，从常见的 ListView到 NestedScrollView 的内部实现，帮助你更好理解和运用 Flutter 里的滑动列表...Flutter 滑动列表 在 Flutter 里我们常见的滑动列表场景，简单地说其实是由三部分组成： Viewport ：它是一个 MultiChildRenderObjectWidget 的控件 ，「...，所以一般在 「Flutter 里要实现不同的滑动列表，就是通过自定义和组合不同的 Sliver 来完成布局」。...RenderSliver 我们都知道 Flutter 中的整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样的过程，而 「Flutter 里的布局和绘制逻辑都在... SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 的高度； 使用 SliverOverlapInjector 将这个高度配置到 body 列表中，让列表知道顶部存在一个固定高度的区域
为此，Flutter提供了多种可滚动组件（Scrollable Widget）用于显示列表和长布局。...我们先介绍一下常用的可滚动组件（如ListView、GridView等） SingleChildScrollView SingleChildScrollView类似于Android中的ScrollView...List children = const [], }) 上面参数分为两组：第一组是可滚动组件的公共参数，本章第一节中已经介绍过，不再赘述；第二组是ListView...可滚动组件的Sliver版 但是在CustomScrollView中，需要粘起来的可滚动组件就是CustomScrollView的Sliver了，如果直接将ListView、GridView作为CustomScrollView...因此，为了能让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。
Flutter可滑动组件 1. ListView 1.1 ListView介绍 移动端数据量比较大时，一般都是通过列表来进行展示的，比如商品数据、聊天列表、通信录、朋友圈等。...在Flutter中，我们也有对应的列表Widget，就是ListView。 注意：在Flutter里面想要实现滑动效果，都需要在组件外部包裹滚动的视图。...Viewport：显示的视窗，即列表的可视区域； Sliver：视窗里显示的元素 前面介绍的 ListView、GridView都是一个完整的可滚动组件。...如果我们想要在一个页面中，同时包含多个可滚动组件，且使它们的滑动效果能统一起来，比如一个滑动的视图中包括一个列表视图（ListView），一个网格视图（GridView），且让他们的滑动效果统一。...3.2 Flutter 中常用的 Sliver Sliver名称 功能 对应的可滚动组件 SliverList 列表 ListView SliverFixedExtentList 高度固定的列表 指定itemExtent
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
