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

在我转到另一个有状态的小部件后,如何将汉堡图标保留在我的flutter应用程序中?

在Flutter中,当你从一个有状态的Widget转移到另一个有状态的Widget时,如果你想要保持汉堡图标(通常用于导航抽屉)始终可见,你可以使用PersistentHeaderDelegate或者AppBar结合NavigatorObserver来实现。

基础概念

  • PersistentHeaderDelegate: 这是一个用于在Flutter中创建持久化头部的委托类,它可以让你在应用的多个页面中保持某些UI元素不变。
  • AppBar: 这是Flutter中用于显示应用栏的Widget,通常包含标题、图标和其他操作按钮。
  • NavigatorObserver: 这是一个监听导航事件的接口,可以用来检测导航栈的变化。

相关优势

  • 用户体验: 保持汉堡图标始终可见可以让用户在任何页面都能快速访问导航抽屉,提高用户体验。
  • 一致性: 在整个应用中保持一致的导航体验。

类型

  • PersistentHeaderDelegate: 用于创建持久化的头部。
  • AppBar: 用于显示应用栏。
  • NavigatorObserver: 用于监听导航事件。

应用场景

适用于需要在多个页面中保持导航图标可见的应用,如电商应用、社交应用等。

解决问题的方法

以下是一个简单的示例代码,展示如何在Flutter应用中使用AppBarNavigatorObserver来保持汉堡图标始终可见:

代码语言: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: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            _navigatorKey.currentState!.openDrawer();
          },
        ),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Page 1'),
              onTap: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => Page1()));
              },
            ),
            ListTile(
              title: Text('Page 2'),
              onTap: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => Page2()));
              },
            ),
          ],
        ),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) => Page1()));
          },
          child: Text('Go to Page 1'),
        ),
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
      body: Center(
        child: Text('This is Page 1'),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
      body: Center(
        child: Text('This is Page 2'),
      ),
    );
  }
}

参考链接

通过这种方式,无论用户导航到哪个页面,汉堡图标都会保留在屏幕的左上角。

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

相关·内容

Flutter常见开发问题

它是如何做到构建应用程序时,它不是只使用特定资源,而是实质上需要所有资源。为什么这有帮助?因为如果将一个图标从一个更改为另一个,则不必完全重建应用程序。...Flutter 应用程序仍然会比 Android 应用程序大一点,但它相当,而且 Flutter 团队一直寻找减少应用程序大小方法。...package允许您将新部件或功能导入您应用程序。package和插件之间一个区别。包通常是纯粹用 Dart 编写新组件或代码,而插件则可以使用本机代码设备端提供更多功能。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕方法。 什么是状态和无状态部件? TL;DR:允许您刷新屏幕部件状态部件。没有状态部件是无状态。...更详细地说,一个内容可以改变动态小部件应该是一个状态部件。无状态部件只能在更改参数时更改内容,因此需要在小部件层次结构位置点上方完成。

6.7K20

Flutter常见开发问题

但是 Flutter 按钮不是将标题作为字符串,而是另一个部件。这意味着**在按钮内你可以文本、图像、图标和几乎任何你可以想象东西,**而不会打破布局限制。...它是如何做到构建应用程序时,它不是只使用特定资源,而是实质上需要所有资源。为什么这有帮助?因为如果将一个图标从一个更改为另一个,则不必完全重建应用程序。...package允许您将新部件或功能导入您应用程序。package和插件之间一个区别。包通常是纯粹用 Dart 编写新组件或代码,而插件则可以使用本机代码设备端提供更多功能。...setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕方法。 什么是状态和无状态部件? TL;DR:允许您刷新屏幕部件状态部件。没有状态部件是无状态。...更详细地说,一个内容可以改变动态小部件应该是一个状态部件。无状态部件只能在更改参数时更改内容,因此需要在小部件层次结构位置点上方完成。

