feat:增加抖动的动画

Tecode · Mar 6, 2024 · 74521e5 · 74521e5
1 parent 37eb2ee
commit 74521e5
Showing 1 changed file with 159 additions and 38 deletions.
diff --git a/lib/containers/position_exchange.dart b/lib/containers/position_exchange.dart
@@ -1,3 +1,4 @@
+import 'package:dynamic_theme/helpers/text_theme_style.dart';
 import 'package:flutter/material.dart' hide ReorderableListView;
 
 class PositionExchange extends StatefulWidget {
@@ -71,44 +72,47 @@ class _MyHomePageState extends State<PositionExchange> {
         child: ListView(
           controller: _scrollController,
           key: _listViewKey,
-          children: [
-            const SizedBox(height: 20),
-            const Center(child: Text('拖动排序')),
-            const SizedBox(height: 20),
-            DragGirdList(
-              setIsDragging: _setIsDragging,
-              resetIsDragging: _resetIsDragging,
-              indexOfDroppedItem: _indexOfDroppedItem,
-              isDragging: _isDragging,
-              activeItem: _activeItem,
-              onLeave: () => setState(() {
-                _activeItem = -1;
-              }),
-              onAccept: _acceptDraggedItem,
-              onWillAccept: (int index) {
-                setState(() {
-                  _activeItem = index;
-                });
-                return true;
-              },
-            ),
-            DragGirdList(
-              setIsDragging: _setIsDragging,
-              resetIsDragging: _resetIsDragging,
-              indexOfDroppedItem: 6,
-              isDragging: _isDragging,
-              activeItem: _activeItem,
-              onLeave: () => setState(() {
-                _activeItem = -1;
-              }),
-              onAccept: _acceptDraggedItem,
-              onWillAccept: (int index) {
-                setState(() {
-                  _activeItem = index;
-                });
-                return true;
-              },
-            ),
+          children: const [
+            SizedBox(height: 20),
+            GirdCardList(title: '封面'),
+            GirdCardList(title: '卧室'),
+            GirdCardList(title: '卫浴'),
+            GirdCardList(title: '外景'),
+            GirdCardList(title: '客厅'),
+            // DragGirdList(
+            //   setIsDragging: _setIsDragging,
+            //   resetIsDragging: _resetIsDragging,
+            //   indexOfDroppedItem: _indexOfDroppedItem,
+            //   isDragging: _isDragging,
+            //   activeItem: _activeItem,
+            //   onLeave: () => setState(() {
+            //     _activeItem = -1;
+            //   }),
+            //   onAccept: _acceptDraggedItem,
+            //   onWillAccept: (int index) {
+            //     setState(() {
+            //       _activeItem = index;
+            //     });
+            //     return true;
+            //   },
+            // ),
+            // DragGirdList(
+            //   setIsDragging: _setIsDragging,
+            //   resetIsDragging: _resetIsDragging,
+            //   indexOfDroppedItem: 6,
+            //   isDragging: _isDragging,
+            //   activeItem: _activeItem,
+            //   onLeave: () => setState(() {
+            //     _activeItem = -1;
+            //   }),
+            //   onAccept: _acceptDraggedItem,
+            //   onWillAccept: (int index) {
+            //     setState(() {
+            //       _activeItem = index;
+            //     });
+            //     return true;
+            //   },
+            // ),
           ],
         ),
       ),
@@ -195,3 +199,120 @@ class DragGirdList extends StatelessWidget {
     );
   }
 }
+
+/// 网格布局的卡片
+class GirdCardList extends StatelessWidget {
+  final String title;
+  const GirdCardList({Key? key, this.title = '标题'}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.all(8.0).copyWith(top: 0),
+          child: Text('$title (2/10)', style: TextThemeStyle.of(context).fontBold17),
+        ),
+        DragTarget<int>(
+          builder: (BuildContext context, List<dynamic> accepted, List<dynamic> rejected) => GridView.count(
+            shrinkWrap: true,
+            primary: false,
+            crossAxisCount: 3,
+            children: List.generate(
+              6,
+              (index) {
+                return Draggable<int>(
+                  data: index,
+                  child: const DeleteAnimationWidget(),
+                  childWhenDragging: Container(
+                    margin: const EdgeInsets.all(8.0),
+                    decoration: BoxDecoration(
+                      color: Colors.blue,
+                      border: Border.all(color: Colors.blue),
+                      borderRadius: const BorderRadius.all(Radius.circular(8)),
+                    ),
+                  ),
+                  onDragStarted: () => debugPrint('onDragStarted'),
+                  // onDraggableCanceled: (_, __) => resetIsDragging!(),
+                  // onDragCompleted: resetIsDragging,
+                  feedback: Container(
+                    width: 100,
+                    height: 100,
+                    decoration: const BoxDecoration(
+                      color: Colors.blue,
+                      borderRadius: BorderRadius.all(Radius.circular(20)),
+                    ),
+                  ),
+                );
+              },
+            ),
+          ),
+          onWillAccept: (_) {
+            debugPrint('onWillAccept');
+            return true;
+          },
+          onAccept: (int data) => {},
+          onLeave: (_) => {},
+        ),
+      ],
+    );
+  }
+}
+
+class DeleteAnimationWidget extends StatefulWidget {
+  const DeleteAnimationWidget({Key? key}) : super(key: key);
+
+  @override
+  _DeleteAnimationWidgetState createState() => _DeleteAnimationWidgetState();
+}
+
+class _DeleteAnimationWidgetState extends State<DeleteAnimationWidget> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _animation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(milliseconds: 100),
+      vsync: this,
+    );
+    _animation = Tween(begin: -0.05, end: 0.05).animate(_controller);
+    Future.microtask(_startDeleteAnimation);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  void _startDeleteAnimation() {
+    _controller.repeat(reverse: true);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: _startDeleteAnimation,
+      child: AnimatedBuilder(
+        animation: _controller,
+        builder: (_, child) {
+          return Transform.rotate(angle: _animation.value, child: child);
+        },
+        child: Container(
+          margin: const EdgeInsets.all(4.0),
+          decoration: const BoxDecoration(
+            color: Colors.red,
+            // border: Border.all(color: Colors.blue),
+            borderRadius: BorderRadius.all(Radius.circular(20)),
+          ),
+          child: const Center(
+            child: Icon(Icons.delete, color: Colors.white, size: 50.0),
+          ),
+        ),
+      ),
+    );
+  }
+}