首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Flutter中,导航到新窗口小部件,同时维护AppBar和底层TabBar

在Flutter中,要导航到新窗口小部件并同时维护AppBar和底层TabBar,可以使用Flutter的导航器(Navigator)和底部导航栏(BottomNavigationBar)来实现。

首先,需要在主页面中创建一个导航器(Navigator)的实例,用于管理页面之间的导航。可以使用MaterialApp组件作为根组件,并设置其navigatorKey属性为一个GlobalKey<NavigatorState>类型的全局键,以便在其他地方可以访问到导航器。

代码语言:txt
复制
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to New Page'),
          onPressed: () {
            navigatorKey.currentState.push(
              MaterialPageRoute(builder: (context) => NewPage()),
            );
          },
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),
    );
  }
}

class NewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Page'),
      ),
      body: Center(
        child: Text('This is a new page'),
      ),
    );
  }
}

在上述代码中,我们创建了一个MyApp组件作为根组件,并在其中定义了一个全局的navigatorKey。在HomePage组件中,我们使用RaisedButton来触发导航到NewPage的操作,通过navigatorKey.currentState.push方法将NewPage推入导航器的堆栈中,从而实现页面的导航。同时,我们在HomePage的Scaffold组件中添加了一个底部导航栏(BottomNavigationBar)。

在NewPage组件中,我们创建了一个新的页面,其中包含一个AppBar和一个居中的文本。

这样,当点击HomePage中的按钮时,就会导航到NewPage页面,并且保持了AppBar和底部导航栏的一致性。

在这个例子中,我们没有提及具体的腾讯云产品和链接地址,因为在Flutter开发中,与云计算相关的产品和服务通常是与后端开发、网络通信等领域相关的。腾讯云提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品和服务。可以通过访问腾讯云官网(https://cloud.tencent.com/)来了解更多关于腾讯云的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 入门指北之快速搭建界面(含Flutter知识体系)

上一篇讲完 Flutter 的一些基本部件,这篇就先填完上篇留下的没写的 AppBar 的坑,以及 Scaffold 其他参数的使用,开始前,先补一张缩略版的脑图 ?...AppBar 这一部分,我们只关注 Scaffold AppBar 剩下的还是埋坑【坑4】( ?...导航 tab 同宽,label 时候,导航 icon 同宽 indicatorWeight: 5.0, // 导航高度 tabs: List.generate...翻译过来大概就是「给子部件系统点击无效区域留有足够空间,比如状态栏系统导航栏」,SafeArea 可以很好解决刘海屏覆盖页面内容的问题,那么到目前为止,AppBar 的一些坑就说的差不多了,就要解决剩下的坑了...\ndescription...description...'), // checkbox 对立边的部件,例如 checkbox 头部,则 secondary 尾部

1.7K20

6详解AppBar部件

由于它是一个如此常用的组件,因此 Flutter 为该功能提供了一个名为AppBar的专用小部件本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...Scaffold( appBar: AppBar(), ), 应用栏布局 FlutterAppBar的布局主要包括三个组成部分:leading,title,actions。...Flutter AppBar 布局 leading leading 接受一个小部件,可以分配任何东西——文本、图标,甚至一行的多个小部件。...: AppBar(), ); } } Flutter AppBar 导航箭头 当我们将 添加DrawerScaffold时 ,会分配一个菜单图标leading来打开抽屉。...关于 FlutterAppBar 必须提供的所有内容的完整演练。我希望这篇文章能帮助你未来所有的 Flutter 应用程序创建漂亮的 AppBars。

