[移动开发]Flutter--分组列表实现思路

代码

import 'package:flutter/material.dart';

class TableView extends StatelessWidget {

  final Widget Function(BuildContext context, int section) buildHeader;
  final Widget Function(BuildContext context, int section) buildFooter;
  final Widget Function(BuildContext context, int section, int row) buildItem;

  final int number;
  final int Function(int section) itemCount;
  final Widget Function(BuildContext context, int section) sectionSpacer;
  final Widget Function(BuildContext context, int row) itemSpacer;
  final EdgeInsetsGeometry padding;

  const TableView({
    @required this.buildItem,
    @required this.itemCount,
    @required this.number,
    this.buildHeader,
    this.buildFooter,
    this.sectionSpacer,
    this.itemSpacer,
    this.padding
  });


  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: padding,
      itemBuilder: (context, section) {
        ListView itemsView = ListView.separated(
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (context, row) => buildItem(context, section, row),
          separatorBuilder: itemSpacer ?? (context, row) => SizedBox(width: 0, height: 0,),
          itemCount: itemCount(section),
          shrinkWrap: true,
        );
        return Column(
          children: [
            if (buildHeader != null) buildHeader(context, section),
            itemsView,
            if (buildFooter != null) buildFooter(context, section),
          ],
          mainAxisSize: MainAxisSize.min,
        );
      },
      itemCount: number,
      separatorBuilder: sectionSpacer ?? (context, section) => SizedBox(width: 0, height: 0,),
    );
  }

}

使用

  @override
  Widget build(BuildContext context) {
    return TableView(
        buildItem: (BuildContext context, int section, int row) {
          Color color = Colors.white;
          if (section == 0) color = Colors.red;
          if (section == 1) color = Colors.blue;
          return Container(child: Row(children: [Text('row: $row')],), color: color,);
        },
        itemCount: (int section) {
          if (section == 0) return 1;
          if (section == 1) return 2;
          return 3;
        },
        number: 3,
        buildHeader: (context, section) => Text("HeaderView: $section"),
        buildFooter: (context, section) => Text("FooterView: $section"),
        sectionSpacer: (context, section) => SizedBox(height: 20,),
        itemSpacer: (context, row) => SizedBox(height: 2,),
    );
  }