如何在Flutter中创建如图所示的ListView布局

从图中可以看出这是带分组标题、左侧图标+文字、右侧跳转箭头的列表布局，下面直接给你实现步骤和完整代码：

1. 定义数据结构 #

先把分组和列表项的数据结构化，方便后续渲染：

// 分组数据模型
class GroupItem {
  final String title;
  final List<MenuItem> items;

  GroupItem({required this.title, required this.items});
}

// 列表项数据模型
class MenuItem {
  final IconData icon;
  final String title;

  MenuItem({required this.icon, required this.title});
}

// 模拟数据源
final List<GroupItem> groupData = [
  GroupItem(
    title: "第一组",
    items: [
      MenuItem(icon: Icons.person, title: "个人信息"),
      MenuItem(icon: Icons.settings, title: "设置"),
    ],
  ),
  GroupItem(
    title: "第二组",
    items: [
      MenuItem(icon: Icons.notifications, title: "消息通知"),
      MenuItem(icon: Icons.help, title: "帮助中心"),
    ],
  ),
];

2. 实现单个列表项Widget #

每个列表项是左侧图标、中间文字、右侧箭头的Row布局：

class CustomListItem extends StatelessWidget {
  final MenuItem item;

  const CustomListItem({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Row(
        children: [
          // 左侧图标
          Icon(item.icon, size: 24, color: Colors.grey[700]),
          const SizedBox(width: 16),
          // 中间文字
          Expanded(
            child: Text(
              item.title,
              style: const TextStyle(fontSize: 16),
            ),
          ),
          // 右侧箭头
          Icon(Icons.arrow_forward_ios, size: 16, color: Colors.grey[500]),
        ],
      ),
    );
  }
}

3. 实现分组标题Widget #

给每个分组添加带背景的标题：

class GroupTitle extends StatelessWidget {
  final String title;

  const GroupTitle({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      color: Colors.grey[100],
      child: Text(
        title,
        style: TextStyle(fontSize: 14, color: Colors.grey[600]),
      ),
    );
  }
}

4. 组装完整的ListView布局 #

用ListView遍历所有分组，依次渲染标题和列表项：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("分组列表")),
      body: ListView(
        children: [
          // 遍历所有分组，依次渲染标题和子项
          for (var group in groupData) ...[
            GroupTitle(title: group.title),
            ...group.items.map((item) => CustomListItem(item: item)),
          ]
        ],
      ),
    );
  }
}

样式调整说明 #

• 如果需要给列表项添加分割线，可以在CustomListItem底部添加Divider组件；
• 图标颜色、文字大小、背景色都可以根据需求修改；
• 点击事件可以给CustomListItem包裹InkWell或GestureDetector实现跳转逻辑。

内容的提问来源于stack exchange，提问作者Ahmed Iqbal teli