Question

在我的代码中，当应用程序无法从Web服务器获取数据时，可以显示reload按钮，此后，当我单击reload按钮时，我的方法可以从再次出现在Web服务器上，我的问题是在执行此操作后，我无法使用此数据重新加载UI，并且始终显示重新加载按钮

class _LessonDetailState extends BaseState<LessonDetail> {
  String monthKey;
  String lessonFileKey;
  int monthId;

  _LessonDetailState(this.monthKey, this.lessonFileKey,this.monthId);
  Future<PlayLessonResponse> _myResponse;
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey = new GlobalKey<RefreshIndicatorState>();
  @override
  void initState() {
    Future.delayed(Duration.zero,() {
      _myResponse = _getLessonDetail(context, monthKey, lessonFileKey);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        body: FutureBuilder<PlayLessonResponse>(
            future: _myResponse,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if(snapshot.hasData){
                   //...
                }else{
                  return RefreshIndicator(
                    key: _refreshIndicatorKey,
                    child: Container(
                      width: double.infinity,
                      height: double.infinity,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.all(15),
                            child: Text(
                              'Error',
                              style: AppTheme.of(context).caption(),
                            ),
                          ),
                          RaisedButton(
                              color: Colors.white,
                              child: Text(
                                'Reload',
                                style: AppTheme.of(context).caption(),
                              ),
                              onPressed: (){
                                return _getLessonDetail(context, monthKey, lessonFileKey);
                              },
                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0))),
                        ],
                      ),
                    ),
                    onRefresh: (){
                      return _getLessonDetail(context, monthKey, lessonFileKey);
                    },
                  );
                }
              }

              return Center(
                child: CircularProgressIndicator(),
              );
            }),
      ),
    );
  }

  Future<PlayLessonResponse> _getLessonDetail(BuildContext context, String monthKey, String lessonFileKey) async {
    try{
      //...
      return PlayLessonResponse.fromJson(response.body);
    }catch(error){
      print(error);
      return null;
    }
  }
}

Answer 1

在onRefresh的_getLessonDetail()函数中，您应该调用setState()来重建小部件

 setState(() {
  _myResponse = _getLessonDetail(context, monthKey, lessonFileKey);
 });

刷新FutureBuilder后Flutter重新加载Ui

1 个答案: