Flutter如何使用ListView.builder实现标题列表渲染展示

使用ListView.builder实现纯标题构成的事项列表是Flutter中长列表场景的标准实现方式，该组件采用懒加载机制，仅渲染屏幕可视区域内的列表项，大数量场景下性能表现远优于直接传入全部children的普通ListView写法。

以下是可直接运行的完整实现代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '事项列表',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const TodoListPage(),
    );
  }
}

class TodoListPage extends StatelessWidget {
  const TodoListPage({super.key});

  // 事项标题数据源，可替换为接口返回、本地存储读取的真实数据
  final List<String> todoTitleList = const [
    "完成Flutter基础组件学习",
    "编写列表页面初始版本",
    "调试列表滚动流畅度",
    "适配多尺寸屏幕下的列表显示",
    "添加列表项点击交互",
    "实现下拉刷新、上拉加载更多逻辑",
    "补充列表空状态兜底提示",
    "打包安卓测试包验证功能",
    "提交代码到版本管理仓库",
    "编写对应功能的开发文档"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("事项列表")),
      body: ListView.builder(
        padding: const EdgeInsets.symmetric(vertical: 8),
        // 传入列表总长度，绑定数据源数量
        itemCount: todoTitleList.length,
        // 列表项构建回调，滚动到对应索引位置时才会触发构建
        itemBuilder: (context, index) {
          final String itemTitle = todoTitleList[index];
          return ListTile(
            leading: CircleAvatar(child: Text("${index + 1}")),
            title: Text(itemTitle),
            onTap: () {
              // 可自定义点击逻辑，比如跳转详情页、弹操作菜单等
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text("当前选中：$itemTitle"), duration: const Duration(seconds: 1),)
              );
            },
          );
        },
      ),
    );
  }
}

关键参数说明 #

• itemCount：必传参数，声明列表的总项数，不传时组件默认按无限长列表处理
• itemBuilder：必传回调，返回对应索引位置的列表项组件，懒加载的核心逻辑就在这个回调里实现
• 如果需要给列表加分割线，可以替换为ListView.separated组件，额外传入separatorBuilder参数返回分割线组件即可，比如传入const Divider(height: 1, indent: 16)就能实现常见的左侧留边1px细分割线效果
• 如果数据源是异步获取的（比如接口请求、读数据库），将页面改为StatefulWidget，数据更新时调用setState刷新数据源列表，组件会自动同步渲染最新内容

内容的提问来源于stack exchange，提问作者احمد محمد النور احمد