导航到 TabBarView 中的另一个屏幕而不摆脱 TabBar答案

【问题标题】：Navigate to another screen in TabBarView without getting rid of the TabBar导航到 TabBarView 中的另一个屏幕而不摆脱 TabBar
【发布时间】：2021-12-31 01:22:42
【问题描述】：

我的应用程序启动到 TabBarView 控制的 5 个选项卡。它从具有帖子提要的主页开始。当用户点击帖子的标题时，应用程序需要导航到个人资料屏幕。但是，如果我只使用代码Navigator.push(context, MaterialPageRoute(builder: (context) => ProfileScreen(username: username)));，配置文件屏幕将替换TabBarView，而不是仅显示TabBarView 后面的屏幕。如何在不替换 TabBarView 的情况下导航到同一选项卡中的不同屏幕？这是我的main.dart 代码：

var firstCamera;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Obtain a list of the available cameras on the device.
  final cameras = await availableCameras();

  // Get a specific camera from the list of available cameras.
  firstCamera = cameras.first;

  await Firebase.initializeApp();
  runApp(MyApp());
}

// void main() async {
//   WidgetsFlutterBinding.ensureInitialized();
//   await Firebase.initializeApp();
//   runApp(MyApp());
// }

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GLOBE',
      debugShowCheckedModeBanner: false,
      home: const MyHome(),
      routes: {
        LoginScreen.id: (context) => LoginScreen(),
        SignupScreen.id: (context) => SignupScreen(),
        HomeScreen.id: (context) => HomeScreen()
      },
    );
  }
}

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

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

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {

  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        children: [
          HomeScreen(),
          HomeScreen(),
          TakePictureScreen(camera: firstCamera),
          HomeScreen(),
          ProfileScreen(username: "cjmofficial")
        ],
        controller: _tabController
      ),
      extendBody: true,
      bottomNavigationBar: Container(
        color: Colors.transparent,
        padding: EdgeInsets.symmetric(vertical: 40, horizontal: 40),
        child: ClipRRect(
          clipBehavior: Clip.hardEdge,
          borderRadius: BorderRadius.circular(50.0),
          child: Container(
            height: 55,
            color: Colors.grey[200],
            child: TabBar(
                labelColor: Colors.teal[200],
                unselectedLabelColor: Colors.blueGrey,
                indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(color: Colors.teal),
                    insets: EdgeInsets.fromLTRB(50, 0, 50, 40)
                ),
                indicatorColor: Colors.teal,
                tabs: [
                  Tab(icon: Icon(Icons.home_outlined)),
                  Tab(icon: Icon(Icons.explore_outlined)),
                  Tab(icon: Icon(Icons.camera_alt_outlined)),
                  Tab(icon: Icon(Icons.movie_outlined)),
                  Tab(icon: Icon(Icons.person_outline))
                ],
                controller: _tabController),
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter tabbarcontroller

【解决方案1】：

使用_tabController.animateTo(pageIndex) 而不是Navigator。

这是官方文档和一个易于理解的示例： https://api.flutter.dev/flutter/material/TabController-class.html

同样来自这个页面：要获取当前选项卡的索引，请使用tabController.index

【讨论】：