Flutter折叠面板插件accordion的使用

简介

accordion 是一个可扩展的Flutter小部件列表，每个项目都可以通过单击标题来展开或折叠。它简单易用，并提供了许多预设属性。你可以使用 maxOpenSections 属性来自动关闭其他部分，以确保每次只打开一个部分。这有助于保持列表的整洁外观。

主要特性

• 简洁易用：提供多种预设属性。
• 自动关闭功能：设置 maxOpenSections 参数为1时，每次打开新部分会自动关闭旧的部分。
• 滚动可见性：scrollIntoView 参数可以设置为 fast, slow, 或 none，确保新打开的项完全可见。
• 全局和局部配置：大多数参数可以在 Accordion 中全局设置，也可以在每个 AccordionSection 中单独设置。
• 自定义头部和内容：可以通过 header 和 content 参数自定义头部和内容区域的小部件。
• 嵌套支持：可以在 AccordionSection 内部嵌套另一个 Accordion。

常见错误

避免将整个 Accordion 小部件包裹在状态管理中，因为这可能会导致每次状态变化时都播放展开动画。相反，应该仅包裹需要更新的内容部分，或者将 AccordionSection 的内容部分提取为一个独立的小部件，并在此处处理状态管理需求。

示例代码

下面是一个完整的示例，展示了如何使用 accordion 插件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const AccordionPage(),
    );
  }
}

class AccordionPage extends StatelessWidget {
  static const headerStyle = TextStyle(
      color: Color(0xffffffff), fontSize: 18, fontWeight: FontWeight.bold);
  static const contentStyleHeader = TextStyle(
      color: Color(0xff999999), fontSize: 14, fontWeight: FontWeight.w700);
  static const contentStyle = TextStyle(
      color: Color(0xff999999), fontSize: 14, fontWeight: FontWeight.normal);
  static const loremIpsum =
      '''Lorem ipsum is typically a corrupted version of 'De finibus bonorum et malorum', a 1st century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin.''';
  static const slogan =
      'Do not forget to play around with all sorts of colors, backgrounds, borders, etc.';

  const AccordionPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[100],
      appBar: AppBar(
        title: const Text('Accordion'),
      ),
      body: Accordion(
        headerBorderColor: Colors.blueGrey,
        headerBorderColorOpened: Colors.transparent,
        headerBackgroundColorOpened: Colors.green,
        contentBackgroundColor: Colors.white,
        contentBorderColor: Colors.green,
        contentBorderWidth: 3,
        contentHorizontalPadding: 20,
        scaleWhenAnimating: true,
        openAndCloseAnimation: true,
        headerPadding:
            const EdgeInsets.symmetric(vertical: 7, horizontal: 15),
        sectionOpeningHapticFeedback: SectionHapticFeedback.heavy,
        sectionClosingHapticFeedback: SectionHapticFeedback.light,
        children: [
          AccordionSection(
            isOpen: true,
            contentVerticalPadding: 20,
            leftIcon: const Icon(Icons.text_fields_rounded, color: Colors.white),
            header: const Text('Simple Text', style: headerStyle),
            content: const Text(loremIpsum, style: contentStyle),
          ),
          AccordionSection(
            isOpen: true,
            leftIcon: const Icon(Icons.input, color: Colors.white),
            header: const Text('Text Field & Button', style: headerStyle),
            contentHorizontalPadding: 40,
            contentVerticalPadding: 20,
            content: const MyInputForm(),
          ),
          AccordionSection(
            isOpen: true,
            leftIcon: const Icon(Icons.child_care_rounded, color: Colors.white),
            header: const Text('Nested Accordion', style: headerStyle),
            content: const MyNestedAccordion(),
          ),
          AccordionSection(
            isOpen: false,
            leftIcon: const Icon(Icons.shopping_cart, color: Colors.white),
            header: const Text('DataTable', style: headerStyle),
            content: const MyDataTable(),
          ),
          // More AccordionSection examples...
        ],
      ),
    );
  }
}

class MyInputForm extends StatelessWidget {
  const MyInputForm({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextFormField(
          decoration: InputDecoration(
            label: const Text('Some text goes here ...'),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        ).marginOnly(bottom: 10),
        ElevatedButton(
          onPressed: () {},
          child: const Text('Submit'),
        )
      ],
    );
  }
}

class MyDataTable extends StatelessWidget {
  const MyDataTable({super.key});

  @override
  Widget build(BuildContext context) {
    return DataTable(
      sortAscending: true,
      sortColumnIndex: 1,
      showBottomBorder: false,
      columns: const [
        DataColumn(
            label: Text('ID', style: AccordionPage.contentStyleHeader),
            numeric: true),
        DataColumn(
            label: Text('Description', style: AccordionPage.contentStyleHeader)),
        DataColumn(
            label: Text('Price', style: AccordionPage.contentStyleHeader),
            numeric: true),
      ],
      rows: const [
        DataRow(
          cells: [
            DataCell(Text('1',
                style: AccordionPage.contentStyle, textAlign: TextAlign.right)),
            DataCell(Text('Fancy Product', style: AccordionPage.contentStyle)),
            DataCell(Text(r'$ 199.99',
                style: AccordionPage.contentStyle, textAlign: TextAlign.right))
          ],
        ),
        // More DataRow examples...
      ],
    );
  }
}

class MyNestedAccordion extends StatelessWidget {
  const MyNestedAccordion({super.key});

  @override
  Widget build(BuildContext context) {
    return Accordion(
      paddingListTop: 0,
      paddingListBottom: 0,
      maxOpenSections: 1,
      headerBackgroundColorOpened: Colors.black54,
      headerPadding: const EdgeInsets.symmetric(vertical: 7, horizontal: 15),
      children: [
        AccordionSection(
          isOpen: true,
          leftIcon: const Icon(Icons.insights_rounded, color: Colors.white),
          headerBackgroundColor: Colors.black38,
          headerBackgroundColorOpened: Colors.black54,
          header: const Text('Nested Section #1', style: AccordionPage.headerStyle),
          content: const Text(AccordionPage.loremIpsum, style: AccordionPage.contentStyle),
          contentHorizontalPadding: 20,
          contentBorderColor: Colors.black54,
        ),
        AccordionSection(
          isOpen: true,
          leftIcon: const Icon(Icons.compare_rounded, color: Colors.white),
          header: const Text('Nested Section #2', style: AccordionPage.headerStyle),
          headerBackgroundColor: Colors.black38,
          headerBackgroundColorOpened: Colors.black54,
          contentBorderColor: Colors.black54,
          content: const Row(
            children: [
              Icon(Icons.compare_rounded, size: 120, color: Colors.orangeAccent),
              Flexible(
                  flex: 1,
                  child: Text(AccordionPage.loremIpsum, style: AccordionPage.contentStyle)),
            ],
          ),
        ),
      ],
    );
  }
}

关键点解释

• Accordion：主控件，包含多个 AccordionSection，可以设置全局属性如 maxOpenSections、headerBackgroundColor 等。
• AccordionSection：每个可折叠部分，可以设置是否初始展开、头部和内容区域的样式等。
• 嵌套：可以在 AccordionSection 中嵌套另一个 Accordion，实现多级折叠效果。

通过这个示例，你可以看到如何创建一个带有不同样式的折叠面板，并且可以根据需要进行进一步的自定义。希望这些信息对你有所帮助！