Flutter列表分段展示插件flutter_section_list的使用

flutter_section_list 是一个支持分段显示的 ListView 和 GridView 插件，类似于 iOS 的分段列表，支持头部固定和交错排列。

Getting Started

Usage

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_section_list: ^1.1.0

然后运行 flutter pub get 来安装依赖。

List

以下是一个使用 SectionListView 的示例：

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

class SectionListDemo extends StatelessWidget with SectionAdapterMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SectionListDemo')),
      body: SectionListView.builder(adapter: this),
    );
  }

  @override
  int numberOfSections() {
    return 10;
  }

  @override
  int numberOfItems(int section) {
    return 15;
  }

  @override
  Widget getItem(BuildContext context, IndexPath indexPath) {
    return ListTile(
      title: Text('Item ${indexPath.section} - ${indexPath.index}'),
    );
  }

  @override
  bool shouldExistSectionHeader(int section) {
    return true;
  }

  @override
  bool shouldSectionHeaderStick(int section) {
    return true;
  }

  @override
  bool shouldExistSectionFooter(int section) {
    return false;
  }

  @override
  Widget getSectionHeader(BuildContext context, int section) {
    return Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(8.0),
      child: Text('Section $section'),
    );
  }

  @override
  Widget getSectionFooter(BuildContext context, int section) {
    return null;
  }
}

Grid

以下是一个使用 SectionGridView 的示例：

import 'package:flutter/material.dart';
import 'package:flutter_section_list/flutter_section_grid.dart';

class SectionGridViewDemo extends StatelessWidget with SectionAdapterMixin, SectionGridAdapterMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SectionGridView"),
      ),
      body: SectionGridView.builder(adapter: this),
    );
  }

  @override
  Widget getItem(BuildContext context, IndexPath indexPath) {
    return Container(
      color: Colors.primaries[indexPath.index % Colors.primaries.length],
      alignment: Alignment.center,
      child: Text('Item ${indexPath.section} - ${indexPath.index}'),
    );
  }

  @override
  int numberOfItems(int section) {
    return 10;
  }

  @override
  int numberOfSections() {
    return 10;
  }

  @override
  double getMainAxisSpacing(int section) {
    return 5;
  }

  @override
  double getCrossAxisSpacing(int section) {
    return 5;
  }

  @override
  EdgeInsets getSectionInsets(int section) {
    return EdgeInsets.fromLTRB(10, 8, 10, 8);
  }

  @override
  bool shouldExistSectionHeader(int section) {
    return true;
  }

  @override
  bool shouldSectionHeaderStick(int section) {
    return true;
  }

  @override
  bool shouldExistSectionFooter(int section) {
    return false;
  }

  @override
  double getFooterItemSpacing(int section) {
    return 5;
  }

  @override
  double getHeaderItemSpacing(int section) {
    return 5;
  }

  @override
  Widget getSectionHeader(BuildContext context, int section) {
    return Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(8.0),
      child: Text('Section $section'),
    );
  }

  @override
  Widget getSectionFooter(BuildContext context, int section) {
    return null;
  }
}

完整示例

以下是一个完整的示例应用，包含 SectionListView 和 SectionGridView 的使用：

import 'package:flutter/material.dart';
import 'package:flutter_section_list/flutter_section_list.dart';
import 'package:flutter_section_list/flutter_section_grid.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterSectionListDemo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: Text('FlutterSectionListDemo'),
    );
    return Scaffold(
      appBar: appBar,
      body: ListView.builder(
        itemBuilder: (context, index) {
          return _getListItem(index, context);
        },
        itemCount: 2,
      ),
    );
  }

  Widget _getListItem(int index, BuildContext context) {
    String title = "";
    switch (index) {
      case 0:
        title = 'SectionListView';
        break;
      case 1:
        title = 'SectionGridView';
        break;
    }

    return Stack(
      children: [
        ListTile(
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute(
              builder: (BuildContext context) {
                if (index == 0) {
                  return SectionListDemo();
                } else {
                  return SectionGridViewDemo();
                }
              },
            ));
          },
          title: Text(title, style: TextStyle(fontSize: 16)),
        ),
        Positioned(
          child: Divider(height: 0.5),
          left: 0,
          right: 0,
          bottom: 0,
        )
      ],
    );
  }
}

class SectionListDemo extends StatelessWidget with SectionAdapterMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SectionListDemo')),
      body: SectionListView.builder(adapter: this),
    );
  }

  @override
  int numberOfSections() {
    return 10;
  }

  @override
  int numberOfItems(int section) {
    return 15;
  }

  @override
  Widget getItem(BuildContext context, IndexPath indexPath) {
    return ListTile(
      title: Text('Item ${indexPath.section} - ${indexPath.index}'),
    );
  }

  @override
  bool shouldExistSectionHeader(int section) {
    return true;
  }

  @override
  bool shouldSectionHeaderStick(int section) {
    return true;
  }

  @override
  bool shouldExistSectionFooter(int section) {
    return false;
  }

  @override
  Widget getSectionHeader(BuildContext context, int section) {
    return Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(8.0),
      child: Text('Section $section'),
    );
  }

  @override
  Widget getSectionFooter(BuildContext context, int section) {
    return null;
  }
}

class SectionGridViewDemo extends StatelessWidget with SectionAdapterMixin, SectionGridAdapterMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SectionGridView"),
      ),
      body: SectionGridView.builder(adapter: this),
    );
  }

  @override
  Widget getItem(BuildContext context, IndexPath indexPath) {
    return Container(
      color: Colors.primaries[indexPath.index % Colors.primaries.length],
      alignment: Alignment.center,
      child: Text('Item ${indexPath.section} - ${indexPath.index}'),
    );
  }

  @override
  int numberOfItems(int section) {
    return 10;
  }

  @override
  int numberOfSections() {
    return 10;
  }

  @override
  double getMainAxisSpacing(int section) {
    return 5;
  }

  @override
  double getCrossAxisSpacing(int section) {
    return 5;
  }

  @override
  EdgeInsets getSectionInsets(int section) {
    return EdgeInsets.fromLTRB(10, 8, 10, 8);
  }

  @override
  bool shouldExistSectionHeader(int section) {
    return true;
  }

  @override
  bool shouldSectionHeaderStick(int section) {
    return true;
  }

  @override
  bool shouldExistSectionFooter(int section) {
    return false;
  }

  @override
  double getFooterItemSpacing(int section) {
    return 5;
  }

  @override
  double getHeaderItemSpacing(int section) {
    return 5;
  }

  @override
  Widget getSectionHeader(BuildContext context, int section) {
    return Container(
      color: Colors.grey[300],
      padding: EdgeInsets.all(8.0),
      child: Text('Section $section'),
    );
  }

  @override
  Widget getSectionFooter(BuildContext context, int section) {
    return null;
  }
}

以上代码展示了如何在 Flutter 中使用 flutter_section_list 插件来创建分段的 ListView 和 GridView。希望这对您有所帮助！