6.8K30
  • 为什么说Flutter让移动开发变得更好?

    Flutter吸收了移动开发领域多年来应用程序开发,状态管理,应用程序架构等方面积累经验,这也是为什么会与React.js如此相似的原因。用Flutter方式来构建应用时正确开始。..._mediaItem), ], ) ); } 构建布局时,将布局各个部分模块化为变量,方法或其他小部件。 例如,图像顶部文字气泡只是另一个部件,它将文本和背景颜色作为参数。...不过,Flutter,这分分钟解决。能够将用户界面的一部分抽取到像Widget这样自包含单元,可以轻松地应用程序甚至跨不同应用程序重复使用这些小部件。...这个应用,布局很多部分都在不同界面上重复使用,并让告诉你:这真的很简单。前面太容易了,决定扩展应用程序,合并电视节目。几个小时也顺利完成了。...这一切都让相信,Flutter不仅仅是另一个跨平台框架,而是更大开始 – 应用程序开发新时代开始。

    2K10

    【译】Flutter 1.20 发布

    Flutter 和 Dart 性能改进 Flutter 团队,我们一直寻找减少应用程序大小和延迟新方法。...不用和SkSL预热动画 如果 Flutter 应用程序首次运行期间出现了不稳定动画,则 Skia Shading Language 着色器将在应用程序构建过程中提供预编译功能,从而可以使其速度提高...Android上现有小部件新鼠标光标 此版本 Flutter 基于 2.9 版本 Dart 构建,它具有一个新基于状态 two-pas UTF-8解码器,该解码器具有 Dart VM 优化解码原语...image 要查看如何将集成 InteractiveViewer 到自己应用程序,请查看API文档,你可以 DartPad 中使用它。...如果你兴趣向 InteractiveViewer 启用 Flutter 应用程序添加新交互,那么你可能也会很高兴听到我们在此版本添加了更多功能来拖动“n”。

    4K10

    Flutter 1.22 正式发布

    您可以iOS 14上尝试使用Flutter另一个功能是App Clips,它是iOS 14一项新功能,它支持10MB以下轻量级应用程序快速,无安装应用程序执行。...仍在使用v1 API旧版应用程序构建过程中将显示弃用警告,该警告指向支持新Android插件API文档 同时,如果您仍然基于v1 Android APIFlutter应用程序,它将继续运行。...举例来说,假设您想在首页上显示一系列小部件,并允许用户点击一个小部件转到专门针对该颜色详细信息页面。 ?...例如,状态恢复不仅适用于Android,iOS应用程序也可以受益。此外,我们正在忙于更新自己窗口小部件,以恢复过程中保持其状态。...预览:DevTools更新网络页面 此版本另一个DevTools预览功能是能够“网络”选项卡查看HTTP和HTTPs响应主体。 ?

    7.5K20

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

    第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个状态部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新屏幕 第7步:使用主题更改UI...Flutter,大多数情况都是一个小部件,包括对齐,填充和布局。 Material库Scaffold小部件提供了默认应用程序栏,标题和控制主屏幕小部件body属性。...lib/main.dart 第3步:添加一个状态部件状态部件是不可变,这意味着它们属性不能改变 - 所有的值都是最终状态部件保持部件生命周期中可能改变状态。...在这一步,您将添加一个状态部件RandomWords,它创建其状态类RandomWordsState。 State类将最终维护小部件建议和最喜欢单词对。...您已经编写了一个iOS和Android上运行交互式Flutter应用程序。 在这个codelab,你: 从头开始创建一个Flutter应用程序。 书写Dart代码。 利用外部第三方库。

    9.5K20

    Flutter构建布局 顶

    第6步:把它放在一起 最后一步,你将这些碎片组装在一起。 这些小部件安排在ListView,而不是列,因为设备上运行应用程序时,ListView会自动滚动。...Flutter,几乎所有东西都是一个小部件 - 甚至布局模型都是小部件。 您在Flutter应用中看到图像,图标和文本都是小部件。...如果您愿意,可以构建仅使用小部件标准小部件应用程序。 如何在Flutter布置单个小部件? 本节介绍如何创建一个简单部件并将其显示屏幕上。...它还显示了一个简单Hello World应用程序完整代码。 Flutter,只需几个步骤即可在屏幕上放置文本,图标或图像。 1.选择一个布局小部件来保存该对象。...处理Flutter盒子约束:讨论小部件如何受其渲染框限制。 Flutter添加资产和图像:说明如何将图像和其他资源添加到应用程序

    43.1K10

    Flutter应用程序添加交互性 顶

    如何创建自定义小部件。 无状态状态部件之间区别。 你如何修改你应用程序,使其对用户输入做出反应? 本教程,您将为仅包含非交互式小部件应用添加交互性。...管理状态部件管理自己状态 父母管理小部件状态 混搭方法 其他交互式小部件 标准小部件 材料组件 资源 准备好 如果您已经Flutter布局构建布局,请跳到下一节。...当小部件状态改变时,状态对象调用setState(),告诉框架重绘小部件本节,您将创建一个自定义状态部件。...当您重新加载应用程序时,星形图标现在应该响应点击。 问题? 如果您无法运行代码,请在IDE查找可能错误。 调试Flutter应用程序可能会有所帮助。...如果有疑问,首先管理父窗口小部件状态。 谁管理状态部件状态? 小部件本身? 父窗口小部件? 都? 另一个对象? 答案是......这取决于依赖高关系。几种有效方法可以让你部件互动。

    4.2K20

    Flutter Widget框架之旅 顶

    Flutter,这两种类型对象具有不同生命周期。 小部件是临时对象,用于构建当前状态应用程序演示文稿。 另一方面,State对象调用build()之间是持久,允许它们记住信息。...更复杂应用程序,小部件层次结构不同部分可能对不同问题负责; 例如,一个小部件可能呈现一个复杂用户界面,其目标是收集特定信息(如日期或位置),而另一个部件可能会使用该信息来更改整体呈现。...Flutter,更改通知通过回调方式“向上”流,而当前状态则“向下”流向呈现状态部件。重定向这一流程共同父母是State。...此模式可让您在小部件层次结构存储更高层级状态,从而使状态持续更长时间。 极端情况下,传递给runApp存储在窗口小部件状态会在应用程序整个生命周期中持续存在。...此外,语义上同步条目意味着保留在状态部件状态将保持附加到相同语义条目而不是视口中相同数字位置上条目。 全局Key 主要文章:GlobalKey 您可以使用全局键来唯一标识子窗口部件

    6.7K20

    Flutter stateless 和 stateful widget 区别

    Flutter stateless 和 stateful widget 区别 介绍 要在 Flutter 构建任何应用程序,我们必须创建一个小部件类,它是 Flutter 应用程序构建块。...Flutter 使用小部件来创建现代移动应用程序Flutter Widget 分为两类:无状态 Widget 和状态 Widget。...考虑到这一点,我们将研究 Flutter 状态状态部件,并解释它们区别。 让我们从这个问题开始:Flutter 中一个小部件状态是什么?...Flutter 内置了几个小部件,它们都分为状态和无状态部件。 无状态部件 Flutter 应用程序运行期间,无状态部件无法更改其状态。这意味着应用程序运行时无法重绘无状态部件。...结论 我们已经介绍了状态和无状态部件之间差异,以帮助您构建更好 Flutter 应用程序。从示例,我们了解了无状态状态部件作用以及如何知道您用例需要哪个类。

    2.3K10

    如何在flutter构建响应式布局(第五节)

    使用相同代码库使您应用程序适应如此多样屏幕尺寸和像素密度始终是一个挑战。 Flutter 设计响应式布局没有硬性规定。本文中,将向您展示一些设计此类布局时可以遵循方法。...继续 Flutter 构建响应式布局之前,想说明一下 Android和iOS如何处理不同屏幕尺寸原生布局。...基本上,它们是可以连接在一起以构建整个应用程序构建块。 请记住, Flutter ,每个屏幕甚至整个应用程序也是小部件!...Flutter 响应能力 正如我之前所说,将介绍开发响应式布局所需重要概念,然后,您可以选择如何在应用程序实现它们。 1. 媒体查询 您可以使用?MediaQuery来检索?...让我们构建示例响应式应用程序时学习最后一个概念。 构建响应式应用程序 现在,我们将应用在上一节描述一些概念。除此之外,您还将学习构建大屏幕布局另一个重要概念:拆分视图。

    2.8K10

    10 个派上用场 Flutter部件

    10 个派上用场 Flutter部件 尝试学习一门新语言可能会令人恐惧和厌烦。很多时候,我们希望我们知道早先存在某些功能。...今天文章将告诉你我希望早点知道最方便几个Flutter部件。 Spacer Spacer 创建一个可调整空白空间,它占据 Flex 容器中小部件之间任何剩余空间,例如行或列。...Spacer(flex: 2), Text('End'), ], ), TextButton.icon 创建带有图标的按钮时,此小部件取代了使用行需要...它提供了一个很好过渡,使应用程序非常流畅。始终为其子小部件添加一个键以确保其正常工作。...SafeArea 此小部件为您部件添加填充,确保您应用不会与操作系统和设备显示功能(如状态栏)发生冲突。

    1.3K20

    6详解AppBar小部件

    由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...Flutter AppBar 是根据Material Design指南构建应用程序组件。它通常位于屏幕顶部,并且能够在其布局包含其他小部件。...Flutter AppBar 布局 leading leading 接受一个小部件,可以分配任何东西——文本、图标,甚至一行多个小部件。...工具栏高度和不透明度 最后,我们工具栏属性。工具栏包含文字,图标,按钮,和其他任何公司前景,除了小部件,如Container和Image。...关于 Flutter AppBar 必须提供所有内容完整演练。希望这篇文章能帮助你未来所有的 Flutter 应用程序创建漂亮 AppBars。

    16.4K10

    Flutter响应式编程:Streams和BLoC

    此后,将向您展示如何在实践实施和使用它们。 什么是Stream? 介绍 为了便于想象Stream概念,我们可以简单把Stream想象为一个两个端口管道,只有其中一个允许插入一些东西。...它给你: 构建仅负责特定活动部分应用程序机会, 轻松模拟一些组件行为,以允许更完整测试覆盖, 轻松重用组件(当前应用程序或其他应用程序其他位置), 重新设计应用程序,并能够不进行太多重构情况下将组件从一个地方移动到另一个地方...当然,这是非常可取。建议如下: (如果有任何业务逻辑)每个页面的顶部一个BLoC, 为什么不是ApplicationBloc来处理应用程序状态? 每个“足够复杂组件”都有相应BLoC。...应用程序不使用任何InheritedWidget 该应用程序几乎是100%BLoCs / Streams驱动,这意味着大多数小部件彼此独立,并且它们应用程序位置 一个实际例子是FavoriteButton...Egan 结论 很长文章,但还有更多的话要说,因为对而言,这是展开Flutter应用程序方法。

    4.2K90

    Flutter 创建漂亮底部导航栏

    一些属性: 「fixed」 (副标题图标停留在中心) 「fixedCircle」 (相同,但在固定图标的所有边上都有一个白色圆圈) 「react」 (上标图标取代点击另一个图标) 「reactCircle...」 (与上标图标白色圆圈相同) 「textIn」 (选定离子出现相应标题) 「titled」 (未选择图标是显示其标题单个图标) 「flip」 (点击图标显示一个 flip 动画) 「custom...预览图: 代码: Convex_Bottom_Bar 演示,首先,我们在这个类创建一个名为 MyHomePage ()状态类,我们创建一个值为 0 变量 selectedpage...条目中,我们通过所有的屏幕,我们希望我们应用程序显示。... Home 类,我们定义一个带有背景颜色文本。

    8.1K10

    端开发技术——解密Flutter响应式布局

    Flutter是一个跨平台应用开发框架,支持各种屏幕大小设备,它可以智能手表这样设备上运行,也可以电视这样大设备上运行。使用相同代码来适应不同屏幕大小和像素密度是一个挑战。...Flutter响应式布局设计没有硬性规则。本文中,将向您展示设计响应式布局时可以遵循一些方法。...使用Flutter构建响应式布局之前,想说明一下Android和iOS是如何处理不同屏幕大小布局。 1....Android,你可以使用VectorDrawable来绘制任何类型插图,比如图标。...它们像积木一样拼凑在一起构建应用程序画面。 记住,Flutter,每个屏幕和整个应用程序也是一个widget!

    2.3K00

    不懂设计产品不是好开发

    在演示应用程序,我们一个饼状图,其中我们需要在每个部分使用不同颜色。另一个例子是用颜色作为不同状态视觉指标,如警报级别、金额变化或性能变化(减少/增加)。...如果这些类别在语义上是独立就会选择方形调和颜色;如果这些类别可以配对,就会选择四方形调和颜色。 另一个例子,我们假设需要为6个类别挑选6种颜色。...通常情况下,公司自己品牌字体,但我们不需要在应用程序中使用他们字体。 为了应用一个字体系统,首先,从Google Fonts挑选了三种字体。...Material指南中,一个很好表格,说明了圆角或切角最小/最大值,以及每个部件形状可以应用到哪些角。例如,一个chip可以一个最大10px圆角半径值,但不能有一个切角。...一个按钮可以一个最大20px圆角半径值,和最大6px切角值。 根据以下观察结果,将形状应用于演示应用程序UI组件。ATA标志清晰圆角。Biohack标志一个几何形状尖锐切口。

    2.5K20

    如何使用 Flutter 创建桌面应用程序

    桌面应用程序具有各种 UI 元素系统窗口内运行。如果您要制作桌面应用程序多种不同框架、UI 工具包和编程语言可供选择。 两种类型桌面应用程序开发 API:特定于平台和跨平台。...,因此可以有效地交付新功能 本文中,将解释如何使用 Flutter 创建、构建和发布原生跨平台桌面应用程序。...使用 Flutter 开发桌面应用程序 本教程将展示如何使用 Flutter 制作一个简单跨平台桌面应用程序。...因此,我们可以r您输入flutter run命令控制台中按键来触发热重载。当应用程序调试模式下运行时,尝试更改文本小部件内容。...也可以看我另一篇文章,在里面详细说明了如何将flutter应用部署到 Windows 上,也就是打包成exe可执行文件。

    4.5K20

    Flutter 自定义动画底部导航栏

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

    8.9K30

    【译】Flutter架构综述

    开发过程Flutter应用运行在一个虚拟机,该虚拟机提供状态变化热重载,而不需要完全重新编译。...应用程序在所有版本操作系统上看起来和感觉是一样,即使操作系统改变了其控件实现。 Composition 小部件通常由许多其他、单一用途部件组成,这些小部件组合起来可以产生强大效果。...相反,它们唯一目的是控制另一个部件布局某些方面。Flutter还包括利用这种组合方法实用工具部件。...Widget state 该框架引入了两大类widget:状态和无状态widget。 许多widget没有可改变状态:它们没有任何随时间变化属性(例如,一个图标或一个标签)。...随着应用程序增长,更先进状态管理方法,减少了创建和使用状态部件仪式,变得更有吸引力。

    5.6K10
    领券