Flutter分组展开折叠插件grouped_expansion_tile的使用

Flutter分组展开折叠插件grouped_expansion_tile的使用

特性

这个小部件用于展示带有展开折叠功能的分组数据。

简单用法

设置 data 和 builder 属性。data 必须是一个扩展了 GroupBase 类的对象。如果你不需要额外的属性，可以直接使用 GroupBase 类。builder 会分配给展开折叠小部件的标题属性。

class Category extends GroupBase {
  String additional;
  Category({
    required this.additional,
    required String uid,
    String? parent,
  }) : super(uid: uid, parent: parent);
}

List<Category> _createList() {
  final topParents = List.generate(10,
      (index) => Category(additional: "auto-generated-$index", uid: "2$index"));

  return [
    Category(additional: "group-1", uid: "1"),
    Category(additional: "group-2", uid: "2"),
    Category(additional: "group-1-1", uid: "3", parent: "1"),
    Category(additional: "group-2-1", uid: "4", parent: "2"),
    Category(additional: "group-3", uid: "5"),
    Category(additional: "group-2-1-1", uid: "6", parent: "4"),
    Category(additional: "group-2-2", uid: "7", parent: "2"),
    Category(additional: "group-2-3", uid: "8", parent: "2"),
    Category(additional: "group-2-1-1-1", uid: "9", parent: "6"),
    Category(additional: "group-2-1-1-2", uid: "10", parent: "6"),
    ...topParents,
  ];
}

final groupedExpansionTile = GroupedExpansionTile<Category>(
  data: _createList(),
  builder: (parent, depth) => Text(parent.self.additional),
);

return Scaffold(
  appBar: AppBar(
    title: const Text("Simplest"),
  ),
  body: groupedExpansionTile,
);

启用拖拽手势

你可以使每个项目都可以被拖动。将 draggable 属性设为 true 以启用拖拽。你可以指定自己的边框来高亮目标小部件，当它接受拖动项时。当目标项接受拖动项时，onAccept 会被调用。你可以在那里编写自己的处理逻辑，例如更新项目列表。

final List<Category> _data = _createList();
GroupedExpansionTile<Category>(
  data: _data,
  builder: (parent, depth) => Text(parent.self.additional),
  childIndent: 50,
  controlAffinity: ListTileControlAffinity.trailing,
  initialBorder: Border.all(color: Colors.orange, width: 1),
  highlightedBorder:
      Border.all(color: Colors.deepPurple.shade800, width: 3),
  initiallyExpanded: false,
  draggable: true,
  onAccept: (source, dest) async {
    setState(() {
      // source 是 _data 中的一个元素
      source.self.parent = dest?.uid;
    });
  },
  onExpansionChanged: (expanded, parent, depth) {
    setState(() {
      parent.self.additional += "@";
    });
  },
  padding: EdgeInsets.zero,
);

已知问题

• 当拖动第三级项目时，顶级项目会接受被拖动的项目，只要拖动位置在小部件内。它应该只在被拖动的位置在已折叠的父区域时接受被拖动的项目。

完整示例Demo

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const GroupedExtensionTileSample(),
    );
  }
}

class Category extends GroupBase {
  String additional;
  Category({
    required this.additional,
    required String uid,
    String? parent,
  }) : super(uid: uid, parent: parent);
}

List<Category> _createList() {
  final topParents = List.generate(10,
      (index) => Category(additional: "auto-generated-$index", uid: "2$index"));

  return [
    Category(additional: "group-1", uid: "1"),
    Category(additional: "group-2", uid: "2"),
    Category(additional: "group-1-1", uid: "3", parent: "1"),
    Category(additional: "group-2-1", uid: "4", parent: "2"),
    Category(additional: "group-3", uid: "5"),
    Category(additional: "group-2-1-1", uid: "6", parent: "4"),
    Category(additional: "group-2-2", uid: "7", parent: "2"),
    Category(additional: "group-2-3", uid: "8", parent: "2"),
    Category(additional: "group-2-1-1-1", uid: "9", parent: "6"),
    Category(additional: "group-2-1-1-2", uid: "10", parent: "6"),
    ...topParents,
  ];
}

Future<void> _showDialog(
  BuildContext context,
  String title,
  String text,
) async {
  final alert = AlertDialog(
    title: Text(title),
    content: Text(text),
    actions: [
      TextButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        child: const Text("OK"),
      ),
    ],
  );
  await showDialog(
    context: context,
    builder: (BuildContext context) => alert,
  );
}

class GroupedExtensionTileSample extends StatelessWidget {
  const GroupedExtensionTileSample({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Grouped Extension Sample"),
        ),
        body: PageView(
          children: [
            _createSimplestSample(),
            const GroupedExtensionTileSample2(),
          ],
        ),
      ),
    );
  }

  Widget _createSimplestSample() {
    final groupedExpansionTile = GroupedExpansionTile<Category>(
      data: _createList(),
      builder: (parent, depth) => Text(parent.self.additional),
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text("Simplest"),
      ),
      body: groupedExpansionTile,
    );
  }
}

class GroupedExtensionTileSample2 extends StatefulWidget {
  const GroupedExtensionTileSample2({Key? key}) : super(key: key);

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

class _GroupedExtensionTileSample2 extends State<GroupedExtensionTileSample2> {
  final List<Category> _data = _createList();

  [@override](/user/override)
  Widget build(BuildContext context) {
    final groupedExpansionTile = GroupedExpansionTile<Category>(
      data: _data,
      builder: (parent, depth) => Text(parent.self.additional),
      childIndent: 50,
      controlAffinity: ListTileControlAffinity.trailing,
      initialBorder: Border.all(color: Colors.orange, width: 1),
      highlightedBorder:
          Border.all(color: Colors.deepPurple.shade800, width: 3),
      initiallyExpanded: false,
      draggable: true,
      onAccept: (source, dest) async {
        setState(() {
          // source 是 _data 中的一个元素
          source.self.parent = dest?.uid;
        });
      },
      onExpansionChanged: (expanded, parent, depth) {
        setState(() {
          parent.self.additional += "@";
        });
      },
      padding: EdgeInsets.zero,
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text("Advanced"),
      ),
      body: groupedExpansionTile,
    );
  }
}