📜  Flutter – 扩展面板

📅  最后修改于: 2021-09-23 06:40:18             🧑  作者: Mango

当我们想要展开和折叠事物时,我们可以在扩展面板的帮助下做到这一点。此扩展面板列表主要用于应用程序,并为应用程序提供额外功能。我们可以创建一个子项列表并用扩展面板列表包装它。我们还可以在我们的应用程序中创建多个扩展面板。我们可以通过 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 以便可以通过点击标题打开扩展面板。

输出:

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