Flutter分段列表视图插件rf_section_listview的使用

Flutter分段列表视图插件rf_section_listview的使用

rf_section_listview 是一个用于 Flutter 的分段列表视图插件，仿照 iOS 的 group tableview。它允许开发者轻松实现带有分组的列表视图，并且支持自定义组头、组尾和单元格样式。

使用说明

以下是一个完整的示例代码，展示如何使用 rf_section_listview 插件来创建一个带有分组的列表视图。

示例代码

import 'package:flutter/material.dart';
import 'package:rf_section_listview/rf_section_listview.dart';

// 定义分组数据模型
class PersonGroup {
  final String groupName;
  final List<Person> persons;

  PersonGroup(this.groupName, this.persons);
}

// 定义人员数据模型
class Person {
  final String name;
  final double height;

  Person(this.name, this.height);
}

// 示例数据
List<PersonGroup> personGroups = [
  PersonGroup(
    "Group A",
    [
      Person("Alice", 165.0),
      Person("Bob", 175.0),
      Person("Charlie", 180.0),
    ],
  ),
  PersonGroup(
    "Group B",
    [
      Person("David", 170.0),
      Person("Eve", 160.0),
      Person("Frank", 185.0),
    ],
  ),
];

// 状态管理类
class _MyHomePageState extends State<MyHomePage> {
  ScrollController? controller;

  // 返回分组数量
  int _numberOfSection() {
    return personGroups.length;
  }

  // 返回每组的行数
  int _numberOfRowInSection(int section) {
    return personGroups[section].persons.length;
  }

  // 构建每个单元格
  Widget _cellForRowAtIndexPathBuilder(BuildContext context, IndexPath indexPath) {
    final person = personGroups[indexPath.section].persons[indexPath.row];
    return GestureDetector(
      onTap: () {
        _onClickCellItem(indexPath);
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(person.name), // 显示姓名
            Text('${person.height}'), // 显示身高
          ],
        ),
      ),
    );
  }

  // 构建组头
  Widget _sectionHeaderBuilder(BuildContext context, int section) {
    final personGroup = personGroups[section];
    return Text('${personGroup.groupName} header'); // 显示组头
  }

  // 构建组尾
  Widget _sectionFooterBuilder(BuildContext context, int section) {
    final personGroup = personGroups[section];
    return Text('${personGroup.groupName} footer'); // 显示组尾
  }

  // 点击单元格事件
  void _onClickCellItem(IndexPath indexPath) {
    print('点击了 第${indexPath.section}组, 第${indexPath.row}行');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('rf_section_listview demo'), // 设置标题
      ),
      body: SectionListView(
        numberOfSection: _numberOfSection, // 分组数量
        numberOfRowInSection: _numberOfRowInSection, // 每组行数
        cellForRowAtIndexPathBuilder: _cellForRowAtIndexPathBuilder, // 单元格构建器
        sectionHeaderBuilder: _sectionHeaderBuilder, // 组头构建器（可选）
        sectionFooterBuilder: _sectionFooterBuilder, // 组尾构建器（可选）
        controller: controller, // 滚动控制器（可选）
      ),
    );
  }
}

// 主页面
class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}