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

Flutter: pushAndRemoveUntil to a page with a bottomNavigationBar时保持bottomNavigationBar

Flutter是一种跨平台的移动应用开发框架,可以用于快速构建高性能、美观的移动应用程序。在Flutter中,可以使用pushAndRemoveUntil方法来实现页面导航并保持底部导航栏的状态。

pushAndRemoveUntil方法是Navigator类中的一个方法,用于将新页面推入导航栈并移除指定条件之前的所有页面。通过指定一个路由生成器函数和一个条件函数,可以实现在导航栈中保持底部导航栏的状态。

下面是一个示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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 Page 2'),
          onPressed: () {
            Navigator.pushAndRemoveUntil(
              context,
              MaterialPageRoute(builder: (context) => Page2()),
              (route) => false,
            );
          },
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            title: Text('Settings'),
          ),
        ],
      ),
    );
  }
}

在上面的示例中,HomePage是应用的初始页面,其中包含一个按钮,点击按钮后会使用pushAndRemoveUntil方法将Page2推入导航栈并移除之前的所有页面。同时,底部导航栏会保持不变。

需要注意的是,pushAndRemoveUntil方法的第二个参数是一个路由生成器函数,用于创建要推入导航栈的新页面。在示例中,使用MaterialPageRoute来创建Page2页面。

此外,底部导航栏的状态是由Scaffold组件的bottomNavigationBar属性来定义的。在示例中,HomePage和Page2都定义了相同的底部导航栏,以保持一致的状态。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

希望以上信息能对您有所帮助!

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

相关·内容

Flutter Widgets 之 BottomNavigationBar

注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本:1.12.13+hotfix.5 Dart版本:2.7.0 BottomNavigationBar 和 BottomNavigationBarItem...配合Scaffold控件使用可以实现底部导航效果,类似于微信底部的导航效果,下面是一个简单的底部导航案例: Scaffold( bottomNavigationBar: BottomNavigationBar...点击其他2个item没有反应,添加切换效果: int _currentIndex = 0; BottomNavigationBar( onTap: (int index) {...BottomNavigationBar有2种显示模式,其中一种是fixed效果,前面的展示就是fixed效果,这也是默认值,另一种是shifting效果, BottomNavigationBar(...selectedItemColor: Theme.of(context).primaryColor, unselectedItemColor: Colors.black, ... } 设置shifting需要设置

78830
  • Flutter 中使用 NavigationRail 和 BottomNavigationBarFlutter专题33】

    Flutter 中使用 NavigationRail 和 BottomNavigationBar “作者:坚果 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA...成员之一,专注于大前端技术的分享,包括Flutter,鸿蒙,小程序,安卓,VUE,JavaScript等。”...本文将向您展示如何使用NavigationRail和BottomNavigationBarFlutter 中创建自适应布局。我们将浏览一下这个概念,然后通过一个完整的例子来在实践中应用这个概念。...当屏幕很大,我们显示NavigationRail,当屏幕较小时,我们显示BottomNavigationBar。一次只出现其中一个。...类 (flutter.dev) BottomNavigationBar 类(flutter.dev) 后记 您已经学习了一种使用 NavigationRail 和 BottomNavigationBar

    2.1K50

    Flutter学习笔记:BottomNavigationBar实现多个Navigation

    最近我研究了一下Flutter,但是在使用Navigator的时候遇到了一个很头痛的问题,就是当我们去来回切换导航按钮Flutter会重新build,从而导致控件重新Build,从而会失去浏览历史。...这样我们在切换标签不会丢失Navigation历史记录。 如下图: ? multiple-navigators-BottomNavigationBar-animation.gif 如何实现此功能?...1_k5yMOPCem_z5JZVpa6RJCQ.gif 我们真正想要的是将详细页面推到主页面上,但要将BottomNavigationBar保持在底部。...如果我们现在运行应用程序,我们可以看到推送在选择列表项正常工作,并且BottomNavigationBar保持不变。 棒极了!? ?...我们可以独立地推送/弹出每个导航器,并且后台导航员保持他们的状态。? One more thing 如果我们在Android上运行应用程序,当我们按下后退按钮,我们会发现一个有趣的现象: ?

    4.3K20

    Flutter实现页面切换后保持原页面状态的3种方法

    前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,...可以看到,从第二页切换回第一页,第一页的状态已经丢失 第二步:实现底部导航切换保持原页面状态 可能有些小伙伴在搜索后会开始直接使用官方推荐的AutomaticKeepAliveClientMixin...可以看到,现在添加了首页顶部导航,且默认支持左右侧滑,接下来再进一步的完善状态保持 第四步:实现首页顶部导航切换保持原页面状态 ③ 使用AutomaticKeepAliveClientMixin...现在已经可以看到,不管是切换底部导航还是切换首页顶部导航,所有的页面状态都可以被保持,并且在应用第一次加载,终端只看到recommend initState的日志,第一次切换首页顶部导航至vip页面...更新 前面在底部导航介绍了使用IndexedStack和Offstage两种方式实现保持页面状态,但它们的缺点在于第一次加载便实例化了所有的子页面State。

    2.8K30

    Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

    List children 字段 , PageController 用于控制 PageView 中的页面跳转 , children 中就是 PageView 封装的多个界面组件 , 同一间只显示一个...List children PageController 用于控制 PageView 的跳转 , PageController 主要作用是调用 void jumpToPage(int page...滚动到边缘是否反弹 this.pageSnapping = true, // 如果设置 false , 则无法进行页面手势捕捉 this.onPageChanged, // 页面切换回调该函数...官网 : https://flutter.dev/ Flutter 插件下载地址 : https://pub.dev/packages Flutter 开发文档 : https://flutter.cn.../docs ( 强烈推荐 ) 官方 GitHub 地址 : https://github.com/flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程

    6.1K50
    领券