flutter 中的幻灯片动画未按预期工作

Question

我有一个小部件放置在堆栈小部件中。我想从右下角到底部中心对其进行动画处理。但无论我做什么，它都不起作用。下面是代码

import 'package:flutter/material.dart';

class ToastPage extends StatefulWidget {
  const ToastPage({super.key});

  @override
  State<ToastPage> createState() => _ToastPageState();
}

class _ToastPageState extends State<ToastPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _animation =
        Tween<Offset>(begin: const Offset(1, 1), end: const Offset(0, 1))
            .animate(_controller);
    super.initState();
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          children: [
            MaterialButton(
              onPressed: () {
                _controller.reset();
                _controller.forward();
              },
              child: const Text("Animate"),
            ),
            Positioned(
              right: 10,
              bottom: 80,
              left: 0,
              child: Row(
                children: [
                  SlideTransition(
                    position: _animation,
                    child: Container(
                      height: 70,
                      width: 200,
                      color: Colors.green,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我尝试过为正在工作的小部件提供完整宽度。但整个区域都被绿色覆盖。我实际上想要一个宽度为 200、高度为 70 的盒子来制作动画。 任何帮助将不胜感激

Answer 1

问题是您的 70x200 容器位于

Row

中，并且它将左对齐，因此它将从中心到左进行动画处理。 要使其从右到中心呈现动画非常简单，只需将

Row

小部件内的

Positioned

更改为

UnconstrainedBox

小部件，这样它将不受父布局的约束，并使用容器中的约束大小（70x200）

这是结果：

最终代码如下。

*我上面提到的更改已标记为注释。

class ToastPage extends StatefulWidget {
  const ToastPage({super.key});

  @override
  State<ToastPage> createState() => _ToastPageState();
}

class _ToastPageState extends State<ToastPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _animation =
        Tween<Offset>(begin: const Offset(1, 1), end: const Offset(0, 1))
            .animate(_controller);
    super.initState();
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          children: [
            MaterialButton(
              onPressed: () {
                _controller.reset();
                _controller.forward();
              },
              child: const Text("Animate"),
            ),
            Positioned(
              right: 10,
              bottom: 80,
              left: 0,
              child: UnconstrainedBox( // <----- Change from row to this
                child: SlideTransition(
                  position: _animation,
                  child: Container(
                    height: 70,
                    width: 200,
                    color: Colors.green,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

希望可以解决您的问题😉