Flutter – 扩展面板

当我们想要展开和折叠事物时，我们可以在扩展面板的帮助下做到这一点。此扩展面板列表主要用于应用程序，并为应用程序提供额外功能。我们可以创建一个子项列表并用扩展面板列表包装它。我们还可以在我们的应用程序中创建多个扩展面板。我们可以通过 isExpanded 属性来控制面板是否打开。

按照以下步骤在Flutter实现扩展面板：

ExpansionPanel 的构造函数：

ExpansionPanel(
{required ExpansionPanelHeaderBuilder headerBuilder,
required Widget body,
bool isExpanded: false,
bool canTapOnHeader: false,
Color? backgroundColor}
)

特性：

• headerBuilder ：它是构建扩展面板的小部件构建器。
• body ：扩展面板的主体。
• isExpanded : 检查扩展面板是否展开的布尔值。
• canTapOnHeader ：它是一个布尔值，如果为 true，则可以展开面板。
• backgroundColor : 扩展面板的背景颜色。

例子：

主页。dart文件

Dart

import 'package:flutter/material.dart';
import 'package:sports_app/items.dart';
import 'package:velocity_x/velocity_x.dart';
  
class Homepage extends StatefulWidget {
  @override
  _HomepageState createState() => _HomepageState();
}
  
class _HomepageState extends State {
  bool active = false;
  String exTitle = "Sport Categories";
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ExpansionPanelList(
          expansionCallback: (panelIndex, isExpanded) {
            active = !active;
              if(exTitle=="Sport Categories")
                exTitle="Contract";
              else
                exTitle="Sport Categories";
            setState(() {
                
            });
          },
          children: [
            ExpansionPanel(
                headerBuilder: (context, isExpanded) {
                  return exTitle.text.gray500.make().centered();
                },
                body: Wrap(
                  alignment: WrapAlignment.spaceBetween,
                  spacing: 7,
                  children: [
                    ElevatedButton(
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.resolveWith(
                          (Set states) {
                            if (states.contains(MaterialState.pressed))
                              return Colors.red;
                              
                            // Use the component's default.
                            return Colors.black; 
                          },
                        ),
                      ),
                      onPressed: () => null,
                      child: "All".text.make(),
                    ),
                    ElevatedButton(
                      onPressed: null,
                      child: "Basketball".text.black.make(),
                    ),
                    ElevatedButton(
                        onPressed: null, child: "Football".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Tennis".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Fencing".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Swimming".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Hockey".text.black.make()),
                    ElevatedButton(
                        onPressed: null, child: "Karate".text.black.make()),
                  ],
                ),
                isExpanded: active,
                canTapOnHeader: true
                )
          ],
        ),
        for (int i = 0; i < items.length; i++) items[i]
      ],
    );
  }
}

解释：

• 扩展面板是使用标题生成器创建的，以创建扩展面板的标题。
• 扩展面板包含一个扩展面板列表以创建扩展面板列表。
• 在扩展面板中，主体由一些高架按钮制成。
• isExpaned属性用于管理扩展面板。
• canTapOnHeader设置为 True 以便可以通过点击标题打开扩展面板。

输出：

• 如果我们点击下拉按钮或标题，则扩展面板将打开，如下所示：