Question

目标：按下一个按钮，使其切换到具有动画过渡的另一页。

为此，我正在使用AnimatedSwitcher。

下面是我的代码：

class WelcomeScreenSwitcher extends State<RandomWords>{
  Widget calledWidget;

  void switchPage(int newNumber, context) {
    if (newNumber == 1) {
      setState(() {calledWidget = welcomeScreen(context);},);
    } else if (newNumber == 2) {
      setState(() {calledWidget = learnMoreScreen(context);},);}
    }

  @override
  Widget build(BuildContext context) {
    if (calledWidget == null) {
      switchPage(1, context);
    }
    return AnimatedSwitcher(
      duration: Duration(milliseconds: 5000),
      child: calledWidget,
    );

  Widget welcomeScreen(context){
    return Scaffold({body: Column(children: [
      RaisedButton(onPressed: () {switchPage(2, context);}, child: Text('B'),),],
        );
      });
    }

  Widget learnMoreScreen(context){
    return Scaffold({body: Column(children: [
      RaisedButton(onPressed: () {switchPage(2, context);}, child: Text('B'),),],
        );
      });
    }
  }

该代码正常运行。实际上，它确实在两个页面之间切换，但是没有动画。

在开发过程中的某个时候，我正在获取动画，但是随后它停止了发生，我找不到原因。我不记得更改任何有关如何调用AnimatedSwitcher的内容。

如果有什么用，热重载也不再起作用。我需要重新启动应用程序才能进行任何更改注册。在开始使用AnimatedSwitcher之前，它通常可以正常工作。

Answer 1

如果您要切换的新窗口小部件与先前窗口小部件的类型相同，请将key属性设置为另一个值以获取该动画

例如，此AnimatedSwitcher不起作用：

  AnimatedSwitcher(
    duration: const Duration(milliseconds: 1000),
    child: (condition)
        ? Container(
            width: 100,
            height: 100,
            color: Colors.red,
          )
        : Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
  );

因为我们要在两个Container之间进行切换，而AnimatedSwitcher无法理解它们之间的区别，所以不会为它们的切换设置动画。如果我们在这些key中设置了不同的Container属性，那么AnimatedSwitcher可以理解它们是不同的，并且可以为其切换设置动画。

就像这样：

  AnimatedSwitcher(
    duration: const Duration(milliseconds: 1000),
    child: (condition)
        ? Container(
            key: ValueKey<int>(0),
            width: 100,
            height: 100,
            color: Colors.red,
          )
        : Container(
            key: ValueKey<int>(1),
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
  );

Answer 2

您可以尝试

class _AniSwitchState extends State<AniSwitch> {
  Widget calledWidget;

  @override
  Widget build(BuildContext context) {
    void switchPage(int newNumber) {
      if (newNumber == 1) {
        setState(() {calledWidget = WelcomeScreen();},);
      } else if (newNumber == 2) {
        setState(() {calledWidget = LearnMoreScreen();},);}
    }

      if (calledWidget == null) {
        switchPage(1);
      }

    return Column(
      children: <Widget>[
        AnimatedSwitcher(
          duration: Duration(milliseconds: 2000),
          child: calledWidget
        ),
        RaisedButton(
          child: const Text('Increment'),
          onPressed: () {
            setState(() {
              switchPage(2);
            });
          },
        ),
      ],
    );
  }
}

class WelcomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text("Welcome"),
      ],
    );
  }
}

class LearnMoreScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text("hello world"),
      ],
    );
  }
}

AnimatedSwitcher不能按预期工作吗？窗口小部件已更改但没有动画

2 个答案: