Question

我正在使用Flutter创建英雄动画。我已经将svg圆定位在卡中，并且圆溢出了卡边框，并且在不过渡时隐藏了溢出的部分，这也是我希望在动画过程中出现的方式。

我一直在寻找嵌套英雄的方法，以将圆圈保留在卡片中，但似乎他们已经取消了对此的支持。

在动画中，圆圈会在卡片边界上溢出，如您在链接上看到的那样：

是否可以通过某种方式剪裁圆圈，以免圆圈溢出卡？

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

...

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.red,
    body: Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        children: [SizedBox(height: 100), MyCard()],
      ),
    ),
  );
}

class MyCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double cardWidth = MediaQuery.of(context).size.width - 40;
    double cardHeight = cardWidth * 0.629;
    double circleWidth = cardWidth * 0.495;

    return GestureDetector(
      onTap: () {
        Navigator.of(context).push(
          PageRouteBuilder(
            transitionDuration: Duration(milliseconds: 400),
            pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
              return MyCardFullpage();
            },
            transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
              return Align(
                child: FadeTransition(
                  opacity: new CurvedAnimation(parent: animation, curve: Curves.easeOut),
                  child: GestureDetector(
                      onTapDown: (details) {
                        Navigator.pop(context);
                      },
                      child: child),
                ),
              );
            },
          ),
        );
      },
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [BoxShadow(color: Color(0x16000000), offset: Offset(0, 4), blurRadius: 6)],
        ),
        child: Stack(
          children: [
            Hero(
              tag: 'mycard-background',
              transitionOnUserGestures: true,
              child: Container(
                  decoration: BoxDecoration(borderRadius: BorderRadius.circular(10), color: Colors.blueGrey), width: cardWidth, height: cardHeight),
            ),
            Positioned(
              width: circleWidth,
              height: circleWidth,
              left: -0.092 * cardWidth,
              top: -0.215 * cardHeight,
              child: Hero(tag: 'mycard-circle1', child: SvgPicture.asset('assets/icons/card/circle.svg')),
            ),
            Positioned(
              width: circleWidth,
              height: circleWidth,
              left: 0.685 * cardWidth,
              top: -0.220 * cardHeight,
              child: Hero(tag: 'mycard-circle2', child: SvgPicture.asset('assets/icons/card/circle.svg')),
            ),
            Positioned(
              width: circleWidth,
              height: circleWidth,
              left: 0.600 * cardWidth,
              top: 0.344 * cardHeight,
              child: Hero(tag: 'mycard-circle3', child: SvgPicture.asset('assets/icons/card/circle.svg')),
            ),
          ],
        ),
      ),
    );
  }
}

class MyCardFullpage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double fullWidth = MediaQuery.of(context).size.width;
    double fullHeight = MediaQuery.of(context).size.height;
    double circleWidth = fullHeight * 0.495;

    return Scaffold(
      body: Stack(
        children: [
          Hero(
            tag: 'mycard-background',
            child: Container(
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(0), color: Colors.blueGrey), width: fullWidth, height: fullHeight),
          ),
          Positioned(
            width: circleWidth,
            height: circleWidth,
            left: -0.592 * fullWidth,
            top: -0.215 * fullHeight,
            child: Hero(tag: 'mycard-circle1', child: SvgPicture.asset('assets/icons/card/circle.svg')),
          ),
          Positioned(
            width: circleWidth,
            height: circleWidth,
            left: 0.785 * fullWidth,
            top: -0.25 * fullHeight,
            child: Hero(tag: 'mycard-circle2', child: SvgPicture.asset('assets/icons/card/circle.svg')),
          ),
          Positioned(
            width: circleWidth,
            height: circleWidth,
            left: 0.500 * fullWidth,
            top: 0.644 * fullHeight,
            child: Hero(tag: 'mycard-circle3', child: SvgPicture.asset('assets/icons/card/circle.svg')),
          ),
        ],
      ),
    );
  }
}

防止英雄在过渡期间溢出同级英雄

0 个答案: