Flutter自定义可拖动组件
以下是一个简化的Flutter自定义可拖动组件的示例代码:
import 'package:flutter/material.dart';
class DraggableCard extends StatefulWidget {
final String cardTitle;
const DraggableCard({Key? key, required this.cardTitle}) : super(key: key);
@override
_DraggableCardState createState() => _DraggableCardState();
}
class _DraggableCardState extends State<DraggableCard> with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<Offset> _offsetAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: const Duration(seconds: 1));
_offsetAnimation = Tween<Offset>(begin: Offset(0, 0), end: Offset(0.5, 0.5)).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Positioned(
left: 100,
top: 100,
child: Draggable(
data: widget.cardTitle,
child: Card(
child: ListTile(
title: Text(widget.cardTitle),
),
),
feedback: Card(
child: ListTile(
title: Text(widget.cardTitle),
),
),
childWhenDragging: Opacity(
opacity: 0.5,
child: Card(
child: ListTile(
title: Text(widget.cardTitle),
),
),
),
),
);
},
);
}
}
这个示例定义了一个可拖动的卡片组件,它使用Draggable
来实现拖拽功能,并且通过AnimatedBuilder
来实现拖动过程中的动画效果。这个组件可以被用在需要实现卡片拖动交互的Flutter应用中。
评论已关闭