在 Tab 视图主体 Flutter 中导航

Question

该应用程序包含 TabBar 以及 BottomNavigationBar。当我尝试在标签栏视图的主体内导航时，它会全屏导航。

这是我点击按钮时想要得到的结果- Expected Result

但是我明白了 Current Output

这里附上代码-

 Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text("Traveler"),
            bottom: new TabBar(controller: _controller, tabs: <Tab>[
              new Tab(text: "NEW"),
              new Tab(text: "HOTELS"),
              new Tab(text: "FOOD"),
              new Tab(text: "FUN"),
            ]),
          ),
          body: new TabBarView(
            controller: _controller,
            children: <Widget>[
              new NewPage(_index),
              new HotelsPage(_index),
              new FoodPage(_index),
              new FunPage(_index),
            ],
          ),
          bottomNavigationBar: new BottomNavigationBar(
              currentIndex: _index,
              onTap: (int _index) {
                setState(() {
                  this._index = _index;
                });
              },
              items: <BottomNavigationBarItem>[
                new BottomNavigationBarItem(
                  icon: new Icon(Icons.home),
                  title: new Text("Home"),
                ),
                new BottomNavigationBarItem(
                  icon: new Icon(Icons.favorite),
                  title: new Text("Favorites"),
                ),
              ]),
        );
      }
    }
    
    class NewPage extends StatelessWidget {
      final int index;
    
      NewPage(this.index);
    
      @override
      Widget build(BuildContext context) {
        return new Center(
          child: RaisedButton(
            onPressed: (){
               Navigator.push(context,MaterialPageRoute(builder: (context)=>InsideTabViewPage()), );
            },
            child: new Text('NewPage, index: $index')),
        );
      }
    }

Answer 1

您可以通过创建一个位于主应用程序导航器下方某处的新 Navigator 小部件来实现此目的，

这是测试示例：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark().copyWith(
        elevatedButtonTheme: ElevatedButtonThemeData(
            style: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(Colors.blueGrey[800]),
        )),
      ),
      home: MyApp()));
}

//Store this globally
final GlobalKey<NavigatorState> _navKey = GlobalKey<NavigatorState>();

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late final TabController _tabController;
  @override
  void initState() {
    _tabController = TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Nested Navigator'),
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(
              child: Text('First Tab'),
            ),
            Tab(
              child: Text('Second Tab'),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(
              icon: Icon(Icons.favorite), label: 'Favorites'),
        ],
      ),
      body: Navigator(
        key: _navKey,
        onGenerateRoute: (_) => MaterialPageRoute(
          builder: (_) => TabBarView(
            controller: _tabController,
            children: [
              FirstPage(),
              SecondPage(),
            ],
          ),
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('First Page'),
            ElevatedButton(
                onPressed: () {
                  _navKey.currentState!.push(
                    MaterialPageRoute(
                      builder: (_) => SubFirstPage(),
                    ),
                  );
                },
                child: Text('Go to Nested Page 1'))
          ],
        ),
      ),
    );
    ;
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Second Page'),
            ElevatedButton(
              onPressed: () {
                _navKey.currentState!.push(
                  MaterialPageRoute(
                    builder: (_) => SubSecondPage(),
                  ),
                );
              },
              child: Text('Go to Nested Page 2'),
            )
          ],
        ),
      ),
    );
  }
}

class SubFirstPage extends StatelessWidget {
  const SubFirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Nested Page'),
      ),
      body: Center(
        child: Text('From First Page'),
      ),
    );
  }
}

class SubSecondPage extends StatelessWidget {
  const SubSecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Nested Page'),
      ),
      body: Center(
        child: Text('From Second Page'),
      ),
    );
  }
}

结果是：

You can read more about nested navigation in Navigator 1.0 API here

在 Tab 视图主体 Flutter 中导航

Navigation within Tab view body Flutter

tabbar

dart

flutter

flutter-navigation

flutter-bottomnavigation