Flutter Widget之NavigationBar使用详解

目录
  • 正文
    • background

正文

这是一个和时间一样古老的故事。您的应用程序有三到五个主要内容区域，您的用户应该能够在任何屏幕之间切换。

那么，在这种情况下，请查看NavigationBar。

现在，您可能会想，“底部们有导航栏吗？，这个新的导航栏小部件有什么特别之处？“

不同之处在于BoottomNavigationBar使用Material 2设计系统，而NavigationBar具有新的Material 3外观和感觉。

例如，药丸形状，它以对比色指示活动的目的地。

要启动并运行，为NavigationBar提供destination列表，当前所选的索引以及每当选择destination时出发的回调而已。

NavigationBar(
    destinations: [
        NavigationDestination(
            icon: Icon(Icons.home),
            label: 'Home',
        ),
        NavigationDestination(
            icon: Icon(Icons.explore),
            label: 'Explore',
        ),
        NavigationDestination(
            icon: Icon(Icons.person),
            label: 'Profile',
        ),
        NavigationDesstination(
            icon: Icon(Icons.settings_rounded,
            label: 'Settings',
        ),
    ],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) {
        setState(() {
            currentPageIndex = index;
        });
    }
)

现在您的应用程序可以使用选定的索引来决定要承铉哪个视图。

Scaffold(
    bottomNavigationBar: NavigationBar(...),
    body: [Widget1, Widget2, Widget3, Widget4][currentPageIndex]
)

您可以使用它并配置诸如labelBehavior

NavigationBar(
    destinations: [...].
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) {...},
    labelBehavior: onlyShowSelected,
)

background

NavigationBar(
    destinations: [...],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) {...},
    backgroundColor: Colors.grey,
)

和animationDuration之类的东西，以便当destination在选中和未选中之间更改状态时。

NavigationBar(
    destinations: [...],
    selectedIndex: currentPageIndex,
    onDestinationSelected: (int index) {...},
    animationDuration: Duration(ms: 1000),
)

准备好在大屏幕访问您的应用程序了吗？将NavigationBar与NaviigationRail栏配对，您将立即拥有一个完全相应的导航系统。

如果想了解有关NavigationBar的内容，或者关于Flutter的其他功能，请访问 flutter.dev

