Flutter动画折叠面板插件 `animated_accordion` 的使用

animated_accordion 是一个提供展开、收起动画的折叠面板插件，支持多种动画类型（如淡入淡出、缩放、滑动等），并允许用户自定义头部和内容区域。它适用于需要展示可折叠内容的场景。

主要特性

多种动画类型：包括 fade（淡入淡出）、slide（滑动）、scale（缩放）、rotate（旋转）、flip（翻转）、fadeScale（淡入缩放）、slideFade（滑动淡入）、bounce（弹跳）、shrink（收缩）、blur（模糊）。
自定义动画：可以选择淡入淡出、缩放或滑动动画。
自定义头部和内容：可以自定义头部和内容区域的颜色、形状、渐变、边框、图片和对齐方式。
动态内容：可以轻松插入列表、小部件或按钮到内容区域。
展开/收起功能：每个折叠面板可以展开或收起，并且可以保持状态。

示例 Demo

以下是 animated_accordion 插件的效果示例：

Demo GIF

使用方法

1. 添加依赖

在 pubspec.yaml 文件中添加 animated_accordion 依赖：

dependencies:
  animated_accordion: latest_version

记得将 latest_version 替换为最新的版本号。

2. 示例代码

以下是一个基本的示例，展示了如何在项目中使用 animated_accordion 插件，并应用不同的动画类型：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Expandable Tile Example'),
        ),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: ExampleScreen(),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView(
      children: [
        // Slide Animation Example
        AnimatedAccordion(
          headerTitle: "Slide Animation Title",
          contentWidgets: [
            const ListTile(
              title: Text("Content 1"),
            ),
            const ListTile(
              title: Text("Content 2"),
            ),
            const ListTile(
              title: Text("Content 3"),
            ),
            ElevatedButton(
                onPressed: () {
                  print("Button in Slide");
                },
                child: const Text("Button in Slide")),
          ],
          contentAnimationType: AnimatedAccordionAnimationType.slide,
          headerBackgroundColor: Colors.lightBlue[100],
          contentBackgroundColor: Colors.lightBlue[200],
          headerTitleStyle: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
          contentHeight: 150,
          animationDuration: const Duration(milliseconds: 700),
        ),

        // Fade Animation Example
        AnimatedAccordion(
          headerTitle: "Fade Animation Title",
          contentWidgets: [
            const ListTile(
              title: Text("Fade Content 1"),
            ),
            const ListTile(
              title: Text("Fade Content 2"),
            ),
            const ListTile(
              title: Text("Fade Content 3"),
            ),
          ],
          contentAnimationType: AnimatedAccordionAnimationType.fade,
          headerBackgroundColor: Colors.orange[100],
          contentBackgroundColor: Colors.orange[200],
        ),

        // Scale Animation Example
        AnimatedAccordion(
          headerTitle: "Scale Animation Title",
          contentWidgets: [
            const ListTile(
              title: Text("Scale Content 1"),
            ),
            const ListTile(
              title: Text("Scale Content 2"),
            ),
            const ListTile(
              title: Text("Scale Content 3"),
            ),
          ],
          contentAnimationType: AnimatedAccordionAnimationType.scale,
          headerBackgroundColor: Colors.green[100],
          contentBackgroundColor: Colors.green[200],
        ),
      ],
    );
  }
}

3. 参数说明

headerTitle: 头部标题文本。
contentWidgets: 展开时显示的内容小部件列表。
contentAnimationType: 展开/收起时使用的动画类型（如 fade、scale、slide 等）。
contentHeight: 展开后内容区域的高度。
headerBackgroundColor: 头部背景颜色。
headerTextColor: 头部文本颜色。
tileBackgroundColor: 折叠面板的整体背景颜色。
animationDuration: 动画持续时间。
onExpansionChanged: 当展开状态发生变化时触发的回调函数。
collapsedTileElevation: 折叠时的阴影高度。
expandedTileElevation: 展开时的阴影高度。
headerShape: 头部的形状（如圆角矩形）。
contentShape: 内容区域的形状。
headerTextAlign: 头部文本的对齐方式（如左对齐、居中对齐等）。

完整示例

