如何在带有底部导航的应用程序中处理 http GET 请求答案

【问题标题】：How to handle http GET request in an app with bottom navigation如何在带有底部导航的应用程序中处理 http GET 请求
【发布时间】：2019-01-02 04:56:35
【问题描述】：

我目前正在开发一个具有多个页面并使用底部导航栏的应用程序，每个页面都需要向不同的 API 端点发送 HTTP GET 请求。

现在我在每个页面的 initState() 中调用 get 函数。结果，每次我点击导航栏转到相应的页面时，它都会重新发送另一个HTTP GET请求。我该如何处理？我应该从底部导航页面发送 GET 请求吗？

我尝试过使用 PageStorageKey 方法，但我认为问题在于我在每个页面的 initState 中调用了 GET 方法。

MyTab.dart

bottomNavigationBar: Theme(
    data: Theme.of(context).copyWith(
          // sets the background color of the `BottomNavigationBar`
          canvasColor: Color(0xff3a3637),
          // sets the active color of the `BottomNavigationBar` if `Brightness` is light
          primaryColor: Color(0xffffd51e),
          textTheme: Theme.of(context).textTheme.copyWith(
                caption: TextStyle(color: Colors.white),
              ),
        ), // sets the inactive color of the `BottomNavigationBar`

    child: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: currentTab,
      onTap: (int index) {
        setState(() {
          currentTab = index;
          currentPage = pages[index];
        });
      },

      items: <BottomNavigationBarItem>[

        BottomNavigationBarItem(
          icon: ImageIcon(AssetImage("assets/icon/anggota_white.png")),
          title: Text(
            'Anggota',
            style: TextStyle(fontFamily: 'MyriadPro'),
          ),
        ),

        BottomNavigationBarItem(
          icon: ImageIcon(AssetImage("assets/icon/bk_white.png")),
          title: Text(
            "BK",
            style: TextStyle(fontFamily: 'MyriadPro'),
          ),
        ),

        BottomNavigationBarItem(
          icon: ImageIcon(AssetImage("assets/icon/himatif_white.png")),
          title: Text(
            "Himatif",
            style: TextStyle(fontFamily: 'MyriadPro'),
          ),
        ),

        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          title: Text(
            "Cari",
            style: TextStyle(fontFamily: 'MyriadPro'),
          ),
        ),

        BottomNavigationBarItem(
          icon: ImageIcon(AssetImage("assets/icon/kkm_white.png")),
          title: Text(
            "KKM",
            style: TextStyle(fontFamily: 'MyriadPro'),
          ),
        ),
      ],
    ),
  ),

这是一页，

AnggotaScreen.dart

class AnggotaScreen extends StatefulWidget {
  AnggotaScreen({
    Key key,
  }) : super(key: key);

  @override
  _AnggotaScreenState createState() => _AnggotaScreenState();
}

class _AnggotaScreenState extends State<AnggotaScreen> {
  bool _isLoading;
  var _dataAngkatan, _dataTahun;
  static String _uriAngkatan;

  _ambilData(String url, bool tipe) async {
    final response = await http.get(url);

    if (response.statusCode == 200) {
      final map = json.decode(response.body);

      if (tipe == true) {
        setState(() {
          _dataAngkatan = map;
          _isLoading = false;
        });
      } else {
        setState(() {
          _dataTahun = map;
          _isLoading = false;
        });
      }
    }
  }

  // initState
  @override
  void initState() {
    super.initState();
    _isLoading = true;
    _uriAngkatan = "2012";
    _dataAngkatan = [];
    _dataTahun = [];
    _ambilData(Url.TAHUN_ANGGOTA, false);
    _ambilData(Url.angkatan(_uriAngkatan), true);
  }
  ..........
}

我想让页面在开始时只发送一次 GET 请求并保持该状态直到应用程序关闭，但现在它会在我每次打开该页面时发送 GET 请求。

【问题讨论】：

标签： http dart flutter

【解决方案1】：

Offstage 一个小部件，它可以将子组件放置在树中，但不绘制任何内容，不让子组件可用于命中测试，也不占用父组件的任何空间。 TickerMode 可用于禁用子树中的动画

https://docs.flutter.io/flutter/widgets/Offstage-class.html

body: Stack(
              children: <Widget>[
                new Offstage(
                  offstage: index != 0,
                  child: new TickerMode(
                      enabled: index == 0,
                      child: Screen() //MainScreen(),
                      ),
                ),
                new Offstage(
                  offstage: index != 1,
                  child: new TickerMode(
                    enabled: index == 1,
                    child: Screen(),
                  ),
                ),
                new Offstage(
                  offstage: index != 2,
                  child: new TickerMode(
                    enabled: index == 2,
                    child: Screen(),
                  ),
                ),
                new Offstage(
                  offstage: index != 3,
                  child: new TickerMode(
                    enabled: index == 3,
                    child: Screen(),
                  ),
                ),
              ],
            )

【讨论】：

【解决方案2】：

我认为你是对的。我开发了一个类似情况的类似应用程序，并且我在父页面的 initState （在您的情况下为底部导航页面）发送了所有 http 请求，以避免发送多个 http 请求。只需发送请求并将数据保存在父页面，然后将这些数据传递给每个子页面。

【讨论】：