0

我创建了一个 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';

                }
              },
            ),
          ),
        ],
      ),
    );
  }
}
4

2 回答 2

0

你不应该需要第二个画板。解决此问题的最简单方法是添加一个 initState 方法并根据您在 onPressed 回调中的相同逻辑设置动画值。请注意，onPressed 中动画值的更改实际上应该在setState调用中完成，以确保在动画值更改时更新小部件。

一种通常更简洁的方法是使用类似 isSubscribed 的布尔值，而不是将 isSubscribed 逻辑封装到另一个（战斗）对象中。这将允许颤振小部件系统在 isSubscribed 更改时自动调用State类上的 didUpdateWidget。然后，您可以通过调用 setState 并更改动画值来响应该更改。当调用 onPressed 时，您可能会传递一些其他要调用的回调，以便使用此 SubUnsubButton 的小部件可以更改 isSubscribed 值。

您可能根本不需要有状态的小部件，请查看 Flare-Flutter 存储库中的复选框示例。它会在启动时显示带有随机选择值的复选框列表，以确定它们是否被选中。SmileySwitch复选框类被实现为无状态小部件，而实现Settings类只是遍历值，为每个值创建一个 SmileySwitch，然后通过根据需要更改值来响应 onToggle 回调。这应该与您尝试执行的操作非常相似。

于 2019-10-27T01:00:54.833 回答
0

正如 Luigi 在他的链接示例中所展示的，snapToEnd 耀斑演员属性是解决问题所需要的全部。首次将动画渲染到正确状态时将其设置为 true。然后，当您获得应该导致动画运行的用户输入时，将其切换为 false。

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;
  bool _snapToEnd

  @override
  initState() {
    super.initState();
    _snapToEnd = true
    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) {
                    setState(() {
                      _snapToEnd = false;
                      animation = 'Sub';
                    });
                } else {
                    setState(() {
                      _snapToEnd = false;
                      animation = 'Unsub';
                    })

                }
              },
            ),
          ),
        ],
      ),
    );
  }
}
于 2019-10-31T15:34:10.883 回答