代码之家  ›  专栏  ›  技术社区  ›  harunB10

如何在加载值之前显示循环进度指示器?

  •  -1
  • harunB10  · 技术社区  · 4 年前

    我有一个Widget,在第一次点击时显示错误页面,我试图达到的值为空。。。当我第二次打开该Widget时,它就会工作,因为第一次点击时,值就会加载,屏幕也会正确显示。在加载值之前,我如何使用户看到循环进度指示器而不是错误页面?

    这是Widget:

      Widget build(BuildContext context){
        var user = Provider.of<UserRepository>(context);
        user.cacheGet();
        return Scaffold(
          appBar: AppBar(
            title: Text("Last Conversation"),
          ),
          body: user.conversationID.values == null
              ? Center(
                  child: CircularProgressIndicator(),
                )
              : Container(
                  child: _myListView(context, user.conversationID.values),
                ),
        );
      }
    

    这显示错误,因为 user.conversationID.values null 。它是通过装载的 cacheGet( ) 具有类型的函数 Future <bool> …因此,如果我返回并再次打开同一屏幕(小部件),则会加载该值,并且不会显示任何错误。我尝试使用三元运算符,但在这种情况下它不起作用。

    编辑

    这是 cacheGet 功能。

      Future<bool> cacheGet() async {
        String token = await getToken();
        var body = jsonEncode({"token": token, "userID": this.firebaseUser.uid});
        var res = await http.post((baseUrl + "/cacheGet"), body: body, headers: {
          "Accept": "application/json",
          "content-type": "application/json"
        });
    
        if (res.statusCode == 200) {
          this.conversationID = Conversations.fromJson(json.decode(res.body));
          return true;
        }
    
        return false;
      }
    
    2 回复  |  直到 4 年前
        1
  •  1
  •   Tipu Sultan    4 年前

    只需使用未来构建器包装您的小部件。以下是一个示例代码:

    FutureBuilder<bool>(
            future: user.cacheGet(),
            builder: (BuildContext context, AsyncSnapshot snapshot){
              if(snapshot.hasData){
                return user.conversationID.values == null
                    ? Center(
                  child: CircularProgressIndicator(),
                )
                    : Container(
                  child: _myListView(context, user.conversationID.values),
                );
              }else{
                return Container();
              }
            },
          )
    
        2
  •  0
  •   AWhitford    4 年前

    可能是例行公事 user.cacheGet(); 不应该在里面做 build() ,但可能 initState() 这将是一个更好的地方。

    我建议你看看 FutureBuilder (或 StreamBuilder ). 想想你的价值可能是多少 未来 ,则您的构建例程将使用 FutureBuilder 这将显示 CircularProgressIndicator() 当它正在等待数据时,然后一旦你有了数据(或者第三种情况是在获取数据时出错),你就可以随心所欲了。未来应该在中初始化 initState() .