1

2025-09-05 18:00:26 +08:00
parent 70aa3e6ab6
commit 193d29b0ce
23 changed files with 1071 additions and 338 deletions
--- a/lib/page/test/test_page.dart
+++ b/lib/page/test/test_page.dart
@@ -0,0 +1,132 @@
+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);
+}