时间戳

首页 > 解决方案 > 为什么这个 AnimatedSwitcher 不对变化进行动画处理？

flutter - 为什么这个 AnimatedSwitcher 不对变化进行动画处理？

问题描述

我正在尝试为文本设置动画以在两个值之间切换

AnimatedSwitcher(
                  duration: Duration(milliseconds: 400),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      (_smallTitle == true) ? Text('Text1/', style:TextStyle(fontSize: 12.0)) : Container(),
                      Text(
                        (_smallTitle == false) ? _largeHeaderText : _smallHeaderText,
                      ),
                    ],
                  ),
                ),

当我触发“_smallTitle”布尔值的更改时，此代码确实成功切换了文本。但是变化根本没有动画

知道我做错了什么吗？

标签： flutterdart

解决方案

主要工作AnimatedSwitcher是在孩子之间制作动画。但在这种情况下，我们有一个相同的小部件 ( column) 作为孩子。这就是为什么我们看不到动画。我们需要根据条件传递一个孩子。喜欢

AnimatedSwitcher(
            duration: Duration(seconds: 4),
            child: _smallTitle
                ? Column(
                    key: ValueKey("child1"), // provide key
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text(
                        'Text1/',
                        style: TextStyle(fontSize: 12.0),
                      ),
                      Text(
                        _smallHeaderText,
                      )
                    ],
                  )
                : Column(
                    children: [
                      Text(_largeHeaderText),
                    ],
                  )),

但是我们可以用key.

AnimatedSwitcher(
          duration: Duration(milliseconds: 400),
          child: Column(
            key: ValueKey(_smallTitle ? "small child Key" : "largeChild key"),
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              (_smallTitle == true)
                  ? Text('Text1/', style: TextStyle(fontSize: 12.0))
                  : Container(),
              Text(
                (_smallTitle == false) ? _largeHeaderText : _smallHeaderText,
              ),
            ],
          ),
        ),

单独key 为孩子使用。

推荐阅读