Flutter 避免多次运行 FutureBuilder

Question

在我作为新屏幕的简单代码中，不幸的是 FutureBuilder 工作并从方法中获取数据两次!!

我不确定是什么问题，我该如何避免

class LessonDetail extends StatefulWidget {
  final String monthKey;
  final String lessonFileKey;

  LessonDetail({@required this.monthKey, @required this.lessonFileKey});

  @override
  State<StatefulWidget> createState() {
    return _LessonDetailState(monthKey, lessonFileKey);
  }
}

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

  _LessonDetailState(this.monthKey, this.lessonFileKey);


  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        body: FutureBuilder(
            future: _getLessonDetail(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                PlayLessonResponse response = snapshot.data;
                print(response);
              }

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

  Future<PlayLessonResponse> _getLessonDetail() async {

    AudioList audioList = AudioList(
      'http://www.sample.com',
      'aaaaa'
    );
    List<AudioList> lst = [audioList,audioList,audioList];

    PlayLessonResponse response = PlayLessonResponse(
        2,
        '',
        'http://www.sample.com',
        '2',
        lst,
        1,
        'ssss'
    );


    print('++++++++++++++++++++');
    return response;
  }
}

BaseState类内容:

abstract class BaseState<T extends StatefulWidget> extends State {
  final Connectivity _connectivity = Connectivity();

  StreamSubscription<ConnectivityResult> _connectivitySubscription;
  bool isOnline = true;
  Future<void> initConnectivity() async {
    try {
      await _connectivity.checkConnectivity();
    } on PlatformException catch (e) {
      print(e.toString());
    }
    if (!mounted) {
      return;
    }

    await _updateConnectionStatus().then((bool isConnected){
      if(mounted){
        setState(() {
          isOnline = isConnected;
        });
      }
    });
  }

  @override
  void initState() {
    super.initState();
    initConnectivity();
    _connectivitySubscription = Connectivity()
        .onConnectivityChanged
        .listen((ConnectivityResult result) async {
      await _updateConnectionStatus().then((bool isConnected){
        if(mounted){
          setState(() {
            isOnline = isConnected;
          });
        }
      });
    });
  }

  @override
  void dispose() {
    _connectivitySubscription.cancel();
    super.dispose();
  }

  Future<bool> _updateConnectionStatus() async {
    bool isConnected;
    try {
      final List<InternetAddress> result =
      await InternetAddress.lookup('google.com');
      if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
        isConnected = true;
      }
    } on SocketException catch (_) {
      isConnected = false;
      return false;
    }
    return isConnected;
  }
}

输出:

I/flutter (32289): ++++++++++++++++++++
I/flutter (32289): ++++++++++++++++++++

Answer 1

正如@Ricardo 所说，您不应该直接在 FutureBuilder 的 future 方法中调用该函数。

相反，您应该首先在初始状态下运行您的函数，并将响应存储在一个新变量中。只有这样才能将变量分配给 FutureBuilder 的 future 。

代码示例:

class LessonDetail extends StatefulWidget {
  final String monthKey;
  final String lessonFileKey;

  LessonDetail({@required this.monthKey, @required this.lessonFileKey});

  @override
  State<StatefulWidget> createState() {
    return _LessonDetailState(monthKey, lessonFileKey);
  }
}

class _LessonDetailState extends BaseState<LessonDetail> {
  String monthKey;
  String lessonFileKey;
  Future<PlayLesssonResponse> _myResponse; //added this line

  _LessonDetailState(this.monthKey, this.lessonFileKey);

 @override
  void initState() {
    _myResponse = _getLessonDetail();  // added this line
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        body: FutureBuilder(
            future: _myResponse,  //use _myResponse variable here
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                PlayLessonResponse response = snapshot.data;
                print(response);
              }

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

  Future<PlayLessonResponse> _getLessonDetail() async {

    AudioList audioList = AudioList(
      'http://www.sample.com',
      'aaaaa'
    );
    List<AudioList> lst = [audioList,audioList,audioList];

    PlayLessonResponse response = PlayLessonResponse(
        2,
        '',
        'http://www.sample.com',
        '2',
        lst,
        1,
        'ssss'
    );


    print('++++++++++++++++++++');
    return response;
  }
}