Flutter摇晃动画列表插件shaky_animated_listview的使用
Flutter摇晃动画列表插件shaky_animated_listview的使用
插件介绍
Shaky_animated_list 是一个用于实现列表和网格视图滚动动画的Flutter插件。它主要可以用于以下三种场景：
- 列表视图滚动动画：为列表视图的滚动添加动画效果。
- 网格视图首项动画：为网格视图的第一个项目添加动画效果。
- 网格视图滚动动画：为网格视图的滚动添加动画效果。
这些动画会跟踪屏幕上的滚动变化或列表首次附加时的情况，从而以不同的过渡规则来动画化列表项。
动画方向
你可以通过更改列表的 ScrollDirection 来定义这些动画的方向（Axis）。
示例代码
以下是一个完整的示例代码，展示了如何使用 shaky_animated_listview 插件来实现不同类型的动画效果。
主文件 main.dart
import 'package:flutter/material.dart';
import 'package:shaky_animated_listview/scroll_animator.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.dark(),
home: const Body(),
);
}
}
class Body extends StatelessWidget {
const Body({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
btn1(context, "显示网格动画", () {
buildBottomBody(context);
}),
btn1(context, "垂直列表动画", () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return const VerticalList();
}));
}),
btn1(context, "垂直网格动画", () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return const GridList();
}));
}),
btn1(context, "水平列表动画", () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) {
return const HorzList();
}));
}),
],
),
),
);
}
Widget btn1(BuildContext context, String text, Function() click) {
return MaterialButton(
color: Colors.grey[900],
minWidth: 300,
onPressed: click,
child: Text(text),
);
}
void buildBottomBody(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (BuildContext innerContext) {
return Container(
height: MediaQuery.of(innerContext).size.height,
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Column(
children: <Widget>[
buildHeader(),
Expanded(
child: GridView.count(
crossAxisCount: 3,
children: List.generate(9, (i) => buildImage()).toList(),
),
)
],
),
);
},
);
}
}
Widget buildImage() {
return GridAnimatorWidget(
child: Padding(
padding: const EdgeInsets.all(4),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(10)),
child: Container(
color: Colors.grey,
),
),
),
);
}
Widget buildHeader() {
return Padding(
padding: const EdgeInsets.all(4),
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(10)),
child: Container(
width: double.infinity,
height: 150,
color: Colors.black38,
child: const Center(
child: Text(
"网格动画",
style: TextStyle(fontSize: 30, color: Colors.white),
),
),
),
),
);
}
垂直列表动画 VerticalList.dart
import 'package:flutter/material.dart';
import 'package:shaky_animated_listview/scroll_animator.dart';
class VerticalList extends StatelessWidget {
const VerticalList({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('垂直列表动画')),
body: AnimatedListView(
duration: 100,
extendedSpaceBetween: 30,
spaceBetween: 10,
children: List.generate(
21,
(index) => Card(
elevation: 50,
margin: const EdgeInsets.symmetric(horizontal: 20),
shadowColor: Colors.black,
color: Colors.grey,
child: SizedBox(
height: 300,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
CircleAvatar(
backgroundColor: Colors.blue[500],
radius: 60,
child: const CircleAvatar(
backgroundImage: NetworkImage(
"https://avatars.githubusercontent.com/u/30810111?v=4"),
radius: 50,
),
),
const SizedBox(height: 10),
const Text(
'向下滚动开始',
style: TextStyle(
fontSize: 30,
color: Colors.blue[900],
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 10),
const Text(
'列表动画演示',
style: TextStyle(fontSize: 15, color: Colors.white),
),
const SizedBox(height: 10),
],
),
),
),
),
),
),
);
}
}
垂直网格动画 GridList.dart
import 'package:flutter/material.dart';
import 'package:shaky_animated_listview/scroll_animator.dart';
class GridList extends StatelessWidget {
const GridList({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('垂直网格动画')),
body: AnimatedGridView(
duration: 100,
crossAxisCount: 2,
mainAxisExtent: 256,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
children: List.generate(
21,
(index) => Card(
elevation: 50,
shadowColor: Colors.black,
color: Colors.grey[700],
child: SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: const [
CircleAvatar(
backgroundColor: Colors.black,
radius: 60,
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://avatars.githubusercontent.com/u/30810111?v=4"),
radius: 50,
),
),
],
),
),
),
),
),
),
);
}
}
水平列表动画 HorzList.dart
import 'package:flutter/material.dart';
import 'package:shaky_animated_listview/scroll_animator.dart';
class HorzList extends StatelessWidget {
const HorzList({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('水平列表动画')),
body: AnimatedListView(
duration: 100,
scrollDirection: Axis.horizontal,
children: List.generate(
21,
(index) => const Card(
elevation: 50,
margin: EdgeInsets.symmetric(horizontal: 10),
shadowColor: Colors.black,
color: Colors.grey,
child: SizedBox(
height: 300,
width: 200,
),
),
),
),
);
}
}
总结
通过以上示例代码，你可以看到如何使用 shaky_animated_listview 插件来实现不同类型的列表和网格视图滚动动画。希望这些示例对你有所帮助！如果你有任何问题或建议，欢迎随时提出。
更多关于Flutter摇晃动画列表插件shaky_animated_listview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
