每次导航到 flutter 中的特定选项卡时如何调用 initState 方法？

Question

我正在使用 Cupertino 制作一个 flutter 应用程序，我试图弄清楚如何在每次导航到此选项卡（MapPage）时调用 initState 方法。

此方法 initState() 调用其他方法“initPlatformState()”，该方法请求权限位置并向 API 发出请求，根据此结果，我为每个对象的结果构建一个标记并将其显示在地图上。

这是地图页面的代码。

https://gist.github.com/GreyHat147/3ea92f4e962218893b84af667452b087

这是用户界面。

Answer 1

对于 CupertinoTabBar，您可以执行以下操作，创建状态类的实例，并且无需再次创建它，仅在点击时调用它：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

MyHome myHome = new MyHome();
MyNearMe myNearMe = new MyNearMe();
MyMap myMap = new MyMap();
MyNotifications myNotifications = new MyNotifications();
MyWallet myWallet = new MyWallet();

MyHomeState myHomeState = MyHomeState();
MyNearMeState myNearMeState = MyNearMeState();
MyMapState myMapState = MyMapState();
MyNotificationsState myNotificationsState = MyNotificationsState();
MyWalletState myWalletState = MyWalletState();
int indexPrevValue = 0;

class TabBarPage extends StatefulWidget {
  TabBarPage({Key key, this.userId})
      : super(key: key);

  final String userId;

  @override
  _TabBarPage createState() => new _TabBarPage();
}


class _TabBarPage extends State<TabBarPage> {
  _TabBarPage({Key key, this.userId});

  final String userId;

  void _onTap(int value) {
    print('Value => $value');
    if(value == 0){
      myHomeState.initState();
    }
    else if(value == 1){
      myNearMeState.initState();
    }
    else if(value == 2){
      myMapState.initState();
    }
    else if(value == 3){
      myNotificationsState.initState();
    }
    else if(value == 4){
      myWalletState.initState();
    }
    indexPrevValue = value;
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        onTap: _onTap,
        activeColor: new Color.fromRGBO(148, 3, 123, 1.0),
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
            title: new Text('Home'),
            icon: new Icon(
              Icons.home,
              size: 22,
            ),
          ),
          new BottomNavigationBarItem(
            title: new Text('Near me'),
            icon: new Icon(
              Icons.location_on,
              size: 22,
            ),
          ),
          new BottomNavigationBarItem(
              icon: new Icon(
                Icons.map,
                size: 22,
              ),
              title: new Text('Map')
          ),
          new BottomNavigationBarItem(
              title: new Text('Notifications'),
              icon: new Icon(
                Icons.notifications,
                size: 22,
              )
          ),
          new BottomNavigationBarItem(
              title: new Text('Wallet'),
              icon: new Icon(
                Icons.account_balance_wallet,
                size: 22,
              )
          ),
        ],
      ),


      tabBuilder: (BuildContext context, int index) {
        switch (index) {
          case 0:
            return CupertinoTabView(
              builder: (BuildContext context) {
                if(myHomeState == null){
                  myHomeState = myHome.createState();
                }
                return myHome.createState().build(context);
              },
            );
            break;

          case 1:
            return CupertinoTabView(
              builder: (BuildContext context) {
                if(myNearMeState == null){
                  myNearMeState = myNearMe.createState();
                }
                return myNearMe.createState().build(context);
              },
            );
            break;

          case 2:
            return CupertinoTabView(
              builder: (BuildContext context) {
                if(myMapState == null){
                  myMapState = myMap.createState();
                }
                return myMap.createState().build(context);
              },
            );
            break;

          case 3:
            return CupertinoTabView(
              builder: (BuildContext context) {
                if(myNotificationsState == null){
                  myNotificationsState = myNotifications.createState();
                }
                return myNotifications.createState().build(context);
              },
            );
            break;

          case 4:
            return CupertinoTabView(
              builder: (BuildContext context) {
                if(myWalletState == null){
                  myWalletState = myWallet.createState();
                }
                return myWallet.createState().build(context);
              },
            );
            break;

        }
      },
    );
  }
}



class MyHome extends StatefulWidget {
  @override
  MyHomeState createState() => new MyHomeState();
}

class MyHomeState extends State<MyHome> {

  @override
  void initState() {
    super.initState();
    print('MyHomeState initState() called');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("test stream"),
        ),
        body: Container(
          padding: EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text('HOME 1')
            ],
          ),
        ));
  }
}





class MyNearMe extends StatefulWidget {
  @override
  MyNearMeState createState() => new MyNearMeState();
}

class MyNearMeState extends State<MyNearMe> {

  @override
  void initState() {
    super.initState();
    print('MyNearMeState initState() called');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("MyNearMe"),
        ),
        body: Container(
          padding: EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text('My Near Me')
            ],
          ),
        ));
  }
}




class MyMap extends StatefulWidget {
  @override
  MyMapState createState() => new MyMapState();
}

class MyMapState extends State<MyMap> {

  @override
  void initState() {
    super.initState();
    print('MyMapState initState() called');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("MyMap"),
        ),
        body: Container(
          padding: EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text('My Map')
            ],
          ),
        ));
  }
}