下面是一个更完整的示例，展示了如何使用不同类型的动画和更多的自定义选项：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Animated Accordion Example'),
        ),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: ExampleScreen(),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ListView(
      children: [
        // Default Accordion
        const AnimatedAccordion(
          headerTitle: "Default Accordion",
          contentWidgets: [
            ListTile(title: Text("Content 1")),
            ListTile(title: Text("Content 2")),
            ListTile(title: Text("Content 3")),
            ListTile(title: Text("Content 4")),
            ListTile(title: Text("Content 5")),
          ],
        ),
        const SizedBox(height: 20),

        // Slide Animation Tile
        AnimatedAccordion(
          headerTextAlign: TextAlign.center,
          headerTitle: "Slide Animation Title",
          headerTextColor: Colors.black54,
          headerShape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          contentWidgets: [
            const ListTile(
              title: Text("Content 1"),
            ),
            const ListTile(
              title: Text("Content 2"),
            ),
            const ListTile(
              title: Text("Content 3"),
            ),
            ElevatedButton(
                onPressed: () {
                  print("Slide Button Pressed");
                },
                child: const Text("Button in Slide")),
          ],
          contentAnimationType: AnimatedAccordionAnimationType.slide,
          headerTrailing: const Icon(Icons.arrow_drop_down),
          headerBackgroundColor: Colors.lightBlue[100],
          tileBackgroundColor: Colors.white,
          contentBackgroundColor: Colors.white,
          headerTitleStyle: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
          collapsedTileElevation: 2.0,
          expandedTileElevation: 4.0,
          animationDuration: const Duration(milliseconds: 700),
          tileShape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
        ),
        const SizedBox(height: 20),

        // Fade Animation Tile
        AnimatedAccordion(
          contentHeight: 200,
          headerTitle: "Fade Animation Title",
          headerShape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          contentWidgets: [
            const ListTile(
              title: Text("Fade Content 1"),
            ),
            const ListTile(
              title: Text("Fade Content 2"),
            ),
            ElevatedButton(
                onPressed: () {
                  print("Fade Button Pressed");
                },
                child: const Text("Button in Fade")),
          ],
          contentBorderRadius: BorderRadius.circular(50),
          contentAnimationType: AnimatedAccordionAnimationType.flip,
          headerTrailing: const Icon(Icons.arrow_drop_down),
          headerBackgroundColor: Colors.orange[100],
          contentBackgroundColor: Colors.amber[200],
          headerTitleStyle: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
          isInitiallyExpanded: true,
          animationDuration: const Duration(milliseconds: 700),
        ),
        const SizedBox(height: 20),

        // Scale Animation Tile
        AnimatedAccordion(
          contentHeight: 200,
          headerTitle: "Scale Animation Title",
          headerShape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          contentWidgets: [
            const ListTile(
              title: Text("Scale Content 1"),
            ),
            const ListTile(
              title: Text("Scale Content 2"),
            ),
            ElevatedButton(
                onPressed: () {
                  print("Scale Button Pressed");
                },
                child: const Text("Button in Scale")),
          ],
          contentAnimationType: AnimatedAccordionAnimationType.scale,
          headerTrailing: const Icon(Icons.arrow_drop_down),
          headerBackgroundColor: Colors.green[100],
          tileBackgroundColor: Colors.green[50],
          contentBackgroundColor: Colors.green[200],
          headerTitleStyle: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
          collapsedTileElevation: 2.0,
          expandedTileElevation: 4.0,
          animationDuration: const Duration(milliseconds: 700),
          tileShape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
        ),
        const SizedBox(height: 20),
      ],
    );
  }
}

更多关于Flutter动画折叠面板插件animated_accordion的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•10 小时前

更多关于Flutter动画折叠面板插件animated_accordion的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter中使用animated_accordion插件来创建动画折叠面板的示例代码。这个插件提供了一个简单的方式来创建具有动画效果的折叠面板。

首先，确保你的pubspec.yaml文件中已经添加了animated_accordion依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_accordion: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用AnimatedAccordion组件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Accordion Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AccordionDemo(),
    );
  }
}

class AccordionDemo extends StatefulWidget {
  @override
  _AccordionDemoState createState() => _AccordionDemoState();
}

class _AccordionDemoState extends State<AccordionDemo> {
  bool isOpen = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Accordion Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            AnimatedAccordion(
              title: Text('Section 1'),
              isOpen: isOpen,
              onToggle: (open) {
                setState(() {
                  isOpen = open;
                });
              },
              content: Container(
                color: Colors.grey[200],
                padding: EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('This is the content of section 1.'),
                    SizedBox(height: 8.0),
                    Text('You can put any widget here.'),
                  ],
                ),
              ),
            ),
            SizedBox(height: 16.0),
            AnimatedAccordion(
              title: Text('Section 2'),
              isOpen: !isOpen, // For demonstration, toggle state is opposite of Section 1
              onToggle: (open) {
                setState(() {
                  // For simplicity, let's assume only one section can be open at a time
                  isOpen = !open; // This will close the other section if one is opened
                });
              },
              content: Container(
                color: Colors.grey[200],
                padding: EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('This is the content of section 2.'),
                    SizedBox(height: 8.0),
                    Text('Another example of animated accordion.'),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含两个折叠面板的简单应用。每个面板都有一个标题和一些内容。当用户点击面板标题时，面板的内容会展开或折叠，同时触发onToggle回调来更新isOpen状态。

注意：

AnimatedAccordion的isOpen属性控制面板的打开或关闭状态。
onToggle回调用于在面板状态改变时更新UI状态。
你可以根据需要自定义面板的内容和样式。

这个示例展示了如何使用animated_accordion插件来创建具有动画效果的折叠面板。你可以根据需要进一步扩展和自定义这个示例。

Flutter动画折叠面板插件animated_accordion的使用

Flutter动画折叠面板插件 animated_accordion 的使用