Flutter 如何使用導航刪除底部導航

Question

我想刪除所有堆疊的路由並返回到 Auth 頁面。 我的主頁是這樣的。

class _HomeScreenState extends State<HomeScreen> {
      final List<StatelessWidget> pages = [
        new Page1(),
        new Page2(),
        new Page3(),
        new Page3(),
      ];        

      @override
      Widget build(BuildContext context) {
        return new WillPopScope(
          onWillPop: () async {
            await Future<bool>.value(true);
          },
          child: new CupertinoTabScaffold(
            tabBar: new CupertinoTabBar(
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_one),
                  title: Text('Page1'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_two),
                  title: Text('Page2'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_3),
                  title: Text('Page3'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_4),
                  title: Text('Page4'),
                ),
              ],
            ),
            tabBuilder: (BuildContext context, int index) {
              return new DefaultTextStyle(
                style: const TextStyle(
                  fontFamily: '.SF UI Text',
                  fontSize: 17.0,
                  color: CupertinoColors.black,
                ),
                child: new CupertinoTabView(
                  builder: (BuildContext context) {
                    return pages[index];
                  },
                ),
              );
            },
          ),
        );
      }
    }

我想在用戶注銷時刪除CupertinoTabBar 。 我是這樣試的。

Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => new AtuhScreen()));

它正確進入屏幕，但底部導航仍然可見。
如何正確刪除底部導航？

Answer 1

編碼

Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => new AtuhScreen()));

將通過以下方式修復：

Navigator.of(context, rootNavigator: true).pushReplacement(MaterialPageRoute(builder: (context) => new AtuhScreen()));

rootNavigator: true將獲得最高的根小部件Scaffold或MaterialApp並避免顯示BottomNavigationBar 。

Answer 2

當您使用 FireBase_auth 時：然后您可以使用 StreamBuilder 來處理登錄和注銷過程。 例如：

final FirebaseAuth _auth = FirebaseAuth.instance;
void main() {
  runApp(MaterialApp(
    //home: MyLoginPage(),
    home: StreamBuilder(
        stream: _auth.onAuthStateChanged,
        builder: (context, snap) {
          if (snap.connectionState == ConnectionState.waiting) {
            return SplashScreen();
          } else {
            if (snap.hasData) {
              return HomeScreen(
                user: snap.data,
                signOut: signOut,
              );
            }
            return MyLoginPage();
          }
        }),
    theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.blue),
  ));
}

void signOut() async {
  await _auth.signOut();
}

然后您可以簡單地從任何頁面屏幕調用 SignOut() 並且您將獲得一個新屏幕，例如 MyLoginPage()。 喜歡：

class Page3 extends StatelessWidget {
  final Function signOut;

  Page3(this.signOut);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third'),
      ),
      body: Center(child: RaisedButton(onPressed: ()=> signOut,child: Text("Sign-Out"),),),
    );
  }
}

Answer 3

該問題與導航器有關。 如果您有嵌套的導航器，那么 pushAndRemoveUntil 不會完成這項工作，因為它不會在路線或最頂部的導航器上推送注銷屏幕，而是在子導航器（例如一個屏幕）上推送注銷屏幕。 因此，在導航到注銷屏幕時，您必須明確傳遞路線導航器，例如

Navigator.of(context, rootNavigator: true).pushReplacement(                          
MaterialPageRoute(builder: (context) => LogoutPage()));

這將彈出任何子導航器並轉到頂部導航器。