16.3K10
  • Flutter 构建完整应用手册-设计基础知识 顶

    在这个例子,我们将创建一个带有3个Tab小部件TabBar,并将其放置AppBar。...路线 导入字体文件 pubspec.yaml声明该字体 将字体设置为默认值 特定的部件中使用字体 1.导入字体文件 为了处理字体,我们需要将字体文件导入项目中。...单个字体可以引用具有不同轮廓重量样式的许多不同文件: weight属性指定文件轮廓线的权重为100900之间的整数倍。...添加一个抽屉屏幕上 采用Material Design的应用导航有两个主要选项:选项卡抽屉。 当没有足够的空间来支持标签时,抽屉提供了一个方便的选择。...当用户打开抽屉时,Flutter会将抽屉添加到引擎盖下的导航堆栈。 因此,要关闭抽屉,我们可以调用Navigator.pop(context)。

    7.1K10

    Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )

    : 该组件是被导航的组件 , 设置多个布局结构 , 同时只能显示一个 ; DefaultTabController : 该组件用于关联控制 TabBar TabBarView 组件 ; 界面组件...定义的 TabBar TabBarView 就会被关联再一起 ; 注意三个相等的值 : DefaultTabController length 长度 等于 TabBar 子组件个数 等于 TabBarView...---- DefaultTabController 用于关联 TabBar TabBarView 组件 ; 由于 TabBar 的组件都是无状态组件 , 或者不同的父类组件 , 导致创建 TabController...导航按钮组件 ---- TabBar 组件主要用于封装导航栏的图标按钮 , 主要设置一组 Tab 组件 ; 通常放在 AppBar 组件的底部 , 也就是赋值给 AppBar.bottom , 与 TabBarView...导航栏切换展示的主要内容 /// 用于 TabBarView 显示的组件 class TabContent extends StatelessWidget { const TabContent

    2.7K40

    flutter 起步

    window 安装教程flutter中文官网mac 安装教程flutter中文官网安装完成后解压到非高权限路径,讲环境变量配置path图片Flutter安装目录的flutter文件下找到flutter_console.bat...的继承也有Java不一样的地方:Flutter的子类可以访问父类的所有变量方法,因为Flutter没有公有、私有的区别上下文对象是整个APP Widget树结构的Widget话柄,每个Wideget...所以这意味着StatelessWidget.build方法的context函数内部部件Widegt的context不是同一个上下文。所以它们两个不同上下文能够调用的方法是有区别的。...问题:Flutter通过将新的代码注入正在运行的DartVM,来实现Hot Reload这种神奇的效果,DartVM将程序的类结构更新完成后,Flutter会立即重建整个控件树,从而更新界面。...bottom → PreferredSizeWidget - 一个 AppBarBottomWidget 对象,通常是 TabBar。用来 Toolbar 标题下面显示一个 Tab 导航栏。

    4.5K20

    Flutte部件目录-基本部件(三) 顶

    Appbar 一个Material Design应用程序栏。 ? 应用程序栏由工具栏其它可能的部件(如TabBarFlexibleSpaceBar)组成。...应用程序栏通常用在Scaffold.appBar属性,该属性将应用程序栏作为固定高度的小部件放置屏幕的顶部。...AppBar底部(如果有)上方显示工具栏部件,leading,标题操作。底部通常用于TabBar。 如果指定了一个flexibleSpace部件,那么它将堆叠在工具栏底部部件的后面。...在这种情况下,一个空的leading部件将导致middle/title部件开始展开。...TabBar, 如果屏幕有多个页面排列选项卡,它通常放置AppBar的bottom插槽. IconButton,它用于应用栏上显示按钮的actions.

    6.3K10

    使用BottomNavigationBar来定义底部导航

    iOS,底部导航栏使用UITabBar就可以实现;Flutter,类似的效果可以通过BottomNavigationBar这个组件实现。...先上代码 //main.dart文件 import 'package:flutter/material.dart'; import 'pages/tabs/Tabbar.dart'; void main...有几点需要着重说明: 1,我们是给Scaffold组件的 bottomNavigationBar 参数配置 BottomNavigationBar 类型的值,如下: Scaffold( appBar...如下图所示,我lib文件夹下新建了一个pages文件夹,用于装所有的页面;pages文件夹下面又创建了一个tabs文件夹,用于装载跟底部导航栏相关的页面。 ?...3,如果某个Widget是一个页面,那么该Widget最好是以Page结尾,如果我本例定义的首页、分类设置页面,其定义分别如下: //首页——Home.dart——HomePage import

    1.4K30

    FlutterAppBarTabBarTabController——顶部切换栏是如何实现的

    顶部TabBar切换栏实现的第一种方式 FlutterAppBar用于定义顶部的导航栏: Scaffold( appBar: AppBar( title: Text("AppBarPageDemo...2,TabBar的tabs的Tab元素,以及TabBarView的children的页面元素是一一对应的,对应好了之后就可以页面对应展示了。...但是有些时候,我们会遇到不可自定义原始的AppBar的场景,而我们又想实现顶部TabBar的效果,此时我们就可以页面再加一个Scaffold组件,然后这样就有两个AppBar了。...好,现在我们已经知道该如何利用AppBarTabBar来实现顶部Tabbar的视觉效果了。本文的最后,我们来了解一下如何个性化设置顶部TabBar导航条。...3,页面的state(_TabBarControllerPageState)要声明并初始化一个TabController实例 (_tabController) 4, TabBar TabBarView

    10K20

    Flutter入门指北(Part 8)之Sliver 组件及NestedScrollView

    上节最后留了个坑这节来解决,因为涉及部件比较多,所以留到这边来继续讲,不然写太多了怕小伙伴看不下去 在上节最后,给小伙伴们展示了 SliveGrid SliverFixedExtentList 的用法...,基本上 GridView ListView 的用法差不多,所以这边就不多讲这两个部件了。...因为 CustomScrollView 只允许传入 Sliver 部件,那么类似 Container 等普通部件就不可以使用了,那么这样就需要更多的 Sliver 组件才能完成视图,所以为了方便,直接通过...SliverPersistentHeader Flutter ,为我们提供了这么一个作为头部的部件 SliverPersistentHeader,这个部件可以根据滚动的距离缩小高度,有点类似 SliverAppBar..._absorberHandle; } 请注意中间的注释 糟透了的翻译 X 4:这个方法返回的值对于 SliverOverlapAbsorber SliverOverlapInjector 部件是非常重要的参数

    2.2K30

    Flutter 专题】126 图解自定义两侧对齐 ACETabBar 标签导航

    TabBar 绘制过程,多个子 Tab 通过 SingleChildScrollView 存放,最简单的方式, SingleChildScrollView 外添加可以设置对齐方式的 Container...startIcon & endIcon 固定位图标 类似很多新闻类或商城类 app, TabBar 所在的左右两侧通常会有固定的图标或文字等 Widget;而和尚也设置完对齐方式后增加了...& endIcon 两个属性,最终 return tabBar 时进行判断是否展示添加到导航;而是否添加点击事件可以通过添加 Widget 时进行处理; Widget tabBar = CustomPaint...Container() ]); return tabBar; 案例尝试 和尚尝试 isScrollable 是否可滑动两种状态下,导航添加左右两个固定位图标; _tabBar05(type...扩展 和尚在了解 TabBar 源码过程,简单学习了 Tab Item 以及对应 indicator 标签指标的绘制及对应的滑动过程;其中 TabBar 绘制过程中会用到 PreferredSizeWidget

    2.1K90

    深入探究Flutter的页面导航器:Navigator详解

    Navigator基础 Flutter,Navigator是用来管理应用程序页面导航的组件。它负责维护页面堆栈,并处理页面之间的切换、跳转返回操作。...命名路由的使用可以使代码更清晰、更易维护,尤其是大型应用具有很好的可读性扩展性。下面我们将介绍命名路由的概念用法,并演示如何在Flutter应用配置使用命名路由。 1....这种方式使得我们可以整个应用程序轻松地管理维护页面导航。 2. 命名路由的配置: 要使用命名路由,首先需要在应用程序的顶层MaterialApp组件配置路由表(route table)。...命名路由是Flutter中一种便捷的页面导航方式,它通过为每个页面指定一个唯一的名称来实现页面跳转。通过应用程序的路由表配置命名路由,我们可以轻松地管理维护应用程序的页面导航结构。...Flutter应用实现导航器嵌套: 要实现导航器嵌套,我们可以一个页面的Widget树嵌套多个Navigator小部件,并为每个Navigator指定不同的 GlobalKey 以管理其导航状态

    98610

    Flutter | 容器组件

    实际上 Container 内部会根据 width height 来生成一个 constraints color decoration 是互斥的,如果同时指定就会报错!...Flutter ,Container 组件也是组合优先于继承的实例 Padding Margin Container( margin: EdgeInsets.all(20.0), //容器外补白...: AppBar:一个导航栏骨架 MyDrawer:抽屉菜单 BottomNavigationBar:底部导航栏 FloatingActionButton:漂浮按钮 AppBar Appbar 是一个...ScaffoldState ,通过 Scaffold.of() 可以获取腹肌最近的 Scaffold 组件的 State 对象 ToolBar 下面, AppBar 通过 Bottom 属性创建一个...TabBar TabBarView 的 controller 都是同一个,正是如此, TabBar TabBarView 正是通过一个 controller 来实现菜单切换滑动状态同步的,效果如下

    5.5K10

    Flutter 构建完整应用手册-导航器 顶

    Android条款,我们的屏幕将是新的活动。 iOS,新的ViewControllers。 Flutter,屏幕只是部件! 那么我们如何导航新屏幕? 使用Navigator!...将数据发送到新屏幕 通常,我们不仅要导航新的屏幕,还要将一些数据传递屏幕。 例如,我们经常想传递关于我们点击的项目的信息。 请记住:屏幕只是部件™。 在这个例子,我们将创建一个Todos列表。...当点击一个待办事项时,我们将导航一个显示关于待办事项信息的新屏幕(部件)。...我们的例子,当用户点击我们列表的Todo时,我们需要导航DetailScreen。 当我们这样做时,我们也想将Todo传递给DetailScreen。...现在,我们将创建视觉结构,并在接下来的步骤处理动画! 注意:本示例建立导航新屏幕并返回处理点击食谱上。

    4.9K10

    开始使用-编写你的第一个Flutter应用程序 顶

    第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个有状态的小部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航新的屏幕 第7步:使用主题更改UI...该应用程序扩展了使应用程序本身成为小部件的StatelessWidget。 Flutter,大多数情况都是一个小部件,包括对齐,填充布局。...从MyApp删除ScaffoldAppBar实例。 这些将由RandomWordsState管理,这使得用户在下一步从一个屏幕导航另一个屏幕时,可以更轻松地更改应用栏的路由名称。...如果您的应用程序运行不正常,则可以使用以下链接的代码重新进入正轨。 lib/main.dart 第6步:导航新的屏幕 在这一步,您将添加一个显示收藏夹的新屏幕(Flutter称为路由)。...您将学习如何在主路由新路由之间导航Flutter导航器管理包含应用程序路由的堆栈。 将路由推入导航器的堆栈,将显示更新为该路由。 从导航器的堆栈中弹出路由,将显示返回到前一个路由。

    9.5K20

    Flutter 自定义动画底部导航

    在这个博客,我们将探索Flutter的自定义动画底部导航栏。我们将看到如何实现自定义动画底部导航栏的演示程序以及如何在您的 Flutter 应用程序中使用它。...介绍: 显示应用程序底部的Material小部件,用于几个视角中进行选择,通常在 3 5 范围内的某个位置。底部导航栏包含各种选项,如文本标签、图标或两者。...它展示了自定义底部导航栏将如何在您的 Flutter 应用程序工作。它显示当用户点击底部导航栏图标时,它们将被动画化并显示标签文本。当用户点击任何图标时,颜色也会发生变化动画。... appBar ,我们将添加 title backgroundColor。我们将添加 body 并添加到**getBody()小部件。下面我们将深入定义代码。...我们将添加四个具有不同文本的容器并返回**IndexedStack()**小部件部件内部,我们将添加索引是我的变量 _currentIndex children 是列表小部件页面。

    8.9K30
    领券