Flutter开发中如何设计ListView的自定义布局

你可以通过 ListView.separated 组件实现对应设计的列表布局，核心是将分组头部和列表子项整合为同一数据源，遍历渲染即可，具体实现逻辑如下： #

实现步骤 #

• 先定义通用列表项类型，区分分组头部和普通子项两类元素，方便后续统一处理数据源
• 配置 ListView.separated 的 itemBuilder 方法，根据当前遍历的元素类型，渲染对应的头部或子项布局
• 子项内部按照设计的视觉要求，嵌套 Row/Column 组件排布图片、文本、操作按钮等元素即可

示例代码 #

import 'package:flutter/material.dart';

// 定义列表项类型枚举
enum ListItemType { sectionHeader, item }

// 列表项数据模型
class CustomListItem {
  final ListItemType type;
  final String? sectionTitle;
  final String? itemTitle;
  final String? itemSubtitle;
  final String? itemIcon;

  CustomListItem({
    required this.type,
    this.sectionTitle,
    this.itemTitle,
    this.itemSubtitle,
    this.itemIcon,
  });
}

class DesignListViewPage extends StatelessWidget {
  // 构造测试数据源，对应你的设计数据填充即可
  final List<CustomListItem> dataSource = [
    CustomListItem(type: ListItemType.sectionHeader, sectionTitle: "分组1"),
    CustomListItem(
      type: ListItemType.item,
      itemTitle: "子项标题1",
      itemSubtitle: "子项描述1",
      itemIcon: "assets/icon1.png",
    ),
    CustomListItem(
      type: ListItemType.item,
      itemTitle: "子项标题2",
      itemSubtitle: "子项描述2",
      itemIcon: "assets/icon2.png",
    ),
    CustomListItem(type: ListItemType.sectionHeader, sectionTitle: "分组2"),
    CustomListItem(
      type: ListItemType.item,
      itemTitle: "子项标题3",
      itemSubtitle: "子项描述3",
      itemIcon: "assets/icon3.png",
    ),
  ];

  DesignListViewPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.separated(
        padding: const EdgeInsets.all(16),
        itemCount: dataSource.length,
        // 分隔线配置，根据设计调整即可
        separatorBuilder: (context, index) => const SizedBox(height: 12),
        itemBuilder: (context, index) {
          final item = dataSource[index];
          // 渲染分组头部
          if (item.type == ListItemType.sectionHeader) {
            return Text(
              item.sectionTitle ?? "",
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            );
          }
          // 渲染普通子项，内部布局按你的设计调整即可
          return Container(
            padding: const EdgeInsets.all(12),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              boxShadow: const [
                BoxShadow(color: Colors.black12, blurRadius: 2, offset: Offset(0, 1))
              ]
            ),
            child: Row(
              children: [
                // 左侧图标
                Image.asset(item.itemIcon ?? "", width: 40, height: 40),
                const SizedBox(width: 12),
                // 中间文本区域
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(item.itemTitle ?? "", style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
                      const SizedBox(height: 4),
                      Text(item.itemSubtitle ?? "", style: const TextStyle(fontSize: 14, color: Colors.grey)),
                    ],
                  ),
                ),
                // 右侧操作按钮
                const Icon(Icons.arrow_forward_ios, size: 16, color: Colors.grey),
              ],
            ),
          );
        },
      ),
    );
  }
}

如果你的设计里有吸顶的分组头部需求，替换为 flutter_sticky_header 三方库实现即可，布局逻辑和上面的实现保持一致。

内容的提问来源于stack exchange，提问作者Geetika Sachdeva