如何用Hero为AnimatedIcon设置动画？

Question

我想在路线导航过程中使用Hero动画AnimatedIcon。我该怎么办？

# sample data
df = pd.DataFrame({'prices': [{'1':54, '2':22, '3':12}, 
                              {'1':54, '2':22, '3':12},
                              {'1':44, '2':41, '3':11}],
                   'flag':[1,2,3]})

# remove duplicates
df  = (pd.concat([df, df.prices.apply(pd.Series)], axis=1)
       .drop_duplicates(subset=['1','2','3'], keep='last')
       .drop(['1','2','3'], axis=1))

                        prices  flag
1  {'1': 54, '2': 22, '3': 12}     2
2  {'1': 44, '2': 41, '3': 11}     3

应用栏如下：now

AnimatedIcon的动画如下：AnimatedIcon

我想要的是在路线导航过程中显示AnimatedIcon的动画，而不是淡入和淡出或其他动画。

Answer 1

第一件事。如果您没有Material祖先小部件，则在屏幕之间进行路由时可能会遇到异常。为防止这种情况，您可以将IconButton包裹在具有属性Material的{​​{1}}中。

第二，使用color: Colors.transparent为屏幕之间的前导按钮设置动画没有错，但是，由于位置完全相同，并且没有从开始设置动画的效果，因此您不会注意到差异-到。结果是这样的：

但是，如果您实际上在屏幕之间更改了Hero的位置，则会得到预期的IconButton动画。