Flutter 仿探探卡片滑动效果(上下左右)
warning:
这篇文章距离上次修改已过187天,其中的内容可能已经有所变动。
在Flutter中,你可以使用Stack
和Positioned
小部件来实现探探卡片的滑动效果。以下是一个简单的示例,展示了如何创建一个上下左右滑动的卡片效果:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: DraggableCard(),
),
),
);
}
}
class DraggableCard extends StatefulWidget {
@override
_DraggableCardState createState() => _DraggableCardState();
}
class _DraggableCardState extends State<DraggableCard> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _slideAnimation;
double _offset = 0.0;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
_slideAnimation = Tween<Offset>(begin: Offset(0, 0), end: Offset(0.2, 0.2)).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _slideCard(double offset) {
setState(() {
_offset += offset;
_controller.forward(from: 0.0);
});
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Positioned(
left: _offset * 2,
top: _offset * 2,
child: SlideTransition(
position: _slideAnimation,
child: Container(
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
child: Text('Draggable Card'),
),
),
),
GestureDetector(
onVerticalDragStart: (DragStartDetails details) {
_slideAnimation = Tween<Offset>(
begin: _slideAnimation.value,
end: Offset(0.0, details.globalPosition.dy - details.localPosition.dy),
).animate(_controller);
},
onVerticalDragUpdate: (DragUpdateDetails details) {
_slideAnimation = Tween<Offset>(
评论已关闭