以上就是Flutter Widget之NavigationBar使用详解的详细内容，更多关于Flutter Widget NavigationBar的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter Widget 之StatefulBuilder构建方法详解

    Flutter Widget 之StatefulBuilder构建方法详解

    目录 正文 性能问题解决 正文 你曾否意识到你需要拆分一个大型的构建方法,但又觉得这听起来很费劲? 试试StatefulBuilder 以最小的代价获得一个个单独的小部件的所有性能 想象一下,这样的一个小部件,有一个可以切换单一标志的便宜的子部件,然后是一个昂贵的小部件. 除非绝对必要,否则你不会想要重建它 bool isExpanded = false; Widget build(context) { return Column( children: [ InexpendsiveStatefu

  • Flutter Widgets之标签类控件Chip详解

    Flutter Widgets之标签类控件Chip详解

    目录 概述: RawChip Chip InputChip ChoiceChip FilterChip 总结: 概述: Flutter 标签类控件大全ChipFlutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆. RawChip Material风格标签控件,此控件是其他标签控件的基类,通常情况下,不会直接创建此控件,而是使用如下控件: Chip InputChip ChoiceChip FilterChip

  • Flutter Widgets粘合剂CustomScrollView NestedScrollView滚动控件

    目录 概述: CustomScrollView 相互嵌套场景 NestedScrollView 滚动隐藏AppBar SliverAppBar展开折叠 与TabBar配合使用 总结: 概述: Flutter中常用的滑动布局 ScrollView 有 SingleChildScrollView.NestedScrollView.CustomScrollView. SingleChildScrollView 用来处理简单可滑动的页面布局视图,如一般的数据详情页面,当内容足够多时,一屏显示不下时,就需

  • flutter InheritedWidget使用方法总结

    目录 引言 didChangeDependencies 如何使用? 结论 引言 InheritedWidget,flutter中非常重要的一个功能组件.比如我们在应用的根 widget 中通过InheritedWidget共享了一个数据,那么我们便可以在任意子 widget 中来获取该共享的数据. didChangeDependencies 说到 InheritedWidget ,我们不得不聊聊 state 对象中的 didChangeDependencies 方法.当子控件依赖使用了父控件中的

  • Flutter Widget 之FocusableActionDetector使用详解

    Flutter Widget 之FocusableActionDetector使用详解

    目录 Material按钮 GestureDetector自定义按钮 为按钮添加一些条件性的样式 Material按钮 Material按钮会很好 但我们知道它们不一定适合你的应用程序,所以你要自己编写.可悲的是,从头开始编写自己的空间可能是一项艰巨的工作. 桌面用户期待悬停高亮.焦点和键盘快捷键,这是很难做好的. GestureDetector自定义按钮 是这样的,你在你的应用程序中创建一个自定义的按钮, 使用GestureDetector,当你点击它的时候,按钮会做一些事情 GestureD

  • Flutter Widgets MediaQuery控件屏幕信息适配

    Flutter Widgets MediaQuery控件屏幕信息适配

    目录 MediaQuery MediaQueryData 使用场景 根据尺寸构建不同的布局 系统字体变化 第三方屏幕的适配框架: 设置字体不随系统字体大小进行改变 APP全局 总结: MediaQuery 通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下: var data = MediaQuery.of(context); 此方式必须放在MediaQuery作用域内,否则会抛出异常,MaterialApp和WidgetsAp

  • Flutter Widget之FutureBuilder使用示例详解

    Flutter Widget之FutureBuilder使用示例详解

    目录 正文 正文 本质上Flutter和Dart是异步的,Dart是Futures使你能够管理IO而不用担心线程或死锁. 例如,从应用程序外部加载数据需要时间,而Futures允许Dart先处理其他任务直到请求的数据可用. 但是涉及Future时,你如何构建Flutter小部件呢? 输入FutureBuilder,这是处理Futures的构造器 FutureBuilder( future: _data, builder: _myBuilderFunction, ) FutureBuilder让你

  • Flutter Widget 之package mason实现详解

    Flutter Widget 之package mason实现详解

    目录 正文 使用Mason砖块 运行mason make 正文 Flutter有个悠久的传统,便是运行flutter create并删除所有内容,然后在所有标准样板文件(boilerplate)当中尽力复制和粘贴,这很费时又容易出错,而且比报税更无趣,但是是否别无他法? 进入Mason,这是用于欧快速组装新项目或功能的软件包,可以从成为“砖块”的自定义模版中生成代码,而这些模版根据你的项目的特定值呈现 使用Mason砖块 例如想象一下,你正为Flutter新项目使用Mason砖块的pubspec

  • Flutter Widget之NavigationBar使用详解

    目录 正文 background 正文 这是一个和时间一样古老的故事.您的应用程序有三到五个主要内容区域,您的用户应该能够在任何屏幕之间切换. 那么,在这种情况下,请查看NavigationBar. 现在,您可能会想,“底部们有导航栏吗?,这个新的导航栏小部件有什么特别之处?“ 不同之处在于BoottomNavigationBar使用Material 2设计系统,而NavigationBar具有新的Material 3外观和感觉. 例如,药丸形状,它以对比色指示活动的目的地. 要启动并运行,为N

  • Flutter Http网络请求实现详解

    Flutter Http网络请求实现详解

    Http网络请求是一门开发语言里比较常用和重要的功能,主要用于资源访问.接口数据请求和提交.上传下载文件等等操作,Http请求方式主要有:GET.POST.HEAD.PUT.DELETE.TRACE.CONNECT.OPTIONS.本文主要GET和POST这两种常用请求在Flutter中的用法,其中对POST将进行着重讲解.Flutter的Http网络请求的实现主要分为三种:io.dart里的HttpClient实现.Dart原生http请求库实现.第三方库实现.后面将会给大家详细讲解这几种区别

  • Flutter悬浮按钮FloatingActionButton使用详解

    目录 1.普通用法 2.修改悬浮按钮位置 3.修改悬浮按钮大小 4.去除悬浮按钮切换动画 5.一般的自定义悬浮按钮样式 6.彻底的自定义悬浮按钮样式 1.普通用法 floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: (){ print('不要啊~'); }, ), 2.修改悬浮按钮位置 继承FloatingActionButtonLocation类,重写对应方法自定义位置 import 'p

  • Android Flutter自适应瀑布流案例详解

    Android Flutter自适应瀑布流案例详解

    目录 Flutter自适应瀑布流 根据效果图可以分为四步: 1.图片自适应: 2.自适应标签: 3.上拉刷新和下拉加载 4.底部的点赞按钮 Flutter自适应瀑布流 前言:在电商app经常会看到首页商品推荐的瀑布流,或者类似短视频app首页也是瀑布流,这些都是需要自适应的,才能给用户带来好的体验 (具体代码请联系我,当天会回复) 话不多说先上效果图: 根据效果图可以分为四步: 图片自适应 自适应标签 上拉刷新和下拉加载 底部的点赞按钮可以去掉或者自己修改样式,我这里使用的like_button

  • UI 开源组件Flutter图表范围选择器使用详解

    UI 开源组件Flutter图表范围选择器使用详解

    目录 前言 1. 使用 chart_range_selector 2. ChartRangeSelector 实现思路分析 3.核心代码实现分析 4. 结合图表使用 前言 最近有一个小需求:图表支持局部显示,如下底部的区域选择器支持 左右拖动调节中间区域 拖拽中间区域,可以进行移动 图表数据根据中间区域的占比进行显示部分数据 这样当图表的数据量过大,不宜全部展示时,可选择的局部展示就是个不错的解决方案.由于一般的图表库没有提供该功能,这里自己通过绘制来实现以下,操作效果如下所示: 1. 使用 c

  • 封装flutter状态管理工具示例详解

    目录 引言 RxBinder 代码实现 Demo 完美运行 引言 关于 Flutter 状态管理,公司项目使用的是Bloc方案.Bloc 其实本质上是 provider 的封装扩展库,整体通过 InheritedWidget .Notifier 外加 Stream中转实现状态变更通知. 关于 Bloc 实现原理,有兴趣的同学可以观看这篇文章 Bloc原理解析 RxBinder 撇开Bloc内部实现策略,小轰尝试基于数据驱动模型,自定义一套状态管理工具.构思如下: 主要成员如下: RxBinder

  • 正确在Flutter中添加webview实现详解

    目录 前言 安装 运行项目遇到的问题 前言 为什么要在flutter中引入webview?这不是废话么,当然是为了加载一个网页,这不是移动端最基本的需求么,哈哈!说的真不错,接下来我要是告诉你我的用法,你可能要大吃一惊.我的用处很简单,那就是在webview中再加载一个flutter编译成web的项目.有没有吓到你.别怕,我这么做的原因很简单,就是为了热更新.可能在flutter中实现热更新的方法有很多,但我敢说我这么做就是最好的热更新方式.当我内容发生变更是时候,我不需要继续去审核,只需要在服

  • flutter text组件使用示例详解

    目录 正文 Text组件 Text组件构造器上的主要属性 正文 flutter组件的实现参考了react的设计理念,界面上所有的内容都是由组件构成,同时也有状态组件和无状态组件之分,这里简单介绍最基本的组件. 在组件代码的书写方式上,web端开发的样式主要有由css进行控制,而客户端开发根据使用的技术栈不同,写法也稍微有些不同:ReactNative的写法和web比较类似,但是ReactNative是使用StyleSheet.create()方法创建样式对象,以内联的方式进行书写. import

  • Flutter CustomPaint自定义绘画示例详解

    目录 正文 CustomPaint 介绍 绘制点 PointMode3种模式 绘制线 和路径 绘制五子棋 总结 正文 CustomPaint是Flutter中用于自由绘制的一个widget,它与android原生的绘制规则基本一致,以当前Canves(画布)的左上角为原点进行绘制.在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 Cu

随机推荐