示例工程移动开发【免费下载链接】flutter-examples[Examples] Simple basic isolated apps, for budding flutter devs.项目地址https://gitcode.com/gh_mirrors/fl/flutter-examples点击查看免费下载导读本文以 flutter-examples 仓库中的 infinite_list 独立示例应用为核心系统讲解在 Flutter 中实现无限列表Infinite List的完整思路借助ListView.builder的按需构建懒加载特性配合数据源的动态追加即可在保持流畅滚动性能的前提下呈现永远加载不完的长列表。读完本文你将掌握惰性列表构建的核心原理、交替行布局的索引换算技巧以及基于状态管理的收藏交互并可直接复用 infinite_list 的工程骨架应用到自己的项目中。一、示例项目定位与核心思想infinite_list是 flutter-examples 仓库中一个聚焦单一功能的独立示例应用其 README 开篇即点明项目目标Example app showing implementation of an infinite list展示无限列表实现的示例应用。所谓无限列表指的是列表内容在用户持续滚动时不断增长、看似没有终点的交互形态典型场景包括信息流、聊天记录、日志流、随机内容生成器等。在 Flutter 中实现无限列表并不需要复杂的分页库核心思想只有两条按需构建列表控件只渲染当前视口内可见的条目而非一次性构建全部数据数据按需追加当滚动接近末尾时为数据源补充新数据驱动列表继续增长。这两条核心思想在本示例中体现得极为纯粹——整个业务逻辑全部集中在单个文件 infinite_list/lib/main.dart 中没有任何第三方状态管理依赖非常适合初学者精读。二、工程骨架与依赖配置在深入代码之前先看工程的依赖与构建配置这决定了示例的运行前提。2.1 依赖声明pubspec.yamlinfinite_list/pubspec.yaml 是本示例的依赖清单关键内容如下name: infinite_list description: An infinite list using flutter environment: sdk: 2.12.0 3.0.0 dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.0 english_words: ^3.1.0需要特别说明两点english_words: ^3.1.0是本示例唯一的功能性第三方依赖。它提供了generateWordPairs()等 API用于生成随机的英文单词组合WordPair充当无限列表的数据来源。^3.1.0 表示允许解析 3.1.0 及以上、但小于 4.0.0 的版本。Dart SDK 约束2.12.0 3.0.0表明该工程建立在空安全Null Safety时代的版本区间之上代码采用空安全友好的写法如使用final初始化容器、未对可变状态使用late声明。工程未引入任何列表分页、无限滚动类第三方库无限列表效果完全由 Flutter 框架内置能力实现这正是该示例的教学价值所在。2.2 Android 端构建配置app/build.gradleinfinite_list/android/app/build.gradle 中defaultConfig声明的applicationId github.nisrulz.infinitelist遵循了本仓库所有示例统一的包名规范github.nisrulz.app_name同时minSdkVersion 16、targetSdkVersion 29、compileSdkVersion 29给出了本示例当前的 Android 最低/目标系统要求。若要在自己的机器上复现请确保本机 Flutter SDK 版本能匹配该工程年代对应的构建链路。2.3 获取依赖与运行在 infinite_list 目录下依次执行# 1. 拉取 pubspec.yaml 中声明的依赖 flutter packages get # 2. 连接设备或模拟器后运行 flutter run仓库根目录还提供了批量脚本 get_packages.sh它会遍历所有含pubspec.yaml的子目录并逐个执行flutter packages get适合一次性为整个仓库的示例工程拉取依赖。三、核心实现剖析ListView.builder 的懒加载机制无限列表的灵魂在 infinite_list/lib/main.dart 的_buildSuggestions()方法中。先看状态类的数据结构main.dartclass RandomWordsState extends StateRandomWords { final _suggestions WordPair[]; final _saved SetWordPair(); final _biggerFont const TextStyle(fontSize: 18.0); ... }_suggestions已生成的 WordPair 数据源列表它是整个无限列表的弹药库_saved收藏集合用于记录用户点击心形图标的条目_biggerFont列表项文字样式。3.1 按需构建的入口ListView.builderWidget _buildSuggestions() { return ListView.builder( padding: const EdgeInsets.all(16.0), itemBuilder: (context, i) { // ... }); }与ListView(children: [...])一次性构建所有子项不同ListView.builder采用惰性构建策略itemBuilder回调只会在列表需要渲染某个索引对应的条目时才会被调用因此无论数据源增长到多大内存中始终只保留视口附近可见的 widget。这是 Flutter 官方推荐的性能最佳实践也是本示例能在无限增长数据的同时保持流畅的根本原因。3.2 交替行布局索引换算技巧itemBuilder的索引i同时涵盖了列表项和分隔线两类内容源码通过奇偶判断实现交替布局main.dartitemBuilder: (context, i) { // 奇数索引渲染一条 1 像素高的分隔线 if (i.isOdd) return Divider(); // i ~/ 2 整除 21, 2, 3, 4, 5 变为 0, 1, 1, 2, 2 // 即换算回真实的数据条目索引剔除分隔线占用的索引位 final index i ~/ 2; // 如果已到达当前数据源的末尾... if (index _suggestions.length) { // ...则一次性追加 10 条新数据 _suggestions.addAll(generateWordPairs().take(10)); } return _buildRow(_suggestions[index]); });这段代码包含两个值得反复品味的细节i.isOdd返回Divider()让每条单词对之间自动出现分隔线视觉上层次分明且避免了额外维护一个数据分隔线混合列表的成本。i ~/ 2整除运算由于每两条数据行之间夹着一条分隔线外部索引i与数据索引index满足index i ~/ 2。例如外部索引 0、2、4 分别对应数据索引 0、1、2。源码注释main.dart对此有清晰说明。3.3 数据追加无限增长的引擎触发无限的关键判断是if (index _suggestions.length) { _suggestions.addAll(generateWordPairs().take(10)); }其执行语义是当ListView.builder滚动到当前已生成数据的末尾、需要渲染下一条尚未存在的数据时立即调用english_words包提供的generateWordPairs()生成器通过.take(10)截取 10 个新的 WordPair 追加到_suggestions中。由于每次触底都会补充 10 条列表便获得了持续滚动的燃料从而表现为无限列表。注意这里并未调用setState——这是因为追加发生在itemBuilder同步构建流程内部追加后立即使用_suggestions[index]取出数据渲染数据源与渲染处于同一帧无需触发重建。从源码结构可以推断这里的每次 10 条是一个刻意选择的较小批量既保证触底追加的粒度足够细腻又避免一次性生成过多数据浪费内存是典型的懒加载数据供给节奏。四、列表项交互收藏与状态切换无限列表的每一行由_buildRow()渲染main.dartWidget _buildRow(WordPair pair) { final alreadySaved _saved.contains(pair); return ListTile( title: Text( pair.asPascalCase, style: _biggerFont, ), trailing: Icon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Colors.red : null, ), onTap: () { setState(() { if (alreadySaved) { _saved.remove(pair); } else { _saved.add(pair); } }); }, ); }数据展示pair.asPascalCase将随机生成的英文单词对转换为 PascalCase 格式如 pineappleJuice并以 18 号字体呈现收藏切换trailing图标根据_saved集合是否包含当前条目在实心红色心形Icons.favorite与空心灰色心形Icons.favorite_border之间切换状态管理点击行调用setState增删_saved触发 UI 刷新。这里的SetWordPair之所以能高效完成包含判断是因为WordPair类型提供了基于内容而非引用的相等性比较。五、收藏列表页Navigator 路由跳转AppBar 右侧的IconButton图标为Icons.list绑定_pushSaved()main.dart点击后通过Navigator.push与MaterialPageRoute跳转到一个独立的收藏页void _pushSaved() { Navigator.of(context).push( MaterialPageRoute( builder: (context) { final tiles _saved.map( (pair) ListTile( title: Text(pair.asPascalCase, style: _biggerFont), ), ); final divided ListTile.divideTiles( context: context, tiles: tiles, ).toList(); return Scaffold( appBar: AppBar(title: Text(Saved lists)), body: ListView(children: divided), ); }, ), ); }收藏页的构建同样体现了良好的工程习惯使用_saved.map(...)将收藏集合映射为ListTile列表并用ListTile.divideTiles()在相邻条目间自动插入分隔线该页面数据规模受用户主动收藏行为约束、通常较小因此这里退化为常规的ListView(children: ...)一次性构建与主列表的懒加载形成按数据规模选择合适的构建策略的对照示范整个导航使用MaterialPageRoute推入新路由保留了平台默认的页面转场动画与返回手势。六、应用入口与主题配置入口 main.dart 保持了一贯的简洁void main() runApp(MyApp()); class MyApp extends StatelessWidget { override Widget build(BuildContext context) { return MaterialApp( title: Infinite List, theme: ThemeData( primaryColor: Colors.blue, accentColor: Colors.lightBlue), home: RandomWords(), ); } }ThemeData定义了以蓝色为主色、浅蓝为强调色的 Material 主题home: RandomWords()直接将有状态组件RandomWords其状态类RandomWordsState承载全部列表逻辑作为首页未引入路由表结构清晰。七、源码证据与延伸学习关注点仓库路径说明无限列表全部业务逻辑infinite_list/lib/main.dartListView.builder懒加载、数据追加、收藏交互、路由跳转依赖声明infinite_list/pubspec.yamlenglish_words提供随机单词对数据源Android 构建配置infinite_list/android/app/build.gradle包名github.nisrulz.infinitelist、SDK 版本要求批量拉取依赖脚本get_packages.sh遍历仓库所有示例工程执行flutter packages get同类列表示例using_listview/lib/main.dart同仓库另一聚焦ListView的独立示例可对照学习延伸建议掌握本示例后可进一步探索 Flutter 列表性能优化的进阶主题——例如itemExtent固定条目高度时的滚动加速、ListView.separated原生分隔线构造器可替代本文的奇偶行技巧、ScrollController监听滚动位置做更精细的分页触发以及GridView.builder在网格布局中的懒加载用法。本示例的按需构建 触底追加范式是理解这些进阶能力的最佳起点。赞分享示例工程移动开发【免费下载链接】flutter-examples[Examples] Simple basic isolated apps, for budding flutter devs.项目地址https://gitcode.com/gh_mirrors/fl/flutter-examples点击查看免费下载相关推荐基于 react-infinite-scroll-component 实现滚动自动加载antd List 无限滚动示例infinite-load深度拆解基于 react infinite scroll component 实现滚动自动加载antd List 无限滚动示例infinite load深度拆解前端UI组件设计系统Ant Design List 无限滚动加载实战结合 react-infinite-scroll-component 实现滚动自动加载列表Ant Design List 无限滚动加载实战结合 react infinite scroll component 实现滚动自动加载列表 导读 本文聚焦 A前端UI组件设计系统Ant Design List 虚拟列表实战基于 rc-component/virtual-list 渲染无限长列表Ant Design List 虚拟列表实战基于 rc component/virtual list 渲染无限长列表 在数据量大、单条行高固定、滚动频繁的列前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考