我有三张图像,这些图像堆叠在一起并稍微随机旋转。每个图像都可以放置在屏幕上的任何位置,但是一旦触摸到下面的图像,我希望它跳到前景并将其他图像放在下面(只是“顶到顶部”)。关于如何在Flutter中完成此操作的任何建议?
有点类似于this问题,但我没有调整大小或缩放比例。
[更新]
我已更新代码以反映当前情况。现在,单击的图像确实跳到顶部,但是.....还将占据当前顶部图像的位置(无论将其拖动到何处)。出于我的目的,它应该保留在其原始位置,因此我想我也需要传递所单击图像的坐标。不确定如何...
到目前为止,我的工作位代码:
import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(MyApp());
class myCard extends StatefulWidget {
final Offset position;
final double rotation;
final String cardImage;
final String value;
final Function bringToTop;
myCard({
this.position,
this.rotation,
this.cardImage,
this.value,
this.bringToTop
});
@override
myCardState createState() => myCardState();
}
class myCardState extends State<myCard> {
Offset position;
@override
void initState() {
position = widget.position;
super.initState();
}
@override
Widget build(BuildContext context) {
return Positioned(
left: position.dx,
top: position.dy,
child: GestureDetector(
onPanStart: (details) {
widget.bringToTop(widget);
},
onPanUpdate: (details) {
setState(() {
position = Offset(position.dx + details.delta.dx,
position.dy + details.delta.dy);
});
},
child: _buildPart()
),
);
}
Widget _buildPart() {
return RotationTransition(
turns: new AlwaysStoppedAnimation(widget.rotation),
child: Container(
width: 450,
height: 600,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(widget.cardImage),
fit: BoxFit.cover),
),
),
);
}
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
Random random = new Random();
int min = -5;
int max = 5;
int randomNumber1 = random.nextInt(max - min);
int randomNumber2 = random.nextInt(max - min);
int randomNumber3 = random.nextInt(max - min);
class _MyHomePageState extends State<MyHomePage> {
List<myCard> dragParts = [];
double r1 = (min + randomNumber1) / 360;
double r2 = (min + randomNumber2) / 360;
double r3 = (min + randomNumber3) / 360;
@override
void initState() {
dragParts = [];
dragParts.add(myCard(
position: Offset(700, 50),
rotation: r1,
cardImage: "assets/images/1.png",
value: "1",
bringToTop: this.bringToTop,
));
dragParts.add(myCard(
position: Offset(700, 50),
rotation: r2,
cardImage: "assets/images/2.png",
value: "2",
bringToTop: this.bringToTop,
));
dragParts.add(myCard(
position: Offset(700, 50),
rotation: r3,
cardImage: "assets/images/4.png",
value: "4",
bringToTop: this.bringToTop,
));
super.initState();
}
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/backgrnd.png"), fit: BoxFit.cover),
),
child: Stack(
children: dragParts,
),
);
}
void bringToTop(Widget widget) {
setState(() {
dragParts.remove(widget);
dragParts.add(widget);
});
}
}