Question

我目前正在使用一个具有多个页面并且使用底部导航栏的应用程序，每个页面都需要向不同的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请求。

Answer 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(),
                  ),
                ),
              ],
            )

Answer 2

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

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

2 个答案: