Flutter - 如何在 TabBarView 的主体内导航？

Question

我有一个包含项目列表的 TabBarView，我为每个项目分配了一个 Navigator.push 方法。目前该方法会跳转到新页面。

我的问题是，是否可以导航到 TabBarView 主体内的新页面？这意味着我想导航到另一个页面，同时将所有顶部应用栏和 BottomNavigationBar 保留在屏幕上。

Answer 1

是的，您需要将 TabBarView 放在 TabController 中:

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

取自https://flutter.io/docs/cookbook/design/tabs