Flutter动画折叠面板插件animated_accordion的使用
Flutter动画折叠面板插件 animated_accordion 的使用
animated_accordion 是一个提供展开、收起动画的折叠面板插件，支持多种动画类型（如淡入淡出、缩放、滑动等），并允许用户自定义头部和内容区域。它适用于需要展示可折叠内容的场景。
主要特性
多种动画类型：包括 fade（淡入淡出）、slide（滑动）、scale（缩放）、rotate（旋转）、flip（翻转）、fadeScale（淡入缩放）、slideFade（滑动淡入）、bounce（弹跳）、shrink（收缩）、blur（模糊）。
自定义动画：可以选择淡入淡出、缩放或滑动动画。
自定义头部和内容：可以自定义头部和内容区域的颜色、形状、渐变、边框、图片和对齐方式。
动态内容：可以轻松插入列表、小部件或按钮到内容区域。
展开/收起功能：每个折叠面板可以展开或收起，并且可以保持状态。
示例 Demo
以下是 animated_accordion 插件的效果示例：
使用方法
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),
],
);
}
}