dart Flutter幻灯片过渡在开始返回中工作，而不是在点击时返回

eqqqjvef 于 2023-01-10 发布在 Flutter

关注(0)|答案(2)|浏览(125)

我需要的是，当页面加载容器去右边的动画从中间。这是工作正常，现在我需要如果我点击左边的容器去左边的动画现在它只是 Flink ，并显示出幻灯片的权利。
我创建了一个虚拟代码

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

  @override
  State<changeit> createState() => _changeitState();
}

class _changeitState extends State<changeit>
    with SingleTickerProviderStateMixin {
  late final AnimationController controller = AnimationController(
    vsync: this,
    duration: Duration(seconds: 1),
  );

  bool coin10 = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 200,
          ),
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                    onTap: () {
                      setState(() {
                        coin10 = true;
                      });
                    },
                    child: Text('LLLLL')),
                SlideTransition(
                  position: Tween<Offset>(
                          begin: Offset(0, 0), end: Offset(coin10 ? -2 : 2, 0))
                      .animate(controller),
                  child: Container(
                    color: Colors.red,
                    height: 40,
                    width: 40,
                  ),
                ),
                GestureDetector(
                    onTap: () {
                      setState(() {
                        coin10 = false;
                      });
                    },
                    child: Text('RRRRR'))
              ],
            ),
          )
        ],
      ),
    );
  }
}

我不知道为什么它不去动画我尝试使用偏移动画尝试改变它的功能，也尝试了点击转发，因为它的工作开始，但没有什么是为我工作。

dart

来源：https://stackoverflow.com/questions/75038302/flutter-slidetransition-working-in-start-back-not-going-back-on-click

2条答案

按热度按时间

kg7wmglp1#

请尝试以下代码：**
预期输出为：

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

  @override
  State<changeit> createState() => _changeitState();
}

class _changeitState extends State<changeit>
    with SingleTickerProviderStateMixin {
  late final AnimationController controller = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 1),
  );

  bool coin10 = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const SizedBox(
            height: 200,
          ),
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                    onTap: () {
                      setState(() {
                        controller.reverse();
                      });
                    },
                    child: const Text('LLLLL')),
                SlideTransition(
                  position: Tween<Offset>(
                          begin: const Offset(0, 0),
                          end: Offset(coin10 ? -2 : 2, 0))
                      .animate(controller),
                  child: Container(
                    color: Colors.red,
                    height: 40,
                    width: 40,
                  ),
                ),
                GestureDetector(
                    onTap: () {
                      setState(() {
                        controller.forward();
                      });
                    },
                    child: const Text('RRRRR'))
              ],
            ),
          )
        ],
      ),
    );
  }
}

赞(0）回复(0）举报 2023-01-10

66bbxpm52#

当尝试运行动画&按需运行动画时，您需要以编程方式执行动画。
当点击左或右按钮时，你必须调用控制器上的forward()。

setState(() {
   coin10 = true;
});
controller.forward(from: 0);

建议

但是你当前的代码只能从中心到左或者从中心到右运行。要从square的当前位置开始动画，移动到最右边或者最左边，你需要在变量中维护位置。像这样修改它。
//声明变量

double position = 0;

//在初始化状态内部

controller.addStatusListener((status) {
      if(status == AnimationStatus.completed) {
        setState((){
          position = coin10 ? -2 : 2;
        });
      }
   });

从位置变量开始更改动画

begin: Offset(position, 0)

赞(0）回复(0）举报 2023-01-10

我来回答

dart Flutter幻灯片过渡在开始返回中工作，而不是在点击时返回

2条答案

相关问题

热门标签

最新问答