animation - 有没有办法修改 Flare 中的初始动画状态?
问题描述
我创建了一个 Flare 动画,它只是 Flutter 应用程序中的一个订阅/取消订阅按钮。
按下按钮时动画会运行,并且一切看起来都很好,例如,如果用户订阅了,则在用户按下按钮后按钮会显示为“已订阅”。但是,如果用户已经订阅并返回到相关屏幕,则按钮不处于订阅状态。它保持原始的“订阅”状态
我正在使用 Flare 文件中的单个画板。它有两个动画,订阅和取消订阅,它们听起来像。单击按钮时动画会正确播放,但是重新加载屏幕时不会保留状态。例如,如果我已订阅,然后离开应用程序并返回,我会看到“订阅”按钮,即使我已经这样做了。
我不确定我是否需要为此设置 2 个单独的艺术板,或者是否有更好的方法?
class SubUnsubButton extends StatefulWidget {
final Fight fight;
const SubUnsubButton({
Key key,
@required this.fight,
}) : super(key: key);
@override
_SubUnsubButtonState createState() => _SubUnsubButtonState();
}
class _SubUnsubButtonState extends State<SubUnsubButton>
with TickerProviderStateMixin {
FlareControls flareController = FlareControls();
String animation;
@override
initState() {
super.initState();
widget.fight.userIsSubscribed ? animation = 'Sub' : animation = 'Unsub';
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Container(
height: 50,
child: FlatButton(
child: FlareActor(
"assets/animations/FightBell.flr",
artboard: "SubUnsub",
controller: flareController,
fit: BoxFit.contain,
animation: animation,
sizeFromArtboard: true,
),
onPressed: () {
// If not subsribed
FirebaseUser user = Provider.of<FirebaseUser>(context);
if (!widget.fight.userIsSubscribed) {
animation = 'Sub';
} else {
animation = 'Unsub';
}
},
),
),
],
),
);
}
}
解决方案
你不应该需要第二个画板。解决此问题的最简单方法是添加一个 initState 方法并根据您在 onPressed 回调中的相同逻辑设置动画值。请注意,onPressed 中动画值的更改实际上应该在setState调用中完成,以确保在动画值更改时更新小部件。
一种通常更简洁的方法是使用类似 isSubscribed 的布尔值,而不是将 isSubscribed 逻辑封装到另一个(战斗)对象中。这将允许颤振小部件系统在 isSubscribed 更改时自动调用State类上的 didUpdateWidget。然后,您可以通过调用 setState 并更改动画值来响应该更改。当调用 onPressed 时,您可能会传递一些其他要调用的回调,以便使用此 SubUnsubButton 的小部件可以更改 isSubscribed 值。
您可能根本不需要有状态的小部件,请查看 Flare-Flutter 存储库中的复选框示例。它会在启动时显示带有随机选择值的复选框列表,以确定它们是否被选中。SmileySwitch复选框类被实现为无状态小部件,而实现Settings类只是遍历值,为每个值创建一个 SmileySwitch,然后通过根据需要更改值来响应 onToggle 回调。这应该与您尝试执行的操作非常相似。
推荐阅读
- java - Python Socket 仅在套接字关闭时获取信息
- facebook-messenger - 对所有消息做出反应的 Messenger 机器人
- botframework - 在自托管服务中托管 MS Bot Framework Composer c# 项目
- angular - 在 kendo UI Angular 中更改布尔过滤器
- python - 将语音转换为文本的 Python SpeechRecognition 会给出错误的输出
- python - 多个类对象“链接”?
- javascript - 在一个 Ajax 中将多个序列化表单发布到控制器 C#?
- ruby - 无法在 macOS Mojave 上使用自定义 Ruby 版本运行 gem
- windows - 为什么 cmd.exe 和 PowerShell 中 ProgramFiles 变量的值不同?
- angular - Angular-CLI 代理不会通过 Docker 连接(ECONNREFUSED)