编辑

我没有提供更多信息，因为我很确定这不是应该怎么做的。但是我会分享我尝试过的一切。

我的原始按钮看起来像这样：

RaisedButton(
  child: Text("Login")
)

我有一个异步登录功能，该功能返回一个Future<bool>来指示登录是否成功。

Future<bool> logMeIn() async {
  // login tasks here
}

我要做的是将按钮更改为以下内容，并在按下按钮时运行logMeIn()，并在完成后将其更改回纯文本版本：

RaisedButton(
  child: CircularProgressIndicator()
  onPressed: () {}
)

我尝试过的

我尝试添加一个logging_in布尔值作为对其进行控制的标志，这里我用纯文本 StaticButton（）调用按钮，另一个名为 ActiveButton ：

然后我用FutureBuilder包裹ActiveButton：

logging_in ? FutureBuilder(
  future: logMeIn(),
  builder: (_, snapshot) {
    if(snapshot.hasData)
      setState(() {
        logging_in = false;
      });
    else
      return ActiveButton();
  }
) : StaticButton();

当我按下按钮时，它将setState并设置logging_in = true。

StaticButton：

RaisedButton(
  child: Text("Login"),
  onPressed: () {
    setState(() {
      logging_in = true;
    });
  }
)

以上是我尝试过的。应该能达到效果，但绝对不是优雅。有没有更好的方法来实现这一目标？

Answer 1

您拥有的不是遥不可及。您有一个logging_in变量，可以告诉您何时显示CircularProgressIndicator，这是一个很好的开始。唯一的是FutureBuilder在这里没有用。它旨在从需要在用户界面中显示的Future中检索数据。

您需要做的是在“静态按钮”的logMeIn中调用onPressed，如下所示：

StaticButton：

RaisedButton(
  child: Text("Login"),
  onPressed: () async {
    setState(() {
      logging_in = true;
    });
    await logMeIn();
    setState(() {
      logging_in = false;
    });
  }
)

logging_in更改时，您无需关闭整个按钮，只需关闭按钮的子按钮即可。

StaticButton（带有子开关）：

RaisedButton(
  child: logging_in ? CircularProgressIndicator() : Text("Login"),
  onPressed: () async {
    setState(() {
      logging_in = true;
    });
    await logMeIn();
    setState(() {
      logging_in = false;
    });
  }
)

您可能还想添加另一个bool，以防止在加载按钮时多次单击。作为在抖动中使用FutureBuilder以及基本上任何其他builder的注意事项，您总是需要从builder函数返回一个小部件，您的当前实现不这样做。

如何通过按钮与UI和异步功能进行交互？

编辑

我尝试过的

1 个答案: