更改图像的Z顺序

时间:2019-03-11 15:36:04

标签: dart flutter

我有三张图像,这些图像堆叠在一起并稍微随机旋转。每个图像都可以放置在屏幕上的任何位置,但是一旦触摸到下面的图像,我希望它跳到前景并将其他图像放在下面(只是“顶到顶部”)。关于如何在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);
    });
  }
}

0 个答案:

没有答案