From 74521e56f9c88cb92b2bff70e5d155acf2c6879d Mon Sep 17 00:00:00 2001 From: haoxuan <283731869@qq.com> Date: Wed, 6 Mar 2024 20:53:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E6=8A=96=E5=8A=A8?= =?UTF-8?q?=E7=9A=84=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/containers/position_exchange.dart | 197 +++++++++++++++++++++----- 1 file changed, 159 insertions(+), 38 deletions(-) diff --git a/lib/containers/position_exchange.dart b/lib/containers/position_exchange.dart index 0335279..4122067 100644 --- 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 { 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( + builder: (BuildContext context, List accepted, List rejected) => GridView.count( + shrinkWrap: true, + primary: false, + crossAxisCount: 3, + children: List.generate( + 6, + (index) { + return Draggable( + 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 with SingleTickerProviderStateMixin { + late AnimationController _controller; + late Animation _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), + ), + ), + ), + ); + } +}