Flutter增强型扩展面板插件enhance_expansion_panel的使用

简介

enhance_expansion_panel 是一个基于 Flutter 2.5.0 原生组件功能升级版的插件。它提供了更多的自定义选项，如支持默认箭头隐藏、自定义箭头以及箭头在头部或尾部的位置布局。

功能特性

• 支持默认箭头隐藏
• 支持自定义箭头
• 支持箭头在头部或尾部的位置布局

开始使用

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter

  enhance_expansion_panel:
    git:
      url: git@github.com:shang1219178163/enhance_expansion_panel.git
      ref: main

使用示例

以下是一个完整的示例代码，展示了如何使用 enhance_expansion_panel 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Enhance Expansion Panel Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({required this.title});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Item> _data = List.generate(
    5,
    (index) => Item(
      headerValue: 'Header $index',
      expandedValue: 'This is item number $index',
      isExpanded: false,
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: buildExpansionPanelList(),
    );
  }

  Widget buildExpansionPanelList() {
    return SingleChildScrollView(
      child: Container(
        child: EnhanceExpansionPanelList(
          dividerColor: Colors.red,
          expandedHeaderPadding: EdgeInsets.zero,
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              _data[index].isExpanded = !isExpanded;
            });
          },
          children: _data.map<EnhanceExpansionPanel>((Item item) {
            return EnhanceExpansionPanel(
              isExpanded: item.isExpanded,
              canTapOnHeader: true,
              arrowColor: Colors.blue,
              arrowPosition: EnhanceExpansionPanelArrowPosition.tailing,
              arrowPadding: const EdgeInsets.all(5),
              arrow: const Icon(Icons.keyboard_arrow_right, color: Colors.blue),
              arrowExpanded: const Icon(Icons.keyboard_arrow_down, color: Colors.red),
              headerBuilder: (BuildContext context, bool isExpanded) {
                return Container(
                  child: ListTile(
                    title: Text(item.headerValue),
                    subtitle: Text("Subtitle"),
                  ),
                );
              },
              body: ListTile(
                title: Text(item.expandedValue),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

class Item {
  String headerValue;
  String expandedValue;
  bool isExpanded;

  Item({
    required this.headerValue,
    required this.expandedValue,
    required this.isExpanded,
  });
}

详细说明

• EnhanceExpansionPanelList: 这是包含多个 EnhanceExpansionPanel 的列表组件。
• EnhanceExpansionPanel: 每个可展开的面板。
• headerBuilder: 用于构建面板头部的回调函数。
• body: 面板展开时显示的内容。
• arrowColor: 箭头的颜色。
• arrowPosition: 箭头的位置，可以是 leading 或 tailing。
• arrowPadding: 箭头的内边距。
• arrow: 自定义箭头图标。
• arrowExpanded: 面板展开时的箭头图标。

截图

以下是 enhance_expansion_panel 插件的一些截图，展示了其不同的使用场景：

希望这个插件能帮助你更好地实现扩展面板的功能，并提供更多的自定义选项。如果有任何问题或建议，欢迎在 GitHub 上提交 issue 或 PR。