flutter - 每次我们点击底部导航栏上的页面时，如何防止调用 http 请求？

Question

在主页上，我有 4 个不同的 api 调用从 wordpress 站点获取 4 个不同的数据。我目前的编码方式是，每次我们进入主页时，在 initState() 中，get _getHomePageData() 函数都会在异步 api 获取发生的地方被调用。当发生这种情况时，allDataLoaded bool 值首先设置为 false。加载数据后，allDataLoaded 设置为 true，加载停止并显示小部件。

这是主页小部件:

class HomePage extends StatefulWidget {
 @override
 _HomePageState createState() => _HomePageState();
}


class _HomePageState extends State<HomePage> {

  final String homePageLatestArtworkApi = 
  'https://example.com/wp-json/wp/v2/artworks? 
   per_page=1&_embed';
  final String homePageAllArtworkApi = 
  'https://example.com/wp-json/wp/v2/artworks? 
   per_page=6&_embed';
  final String homePageAllEventsApi = 
  'https://example.com/wp-json/wp/v2/events? 
   per_page=6&_embed';
  final String homePageAllVenuesApi = 
  'https:example.com/wp-json/wp/v2/venues? 
   per_page=6&_embed';

   List homePageLatestArtwork;
   List homePageAllArtworks;
   List homePageAllEvents;
   List homePageAllVenues;

   var allDataLoaded = false;



   @override
   void initState(){
     super.initState();

     print('init state is called everytime the page is loaded');
     _getHomePageData();
   }



  Future<String> _getHomePageData() async{

    var responseLatestArtwork = await http.get(Uri.encodeFull(homePageLatestArtworkApi));

    var responseAllArtworks = await http.get(Uri.encodeFull(homePageAllArtworkApi));

    var responseAllEvents = await http.get(Uri.encodeFull(homePageAllEventsApi));

    var responseAllVenues = await http.get(Uri.encodeFull(homePageAllVenuesApi));



  setState(() {

  //latest artwork
  var convertDataToJsonLatestArtwork = json.decode(responseLatestArtwork.body);
  homePageLatestArtwork = convertDataToJsonLatestArtwork;

  //All Artworks
  var convertDataToJsonAllArtworks = json.decode(responseAllArtworks.body);
  homePageAllArtworks = convertDataToJsonAllArtworks;

  // All Events
   var convertDataToJsonAllEvents = json.decode(responseAllEvents.body);
   homePageAllEvents = convertDataToJsonAllEvents;

  //All venues
   var convertDataToJson = json.decode(responseAllVenues.body);
    homePageAllVenues = convertDataToJson;


  if(homePageLatestArtwork != null && homePageAllArtworks != null && homePageAllEvents != null && homePageAllVenues != null){
    allDataLoaded = true;
  }
  // print('converted data is here');
  //print(homePageLatestArtwork);

  //print('the title is here :');


  //print(homePageLatestArtwork[0]['title']['rendered']);
  //print(homePageLatestArtwork[0]['_embedded']['wp:featuredmedia'][0]['source_url']);

  });



@override
Widget build(BuildContext context) {


if(allDataLoaded){ //wait for the data to load and show spinning loader untill data is completely loaded

  return Scaffold(
    // body: Text('title'),
    // body: Text("title: ${homePageLatestArtwork[0]['title']['rendered']} "),
    body: Container(
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[ 
            // Expanded(
              Container(
              height: 200.0,
              child: Image.network(homePageLatestArtwork[0]['_embedded']['wp:featuredmedia'][0]['source_url'],
              fit: BoxFit.fill,
              width: double.maxFinite,),
              ),
              Container(
                padding: EdgeInsets.only(left:15.0,right:15.0,top:10.0),
                child: Text(homePageLatestArtwork[0]['title']['rendered'],textAlign: TextAlign.left,

                style: new TextStyle(
                      fontSize: 20.0,
                      fontFamily: 'Montserrat-Regular',
                      color: Color(0XFF212C3A),
                      fontWeight: FontWeight.bold
                      ),),
              ),
             ])
            ),
           ),
         );

    }else{

      return new Center(
        child: new CircularProgressIndicator(
      valueColor: new AlwaysStoppedAnimation<Color> . 
     (Theme.of(context).primaryColor),
    ),
  );
}

} //end of _HOMEPAGESTATE

我不想每次查看主页时都加载，或者说我只想在应用程序启动时获取一次 api 数据，让用户手动下拉刷新数据。

Answer 1

方法一:

如果您只是在谈论数据，那么您应该有一个可以在 initState() 中初始化一次的单例对象；

class _HomePageData {
  var allDataLoaded = false;
  String contents = "";
  Future<String> _getHomePageData() async {
    // Assuming contents is the data model and you load the data into contents
    this.contents = "Loaded";
    this.allDataLoaded = true;
    return this.contents;
  }
}

final _HomePageData data = _HomePageData();

class _HomePageState extends State<HomePage> {
  String contents;

  @override
  void initState(){
    super.initState();

    if (!data.allDataLoaded) {
      data._getHomePageData().then((contents) {
        setState(() {
          this.contents = contents;
        })
      });
    } else {
      this.contents = data.contents;
    }
  }
}

方法二:

以前，每次我移动到另一个选项卡时，我都会处理不断重新加载的选项卡。当状态没有附加到任何事件的小部件树时，Flutter 会主动删除状态。这个想法是将小部件放在 Stack 中，置于 Offstage 和 TickerMode 中以控制可见性和动画。

class MyTabState extends State<MyTabPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: MyBottomBar(
        onTab: _onTab,
        currentIndex: _currentIndex,
      ),
      body: Stack(
        children: List.generate(3, (index) {
          return Offstage(
            offstage: _currentIndex != index,
            child: TickerMode(
              enabled: _currentIndex == index,
              child: getChild(index),
            ),
          );
        }, growable: false),
      ),
    );
  }
}