Flutter展开动画插件expand的使用

expand 是一个用于帮助创建流畅、快速且简单的展开小部件的 Flutter 插件，使用最少的代码即可实现。

安装

要使用此插件，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  expand: ^最新版本号

然后运行 flutter pub get 来获取依赖。

开始使用

将任何可展开的小部件列表包裹在 ExpandableProvider 中即可开始使用。

使用方法

这是一个使用 ExpandableTile 的基本示例：

ExpandableProvider(
  child: ListView(
    children: [
      ExpandableTile(
        title: const Text('Tile 1'),
        detailsBuilder: (context) => Container(height: 200),
      ),
      ExpandableTile(
        title: const Text('Tile 2'),
        detailsBuilder: (context) => Container(height: 200),
      ),
    ],
  ),
)

可以跳过 ExpandableProvider 的使用，通过手动提供 ExpandableController 来实现。

关键组件

• ExpandableProvider + ExpandableController: 展开卡片的状态提供者
• ExpandableCard: 所有可展开小部件的基础
• ExpandableTile: 带有可展开详情的 ListTile

完整示例

以下是完整的示例代码：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('展开小部件示例')),
        body: ExpandableProvider(
          child: ListView(
            children: [
              // 第一个展开项
              ExpandableTile(
                title: const Text('Tile 1'),
                detailsBuilder: (context) =>
                    Container(height: 200, color: Colors.red),
              ),
              // 第二个展开项
              ExpandableTile(
                title: const Text('Tile 2'),
                detailsBuilder: (context) =>
                    Container(height: 200, color: Colors.green),
              ),
              // 第三个展开项
              ExpandableTile(
                id: 'tile3',
                title: const Text('Tile 3'),
                trailing: const Icon(Icons.arrow_drop_down),
                detailsBuilder: (context) =>
                    Container(height: 200, color: Colors.blue),
              ),
              // 自定义展开卡片
              ExpandableCard(
                childBuilder: (context, _) => AspectRatio(
                  aspectRatio: 2,
                  child: Ink.image(
                    image: const NetworkImage('https://picsum.photos/400/200'),
                    fit: BoxFit.cover,
                  ),
                ),
                detailsBuilder: (context) => Column(
                  children: [
                    Container(height: 200, color: Colors.pink),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: FilledButton(
                        onPressed: () {
                          ExpandableProvider.of(context).open('tile3');
                        },
                        child: const Text('打开 Tile 3'),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}