class MyNotifications extends StatefulWidget {
  @override
  MyNotificationsState createState() => new MyNotificationsState();
}

class MyNotificationsState extends State<MyNotifications> {

  @override
  void initState() {
    super.initState();
    print('MyNotificationsState initState() called');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("MyNotifications"),
        ),
        body: Container(
          padding: EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text('My Notifications')
            ],
          ),
        ));
  }
}





class MyWallet extends StatefulWidget {
  @override
  MyWalletState createState() => new MyWalletState();
}

class MyWalletState extends State<MyWallet> {

  @override
  void initState() {
    super.initState();
    print('MyWalletState initState() called');
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("MyWallet"),
        ),
        body: Container(
          padding: EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text('My Wallet')
            ],
          ),
        ));
  }
}

如果您想使用另一个底部导航栏而不是 cupertino，那么您可以使用如下：

我为您创建了一个示例，其中每次选项卡更改时 initState() 都会调用，无论是相同选项卡还是不同选项卡：

首先在 pubspec.yaml 中导入“bmnav: ^0.3.4”库，然后复制并粘贴以下代码：

import 'package:flutter/material.dart';
import 'package:bmnav/bmnav.dart' as bmnav;

Widget currentScreen = null;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    currentScreen = MyHomeMapSample();
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();

}



class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState(){
    super.initState();
  }
  int currentTab = 0;
  int prevTab = 0;

  final PageStorageBucket bucket = PageStorageBucket();

  @override
  Widget build(BuildContext ctx) {
    debugPrint('currentTab: $currentTab');
    return Scaffold(

      body: PageStorage(child: currentScreen, bucket: bucket),
      bottomNavigationBar: SizedBox(height: 58,
        child: bmnav.BottomNav(
          index: currentTab,
          onTap: (i) {
            setState(() {
              currentTab = i;
              currentScreen = getWidget(context, i);
              if(prevTab==currentTab){
                if(i==0){
                  MyHomeMapSample map = currentScreen as MyHomeMapSample;
                  map.createState().initState();
                }else if(i==1){
                  MyHomeWorkouts map = currentScreen as MyHomeWorkouts;
                  map.createState().initState();
                }
                else if(i==2){
                  MyHomeAccount map = currentScreen as MyHomeAccount;
                  map.createState().initState();
                }
              }
              prevTab = currentTab;
            });
          },
          labelStyle: bmnav.LabelStyle(visible: true),
          items: [
            bmnav.BottomNavItem(Icons.map, label: 'Map'),
            bmnav.BottomNavItem(Icons.cast, label: 'Workouts'),
            bmnav.BottomNavItem(Icons.textsms, label: 'Account'),
          ],
        ),
      ),
      resizeToAvoidBottomPadding: true,
    );
  }

  Widget getWidget(BuildContext context, int i){
    if(i==0){
      return MyHomeMapSample();
    }

    else if(i==1){
      return MyHomeWorkouts();

    }else if(i==2){
      return MyHomeAccount();
    }
  }

}



class MyHomeMapSample extends StatefulWidget {
  MyHomeMapSample({Key key}) : super(key: key);
  @override
  MapSample createState() => MapSample();
}

class MapSample extends State<MyHomeMapSample> {
  var myVariable = 0;

  @override
  void initState(){
    super.initState();
    debugPrint('current: MapSample: initState() called!');
  }

  @override
  Widget build(BuildContext context) {
    myVariable = myVariable + 1;
    return Scaffold(
      appBar: AppBar(
        title: Text('MapSample'),
      ),
      body: Center(
        child: Text('MapSample details + $myVariable'),
      ),
      resizeToAvoidBottomPadding: true,
    );
  }

}



class MyHomeWorkouts extends StatefulWidget {
  MyHomeWorkouts({Key key}) : super(key: key);
  @override
  Workouts createState() => Workouts();
}

class Workouts extends State<MyHomeWorkouts> {
  var myVariable = 0;

  @override
  void initState(){
    super.initState();
    debugPrint('current: Workouts: initState() called!');
  }

  @override
  Widget build(BuildContext context) {
    myVariable = myVariable + 1;
    return Scaffold(
      appBar: AppBar(
        title: Text('Workouts'),
      ),
      body: Center(
        child: Text('Workouts details + $myVariable'),
      ),
      resizeToAvoidBottomPadding: true,
    );
  }

}




class MyHomeAccount extends StatefulWidget {
  MyHomeAccount({Key key}) : super(key: key);
  @override
  Account createState() => Account();
}

class Account extends State<MyHomeAccount> {
  var myVariable = 0;

  @override
  void initState(){
    super.initState();
    debugPrint('current: Account: initState() called!');
  }

  @override
  Widget build(BuildContext context) {
    myVariable = myVariable + 1;
    return Scaffold(
      appBar: AppBar(
        title: Text('Account'),
      ),
      body: Center(
        child: Text('Account details + $myVariable'),
      ),
      resizeToAvoidBottomPadding: true,
    );
  }

}

Answer 2

使用

UniqueKey()

作为选项卡，选项卡将在每次调用时重建。