检测用户是否进入Flutter中的选项卡

Question

您好，有什么方法可以使用WidgetBindingObservers检测用户何时在Flutter中退出或进入选项卡，然后在重新输入后刷新该选项卡？

我以这种方式使用它（请参阅代码），但是它不起作用，因此我需要一些指导。非常感谢。

我想要的输出类似于Facebook应用程序的输出，特别是NewsFeed选项卡。当您退出该选项卡<或从新闻源中长时间观看视频时，该选项卡将自动刷新

我的

main.dart

代码是这样的：

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}


class MyAppState extends State<MyApp> with WidgetsBindingObserver {
  var lastloaded;
bool isInactive;
int _selectedPage = 0;
final _pageOptions = [
  HomePage(),
  CategoriesPage(),
  Deals(),
  ProfileAccount(),
  CartPage(),
];

@override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    switch(state){
      case AppLifecycleState.paused:
      print("p");
      break;
      case AppLifecycleState.resumed:
      print("r");
      break;
      case AppLifecycleState.inactive:
      print("I");
      break;
      case AppLifecycleState.detached:
      print("D");
      break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Sync Shop',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
      body: IndexedStack(
        index: _selectedPage,
        children: _pageOptions,
      ),
      bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: _selectedPage,
          onTap: (int index) {
            setState((){
      _selectedPage = index;
            });
          },
          items: [
          BottomNavigationBarItem(icon: Image.asset("assets/home.png",
            height: 25,
            width: 25,
          ),
          title: Text("Home",),
          activeIcon:
          Image.asset("assets/home-active.png",
            height: 25,
            width: 25,
          ) 
          ),
          BottomNavigationBarItem(icon: Image.asset("assets/categories.png",
            height: 22,
            width: 22,
          ),
          title: Text("Categories",),
          activeIcon:
          Image.asset("assets/categories-active.png",
            height: 22,
            width: 22,
          ), 
          ),
          BottomNavigationBarItem(icon: Image.asset("assets/deals.png",
            height: 25,
            width: 25,
          ),
          title: Text("Deals",),
          activeIcon: 
            Image.asset("assets/deals-active.png",
            height: 25,
            width: 25,
          )
          ),
          BottomNavigationBarItem(icon: Image.asset("assets/profile.png",
            height: 25,
            width: 25,
          ), title: Text("Profile",),
          activeIcon: 
         Image.asset("assets/profile-active.png",
            height: 25,
            width: 25,
          )
          ),
          BottomNavigationBarItem(icon: Image.asset("assets/cart.png",
            height: 25,
            width: 25,
          ), title: Text("Cart"),
          activeIcon:
          Image.asset("assets/cart-active.png",
            height: 25,
            width: 25,
          ),
          ),
          ],

          unselectedLabelStyle: TextStyle(color: Colors.grey[600], fontSize: 11),
          selectedItemColor: Color(0xFFEF5021),
          selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
          ),
      ),
      );
  }
}

Answer 1

在您的子页面（页面选项列表中的那些元素）

将函数添加到initState中，以供“进入时”，并将功能添加至处置中，以用于“待命”。

示例

HomePage.dart

class _homeState extends State<HomePage>{
   @override
   void initState(){
     if(this.mounted){
        *your_function_here*
     }
     super.initState();
   }

   @override
   void dispose(){
      if(this.mounted){
        *your_onleave_function_here*
     }
      super.dispose();
   }
}

Answer 2

    class _MyAppState extends State<MyApp> {
      int _selectedPage = 0;

      bool refresh = false;

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

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            body: IndexedStack(
              index: _selectedPage,
              children: [
                Container(alignment: Alignment.center, child: Text('Sample')),
                Container(
                    alignment: Alignment.center, child: MyWidget(refresh: refresh))
              ],
            ),
            bottomNavigationBar: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              currentIndex: _selectedPage,
              onTap: (int index) {
                setState(() {
                  refresh = true;
                  _selectedPage = index;
                });
              },
              items: [
                BottomNavigationBarItem(
                    icon: Image.asset(
                      "assets/home.png",
                      height: 25,
                      width: 25,
                    ),
                    title: Text(
                      "Home",
                    ),
                    activeIcon: Image.asset(
                      "assets/home-active.png",
                      height: 25,
                      width: 25,
                    )),
                BottomNavigationBarItem(
                  icon: Image.asset(
                    "assets/categories.png",
                    height: 22,
                    width: 22,
                  ),
                  title: Text(
                    "Categories",
                  ),
                  activeIcon: Image.asset(
                    "assets/categories-active.png",
                    height: 22,
                    width: 22,
                  ),
                ),
              ],
              unselectedLabelStyle:
                  TextStyle(color: Colors.grey[600], fontSize: 11),
              selectedItemColor: Color(0xFFEF5021),
              selectedLabelStyle:
                  TextStyle(fontWeight: FontWeight.bold, fontSize: 12),
            ),
          ),
        );
      }
    }

    class MyWidget extends StatefulWidget {
      final bool refresh;

      MyWidget({Key k, @required this.refresh}) : super(key: k);

      @override
      _MyWidgetState createState() => _MyWidgetState(refresh);
    }

    class _MyWidgetState extends State<MyWidget> {
      _MyWidgetState(this.refresh);

      bool refresh;
      int content = 1;

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: Container(
                padding: EdgeInsets.all(15),
                alignment: Alignment.center,
                child: Text('Content : ${reload()}')));
      }

      int reload() {
        return Random().nextInt(100);
      }
}