如何在动画容器之外剪辑图像？

Question

我是 Flutter 动画的新手，正在尝试创建以下设计。


import 'package:flutter/material.dart';
import 'package:invest_app_ui/constants/colors.dart';
import 'package:invest_app_ui/constants/images.dart';

class Scratch extends StatefulWidget {
  const Scratch({Key? key}) : super(key: key);

  @override
  _ScratchState createState() => _ScratchState();
}

class _ScratchState extends State<Scratch> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: GestureDetector(
            onTap: () {
              setState(() {
                selected = !selected;
              });
            },
            child: AnimatedContainer(
              duration: Duration(seconds: 2),
              curve: Curves.decelerate,
              height: 208,
              width: selected ? 200 : 500,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                  Radius.circular(15),
                ),
                gradient: AppColors.euroCardGradient,
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                //crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(
                          'Gold',
                          style:
                              Theme.of(context).textTheme.headline6!.copyWith(
                                    fontSize: 18,
                                    color: AppColors.brown,
                                  ),
                        ),
                        Text(
                          '6% return',
                          style:
                              Theme.of(context).textTheme.subtitle2!.copyWith(
                                    fontSize: 13,
                                    color: AppColors.brown,
                                  ),
                        ),
                      ],
                    ),
                  ),
                  Image.asset(
                    Images.euroCoin,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

问题是当我把卡片变小的时候，硬币从盒子里出来了。我想让硬币在卡片变小的时候被剪掉

有人可以帮忙制作这个动画吗？

我已经尝试在 AnimatedContainer 中使用 ClipRect 属性但我仍然在调试日志中收到溢出错误。

如果有人需要，这里是coin

Answer 1

替换以下内容

Image.asset(
  Images.euroCoin,
),

与：

Flexible(
   child: SingleChildScrollView(
   clipBehavior: Clip.antiAlias,
   physics: NeverScrollableScrollPhysics(),
   scrollDirection: Axis.horizontal,
   child: Image.asset(Images.euroCoin),
)

Answer 2

尝试使用不可滚动的 ListView（当然是水平的）而不是行

  Child: AnimatedContainer(
    duration: Duration(seconds: 2),
    curve: Curves.decelerate,
    height: 208,
    width: selected ? 200 : 500,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(
        Radius.circular(15),
      ),
      gradient: AppColors.euroCardGradient,
    ),
    child: Expanded(
      ListView(physics: NeverScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Gold',
                  style:
                  Theme.of(context).textTheme.headline6!.copyWith(
                    fontSize: 18,
                    color: AppColors.brown,
                  ),
                ),
                Text(
                  '6% return',
                  style:
                  Theme.of(context).textTheme.subtitle2!.copyWith(
                    fontSize: 13,
                    color: AppColors.brown,
                  ),
                ),
              ],
            ),
          ),
          Image.asset(
            Images.euroCoin,
          ),
        ],
      ),
    ),
  );

如何在动画容器之外剪辑图像？

How to clip image outside of Animated Container in flutter?

flutter

flutter-layout

flutter-animation