expandable_atoms 是一个用于 Flutter 的插件，它提供了一种简单的方式来创建可扩展的组件。这个插件允许你轻松地创建可以在用户交互时展开和折叠的 UI 元素。以下是如何使用 expandable_atoms 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 expandable_atoms 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  expandable_atoms: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 expandable_atoms 包：

import 'package:expandable_atoms/expandable_atoms.dart';

3. 使用 ExpandableAtom 组件

ExpandableAtom 是 expandable_atoms 插件的核心组件。你可以使用它来创建可扩展的 UI 元素。

ExpandableAtom(
  header: Text('点击展开'),
  body: Column(
    children: [
      Text('这是展开后的内容'),
      Text('更多内容...'),
    ],
  ),
)

4. 自定义属性

ExpandableAtom 提供了多个属性来自定义其行为：

• header: 展开/折叠的标题部分。
• body: 展开后显示的内容。
• isExpanded: 控制组件是否默认展开。
• onExpand: 展开时的回调函数。
• onCollapse: 折叠时的回调函数。
• duration: 展开/折叠动画的持续时间。
• curve: 展开/折叠动画的曲线。

ExpandableAtom(
  header: Text('自定义展开组件'),
  body: Column(
    children: [
      Text('这是展开后的内容'),
      Text('更多内容...'),
    ],
  ),
  isExpanded: false, // 默认不展开
  duration: Duration(seconds: 1), // 动画持续1秒
  curve: Curves.easeInOut, // 使用easeInOut曲线
  onExpand: () {
    print('展开');
  },
  onCollapse: () {
    print('折叠');
  },
)

5. 嵌套使用

你可以在 ExpandableAtom 的 body 中嵌套其他 ExpandableAtom 组件，以创建多层级的可扩展 UI。

ExpandableAtom(
  header: Text('第一层'),
  body: Column(
    children: [
      Text('第一层内容'),
      ExpandableAtom(
        header: Text('第二层'),
        body: Column(
          children: [
            Text('第二层内容'),
          ],
        ),
      ),
    ],
  ),
)

6. 完整示例

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

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Expandable Atoms 示例')),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: [
                ExpandableAtom(
                  header: Text('点击展开'),
                  body: Column(
                    children: [
                      Text('这是展开后的内容'),
                      Text('更多内容...'),
                    ],
                  ),
                ),
                SizedBox(height: 16),
                ExpandableAtom(
                  header: Text('自定义展开组件'),
                  body: Column(
                    children: [
                      Text('这是展开后的内容'),
                      Text('更多内容...'),
                    ],
                  ),
                  isExpanded: false,
                  duration: Duration(seconds: 1),
                  curve: Curves.easeInOut,
                  onExpand: () {
                    print('展开');
                  },
                  onCollapse: () {
                    print('折叠');
                  },
                ),
                SizedBox(height: 16),
                ExpandableAtom(
                  header: Text('嵌套展开组件'),
                  body: Column(
                    children: [
                      Text('第一层内容'),
                      ExpandableAtom(
                        header: Text('第二层'),
                        body: Column(
                          children: [
                            Text('第二层内容'),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}