允许溢出容器超出屏幕

Question

我有一个位于Stack小部件内的AnimatedContainer。我想改变MyAnimatedContainer的缩放比例，并使其比屏幕更大，就像下面的图片一样：

我该如何做到这一点？

代码：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [            
          AnimatedContainer(
            height: _width,
            width: _height,
            duration: const Duration(milliseconds: 500),
            child: Image.asset('assets/Asset 2.png'),
          ),
        ],
      ),
    );
  }

我试图更改宽度/高度，但是没有效果。

- MohammadSadra Kafiri

Answer 1

Stack从其父级传入的约束使用stackfit.expand进行了收紧， 因此，我希望您使用stackfit.loose，然后更改width和height。 只需尝试一下，看看是否可行。

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.loose,
        children: [            
          AnimatedContainer(
            height: _width,
            width: _height,
            duration: const Duration(milliseconds: 500),
            child: Image.asset('assets/Asset 2.png'),
          ),
        ],
      ),
    );
  }

- Manishyadav

---

谢谢。我会尝试这个。 - Sadra Kafiri

Answer 2

@manishyadav 的解决方案对我没有用。我的动画总是受设备大小的限制。尽管如此，我还是实现了 @mohammadsadra-kafiri 在问题中描述的内容：

允许容器超出屏幕

我使用了 CustomPainter 和 AnimationController。代码中的 Container 实际上是 RippleBackground，这里是完整的示例：

import 'package:flutter/material.dart';

class RippleBackground extends StatefulWidget {
  const RippleBackground({required this.rippleColor, super.key});

  final Color rippleColor;

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

class RippleBackgroundState extends State<RippleBackground> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 400),
      vsync: this,
    )..forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: const Size(double.infinity, double.infinity),
      painter: _RipplePainter(
        animation: _controller,
        rippleColor: widget.rippleColor,
      ),
    );
  }
}

class _RipplePainter extends CustomPainter {
  final Animation<double> animation;

  _RipplePainter({required this.animation, required this.rippleColor})
      : _path = Path(),
        _paint = Paint(),
        super(repaint: animation);

  final Color rippleColor;
  final Path _path;
  final Paint _paint;

  @override
  void paint(Canvas canvas, Size size) {
    _paint
      ..color = rippleColor
      ..style = PaintingStyle.fill;

    var centralPoint = Offset(size.width / 2, size.height / 2);
    var radiusOfCircumscribedCircle = centralPoint.distance;

    var value = animation.value;
    if (value >= 0.0 && value <= 1.0) {
      canvas.drawPath(
        _path
          ..addOval(
            Rect.fromCircle(
              center: centralPoint,
              radius: radiusOfCircumscribedCircle * value,
            ),
          ),
        _paint,
      );
    }
  }

  @override
  bool shouldRepaint(_RipplePainter oldDelegate) => false;
}

- PrzemekTom