允许溢出容器超过屏幕

Question

我在

AnimatedContainer

小部件中有

Stack

。我想改变

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'),
          ),
        ],
      ),
    );
  }

我尝试更改宽度/高度，但它不起作用。

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'),
          ),
        ],
      ),
    );
  }

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;
}