Flutter如何实现多section列表

在Flutter中如何实现一个包含多个section的列表？比如每个section有不同的标题和数据，类似于iOS中的UITableView。有没有推荐的插件或者最佳实践？谢谢！

2 回复

Flutter中实现多section列表，推荐使用ListView.builder结合IndexedWidgetBuilder。通过判断index位置，动态返回不同section的header和item。也可使用第三方库如flutter_sticky_header简化实现。

更多关于Flutter如何实现多section列表的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现多section列表，主要有以下几种方式：

1. ListView.builder + 条件判断

ListView.builder(
  itemCount: _getTotalItemCount(),
  itemBuilder: (context, index) {
    if (_isSectionHeader(index)) {
      return _buildSectionHeader(_getSectionIndex(index));
    } else {
      return _buildListItem(_getItemIndex(index));
    }
  },
)

2. 使用ListView.separated（适合简单场景）

ListView.separated(
  itemCount: sections.length,
  itemBuilder: (context, sectionIndex) {
    return Column(
      children: [
        _buildSectionHeader(sectionIndex),
        ..._buildSectionItems(sectionIndex),
      ],
    );
  },
  separatorBuilder: (context, index) => Divider(),
)

3. 推荐方案：使用CustomScrollView + SliverList

CustomScrollView(
  slivers: [
    for (int i = 0; i < sections.length; i++)
      SliverList(
        delegate: SliverChildListDelegate([
          _buildSectionHeader(i),
          ..._buildSectionItems(i),
        ]),
      ),
  ],
)

4. 使用第三方库

安装 sticky_headers 包：

dependencies:
  sticky_headers: ^2.0.0

使用示例：

StickyHeader(
  header: Container(
    height: 50,
    color: Colors.grey[300],
    child: Text('Section Header'),
  ),
  content: ListView.builder(
    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true,
    itemCount: items.length,
    itemBuilder: (context, index) => ListTile(
      title: Text('Item $index'),
    ),
  ),
)

完整示例代码

class SectionedListView extends StatelessWidget {
  final List<Section> sections;
  
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: sections.map((section) {
        return SliverList(
          delegate: SliverChildListDelegate([
            Container(
              padding: EdgeInsets.all(16),
              color: Colors.grey[200],
              child: Text(
                section.title,
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            ...section.items.map((item) => ListTile(
              title: Text(item),
            )).toList(),
          ]),
        );
      }).toList(),
    );
  }
}

推荐使用 CustomScrollView + SliverList 方案，性能最佳且灵活性高。

回到顶部