Flutter 中的 ExpansionPanel：示例指南

每个移动操作系统都提供了一个内置的 UI 工具包，其中包含各种小部件，这些小部件通常不是很可定制。Flutter 带有一个灵活的小部件系统，该系统实现了 Material Design 规范并激励移动应用程序开发人员创建具有未来感的最小 UI。

与特定于平台的 UI 小部件不同，Flutter 为每个通用需求提供了许多可定制的小部件选择，因此根据您独特的设计草图构建您的 Flutter 应用程序很容易。其中之一是ExpansionPanel小部件，它可以帮助我们创建可展开/可折叠的列表。

我们可以ExpansionPanel在一个小部件中添加多个小ExpansionPanelList部件，以在我们的 Flutter 应用程序中创建可展开/可折叠的列表。这些小部件有一个展开/折叠图标按钮，供用户显示/隐藏其他内容。Flutter 开发人员通常使用单独的详细信息屏幕来显示特定列表项的大型内容片段（即显示产品详细信息）。

该ExpansionPanel小部件可帮助开发人员显示每个列表项的中小型内容段，而无需屏幕导航。在 UI/UX 规范中，此 UI 元素可以称为 Accordion、Expandable 或 Collapsible。

ExpansionPanel在本教程中，我将通过实际示例解释如何使用和自定义小部件。此外，我们会将其与ExpansionTile提供类似功能的小部件进行比较。

跳跃前进：

• 颤振ExpansionPanel教程

  • 与ExpansionPanel_ExpansionPanelList

• 如何自定义ExpansionPanel小部件的 UI

  • 调整ExpansionPanel的动画和触摸反馈

  • ExpansionPanel根据小部件状态自动扩展

  • 一次展开和折叠所有项目

  • 创建无线电扩展面板ExpansionPanelRadio

• 构建嵌套扩展面板

• ExpansionPanel对比ExpansionTile

颤振ExpansionPanel教程

让我们创建一个新的 Flutter 项目来使用这个ExpansionPanel小部件。您还可以在现有的 Flutter 项目中使用此示例代码。

如果您是 Flutter 新手，请按照 Flutter 官方安装指南安装 Flutter 开发工具。您可以在 Google Chrome、物理移动设备或模拟器/模拟器上运行即将发布的示例。在本教程中，我将使用 Chrome 预览示例应用程序。

首先，使用以下命令创建一个新的 Flutter 应用程序：

flutter create expansionpanel_example
cd expansionpanel_example

输入flutter run命令以确保一切正常。

与ExpansionPanel_ExpansionPanelList

让我们创建一个简单的指南页面，用于创建一个包含多个ExpansionPanel小部件和一个小部件的 Flutter 应用程序ExpansionPanelList。用户可以点击特定步骤来展开它并查看更多详细信息。

在大多数情况下，我们通常通过具有异步函数的后端 Web 服务将数据加载到应用程序前端，但在我们的教程中，我们将从同步函数呈现硬编码数据以ExpansionPanel快速开始。

将以下代码添加到您的main.dart文件中：

import 'package:flutter/material.dart';
​
void main() => runApp(const MyApp());
​
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const String _title = 'Flutter Tutorial';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Steps(),
      ),
    );
  }
}
​
class Step {
  Step(
    this.title,
    this.body,
    [this.isExpanded = false]
  );
  String title;
  String body;
  bool isExpanded;
}
​
List<Step> getSteps() {
  return [
    Step('Step 0: Install Flutter', 'Install Flutter development tools according to the official documentation.'),
    Step('Step 1: Create a project', 'Open your terminal, run `flutter create <project_name>` to create a new project.'),
    Step('Step 2: Run the app', 'Change your terminal directory to the project directory, enter `flutter run`.'),
  ];
}
​
class Steps extends StatefulWidget {
  const Steps({Key? key}) : super(key: key);
  @override
  State<Steps> createState() => _StepsState();
}
​
class _StepsState extends State<Steps> {
  final List<Step> _steps = getSteps();
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: _renderSteps(),
      ),
    );
  }
  Widget _renderSteps() {
    return ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          _steps[index].isExpanded = !isExpanded;
        });
      },
      children: _steps.map<ExpansionPanel>((Step step) {
        return ExpansionPanel(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Text(step.title),
            );
          },