133 lines
3.6 KiB
Dart
133 lines
3.6 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
class TestPage extends StatefulWidget {
|
|
const TestPage({super.key});
|
|
|
|
@override
|
|
State<TestPage> createState() => _TestPageState();
|
|
}
|
|
|
|
class _TestPageState extends State<TestPage> {
|
|
final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
|
|
List<Item> _list = [
|
|
Item("测试1", ""),
|
|
Item("测试2", ""),
|
|
Item("测试4", ""),
|
|
Item("测试5", ""),
|
|
];
|
|
|
|
void _add() {
|
|
_list.add(Item("测试${_list.length + 1}", ""));
|
|
_listKey.currentState?.insertItem(
|
|
_list.length - 1,
|
|
duration: Duration(milliseconds: 200),
|
|
);
|
|
}
|
|
|
|
void _remove() {
|
|
final index = _list.length - 1; // 删除的索引
|
|
final removedItem = _list.removeAt(index); // 移除元素
|
|
|
|
_listKey.currentState?.removeItem(
|
|
index,
|
|
(context, animation) {
|
|
final curvedAnimation = CurvedAnimation(
|
|
parent: animation,
|
|
curve: Curves.easeInOut, // 这里设置曲线
|
|
);
|
|
return buildItem(removedItem, curvedAnimation);
|
|
},
|
|
duration: Duration(milliseconds: 200),
|
|
);
|
|
}
|
|
void _update() {
|
|
if (_list.isNotEmpty) {
|
|
setState(() {
|
|
_list[0] = Item("测试1", "这这是新描述这是新描述这是新描述这是新描述这是新描述这是新描述这是新描述这是新描述这是新描述是新描述"); // 改变 desc
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: Text("长度${_list.length}"),
|
|
actions: [
|
|
ElevatedButton(
|
|
onPressed: _update,
|
|
child: Text("更新子元素"),
|
|
),
|
|
ElevatedButton(
|
|
onPressed: _add,
|
|
child: Text("增加"),
|
|
),
|
|
ElevatedButton(
|
|
onPressed: _remove,
|
|
child: Text("减少"),
|
|
),
|
|
],
|
|
),
|
|
body: AnimatedList(
|
|
key: _listKey,
|
|
itemBuilder: (_, index, animation) {
|
|
final item = _list[index];
|
|
// 新增元素的动画
|
|
final curvedAnimation = CurvedAnimation(
|
|
parent: animation,
|
|
curve: Curves.easeInOut,
|
|
);
|
|
return buildItem(item, curvedAnimation);
|
|
},
|
|
initialItemCount: _list.length,
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget buildItem(Item item, CurvedAnimation curvedAnimation) {
|
|
return FadeTransition(
|
|
opacity: curvedAnimation,
|
|
child: SizeTransition(
|
|
sizeFactor: curvedAnimation,
|
|
axis: Axis.vertical,
|
|
child: Container(
|
|
padding: EdgeInsets.all(15),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text("序号${item.title}"),
|
|
AnimatedSwitcher(
|
|
duration: Duration(milliseconds: 300),
|
|
transitionBuilder: (child, animation) {
|
|
return FadeTransition(
|
|
opacity: animation,
|
|
child: SizeTransition(
|
|
sizeFactor: animation,
|
|
axis: Axis.vertical,
|
|
child: child,
|
|
),
|
|
);
|
|
},
|
|
child: item.desc.isEmpty
|
|
? SizedBox.shrink(key: ValueKey("empty"))
|
|
: Text(
|
|
"描述${item.desc}",
|
|
key: ValueKey(item.desc), // ValueKey 用于 AnimatedSwitcher 判断变化
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class Item {
|
|
final String title;
|
|
final String desc;
|
|
|
|
Item(this.title, this.desc);
|
|
}
|