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

Posted

技术标签:

【中文标题】Flutter - 如何在 TabBarView 的主体内导航?【英文标题】:Flutter - How to navigate inside the body of a TabBarView? 【发布时间】:2019-07-06 08:12:42 【问题描述】:

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

我的问题是,是否可以导航到 TabBarView 主体内的新页面?这意味着我想导航到另一个页面,同时保留我所有的顶部应用栏和底部导航栏。

【问题讨论】:

Navigator.push 将在旧屏幕上显示全新的屏幕。 这方面有什么更新吗? 这方面有什么更新吗? 使用bool 变量更改setState 上的小部件 【参考方案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

【讨论】:

如果我只想在标签栏上显示两个标签,而第三个标签只能通过另一个按钮访问,是否可以?我试图删除标签内的第三个标签小部件,但我仍然可以滑动到第三个正文视图 也许你错过了将 length: 更改为 2 @michealchow

以上是关于Flutter - 如何在 TabBarView 的主体内导航?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Flutter 中使用函数创建动态 TabBarView/渲染新 Tab?

Flutter:SingleChildScrollView 内的 TabBarView

TabBarView 或 IndexedStack 用于 BottomNavigationBar - Flutter

何时在 Flutter 中使用新的 Screens 而不是 TabBarView

如何创建有界可滚动的 TabBarView

iOS 设备中 Flutter TabBarView 覆盖底部区域(Slider)