flutter:BottomNavigationBar和TabBar

区别

BottomNavigationBarr和TabBar都是用于创建导航栏的组件,但它们有一些区别。

  1. 位置不同:BottomNavigationBar通常位于屏幕底部,用于主要导航;而TabBar通常位于屏幕顶部或底部,用于切换不同的视图或页面。

  2. 样式不同:BottomNavigationBar是一个水平的导航栏,通常包含固定数量的图标和标签。它提供了固定的样式,并且可以自动处理选中和未选中状态的切换。

    TabBar可以水平或垂直显示,通常用于展示多个选项卡。它提供了更多的自定义选项,比如可以设置自定义的标签样式、背景色等。

  3. 功能不同:BottomNavigationBar通常用于在不同的主页面之间进行导航,每个图标对应一个页面。它的功能相对简单,适用于主要导航。

    TabBar用于切换不同的视图或页面,并且可以与TabBarView一起使用来展示与每个选项卡对应的内容。它在应用程序中的使用场景更加广泛,适用于切换和展示多个相关页面或功能。

总之,BottomNavigationBar适用于简单的主导航,TabBar适用于更复杂的页面切换和内容展示。

示例:来源于qq阅读

BottomNavigationBar
在这里插入图片描述
TabBar

BottomNavigationBar

BottomNavigationBar是Flutter中用于创建底部导航栏的组件。它通常与TabBarView一起使用,用于在不同的选项卡之间切换内容。

BottomNavigationBar有一个items属性,其中可以定义导航栏的每个选项卡。每个选项卡都可以包含一个图标和一个文本标签。

class SwitcherContainer extends StatefulWidget {const SwitcherContainer({Key? key}) : super(key: key);SwitcherContainerState createState() => SwitcherContainerState();
}class SwitcherContainerState extends State<SwitcherContainer> {String name = '首页';List<String> nameList = ['首页', '书籍', '我的'];// 激活项int _currentIndex = 0;Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('导航'),),body: Center(child: Text(name),),bottomNavigationBar: BottomNavigationBar(items: const [BottomNavigationBarItem(label: '首页', icon: Icon(Icons.home)),BottomNavigationBarItem(label: '书籍', icon: Icon(Icons.book)),BottomNavigationBarItem(label: '我的', icon: Icon(Icons.perm_identity)),],currentIndex: _currentIndex,// 激活颜色selectedItemColor: Colors.orange,//  点击事件onTap: (index) {setState(() {_currentIndex = index;name = nameList[index];});},),);}
}

在这里插入图片描述
如果没有特殊需求的话,使用系统提供的就可以。如果想要点不太一样的可以看一下下面这两个库:

  • curved_navigation_bar
  • google_nav_bar

curved_navigation_bar

一个易于实现曲面导航条

官方地址
https://pub-web.flutter-io.cn/packages/curved_navigation_bar

安装

flutter pub add curved_navigation_bar

简单使用

class SwitcherContainerState extends State<SwitcherContainer> {String name = '首页';List<String> nameList = ['首页', '书籍', '我的'];// 激活项int _currentIndex = 0;Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('导航'),),body: Stack(children: [Container(color: Colors.blueAccent,width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,child: null,),Container(color: Colors.white,width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height - 150,child: Text(name),)],),bottomNavigationBar: CurvedNavigationBar(items: const [Icon(Icons.home),Icon(Icons.book),Icon(Icons.perm_identity)],height: 60,backgroundColor: Colors.blueAccent,//激活项index: _currentIndex,//  点击事件onTap: (index) {setState(() {_currentIndex = index;name = nameList[index];});},),);}
}

在这里插入图片描述
这个最好像我上面那样再调整一下,不然有点奇怪,比如:
在这里插入图片描述

bottom_navy_bar

一个美丽而生动的底部导航。导航栏使用您当前的主题,但您可以自由自定义

官方地址
https://pub-web.flutter-io.cn/packages/bottom_navy_bar

安装

flutter pub add bottom_navy_bar

简单使用

class SwitcherContainerState extends State<SwitcherContainer> {String name = '首页';List<String> nameList = ['首页', '书籍', '我的'];// 激活项int _currentIndex = 0;Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('导航'),),body: Center(child: Text(name),),bottomNavigationBar: BottomNavyBar(//  当前选中项selectedIndex: _currentIndex,//  列表items: [BottomNavyBarItem(textAlign: TextAlign.center,icon: const Icon(Icons.home),title: const Text("首页")),BottomNavyBarItem(textAlign: TextAlign.center,icon: const Icon(Icons.book),title: const Text("书架")),BottomNavyBarItem(textAlign: TextAlign.center,icon: const Icon(Icons.perm_identity),title: const Text("我的"))],//  选中事件onItemSelected: (index) => setState(() {_currentIndex = index;name = nameList[index];})),);}
}

在这里插入图片描述

TabBar

在Flutter中,TabBar是一个常用的小部件,用于创建一个具有选项卡的导航栏。它通常与TabBarView一起使用,以实现在不同选项卡之间切换内容的功能。

TabBarTabBarTabBarView两个关键组件组成。

TabBar:TabBar小部件定义了选项卡的外观和交互方式。它可以包含多个选项卡,每个选项卡都由一个Tab对象表示。可以通过设置controller属性来指定与TabBarView关联的TabController,以便在选项卡之间进行切换。

TabBarViewTabBarView``小部件是一个可滚动的容器,用于显示与当前选中选项卡相关联的内容。每个选项卡对应一个子小部件,并且可以通过设置controller属性来与TabBar`关联。

class SwitcherContainer extends StatefulWidget {const SwitcherContainer({Key? key}) : super(key: key);SwitcherContainerState createState() => SwitcherContainerState();
}class SwitcherContainerState extends State<SwitcherContainer>with SingleTickerProviderStateMixin {// 控制器late TabController tabController;void initState() {super.initState();tabController = TabController(length: 3, vsync: this);}void dispose() {super.dispose();//  释放tabController.dispose();}Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('TabBar Demo'),bottom: TabBar( // 使用TabBar作为AppBar的bottom属性controller: tabController, // 关联TabControllertabs: const [Tab(text: 'Tab 1'),Tab(text: 'Tab 2'),Tab(text: 'Tab 3'),],),),body: TabBarView( // 使用TabBarView作为bodycontroller: tabController, // 关联TabControllerchildren: const [Center(child: Text('Content of Tab 1')),Center(child: Text('Content of Tab 2')),Center(child: Text('Content of Tab 3')),],),);}
}

注意点:

  • 在Flutter中,TabBarTabBarView之间的切换通常需要使用动画效果。为了实现这种动画效果,需要使用TickerProvider,它提供了一个Ticker对象,用于生成动画的时间。而SingleTickerProviderStateMixin是一个实现了TickerProvider的混合类。

在这里插入图片描述
或者

return Column(children: [TabBar(controller: tabController,indicatorColor: Colors.red, // 设置选中选项卡下方的指示器颜色labelColor: Colors.blue, // 设置选中选项卡的文本颜色unselectedLabelColor: Colors.grey, // 设置未选中选项卡的文本颜色tabs: const [Tab(text: 'Home',),Tab(text: 'Settings',),],),Expanded(child: TabBarView(controller: tabController,children: const [Center(child: Text("Home"),),Center(child: Text("Settings"),)],),),],);

在这里插入图片描述
这里推荐一下:tab_indicator_styler,这个库是用来修改指示器样式的

官方地址
https://pub-web.flutter-io.cn/packages/tab_indicator_styler

安装

flutter pub add tab_indicator_styler

基本使用

import 'package:tab_indicator_styler/tab_indicator_styler.dart';
Scaffold(appBar: AppBar(toolbarHeight: 10,bottom: TabBar(// 使用TabBar作为AppBar的bottom属性controller: tabController, // 关联TabControllerindicatorSize: TabBarIndicatorSize.tab,  // 设置指示器宽度// 指示器样式indicator: MaterialIndicator(height: 5,topLeftRadius: 8,topRightRadius: 8,horizontalPadding: 50,tabPosition: TabPosition.bottom,color: Colors.white),tabs: const [Tab(text: 'Tab 1'),Tab(text: 'Tab 2'),Tab(text: 'Tab 3'),],),),body: TabBarView(// 使用TabBarView作为bodycontroller: tabController, // 关联TabControllerchildren: const [Center(child: Text('Content of Tab 1')),Center(child: Text('Content of Tab 2')),Center(child: Text('Content of Tab 3')),],),);

注意:MaterialIndicator风格的指示器的宽度必须使用indicatorSize: TabBarIndicatorSize.tab,也就是默认值,否则会报错
在这里插入图片描述

indicator: DotIndicator(radius: 5,color: Colors.orange,//  圆点距离文字的间距,正数在下面,负数在上面distanceFromCenter: 20,),

在这里插入图片描述

indicator: RectangularIndicator(bottomLeftRadius: 30,bottomRightRadius: 30,topLeftRadius: 30,topRightRadius: 30,),

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/13779.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java设计模式-观察者模式

什么是观察者模式 观察者模式&#xff08;Observer&#xff09;是软件设计中的一种行为模式。 它定义了对象之间的一对多关系&#xff0c;其中如果一个对象改变了状态&#xff0c;所有依赖它的对象都会自动被通知并更新。 这种模式包含了两种主要的角色&#xff0c;即被观察…

AI 绘画Stable Diffusion 研究(二)sd模型ControlNet1.1 介绍与安装

部署包作者:秋葉aaaki 免责声明: 本安装包及启动器免费提供 无任何盈利目的 大家好&#xff0c;我是风雨无阻。 众所周知&#xff0c;StableDiffusion 是非常强大的AI绘图工具&#xff0c;需要详细了解StableDiffusion的朋友&#xff0c;可查看我之前的这篇文章&#xff1a; …

[SQL挖掘机] - 多表连接

介绍: 在 SQL 中&#xff0c;多表连接是指将多个表根据某些条件进行联接&#xff0c;以获取相关联的数据。这允许我们跨多个表进行查询&#xff0c;并且根据表之间的关系获取所需的结果。 作用: 当在多个表中存储相关数据时&#xff0c;使用多表连接可以将这些表组合起来以获…

springboot框架下,请使用@ConfigurationProperties替代@Value加载配置

一、背景 程序启动时&#xff0c;详细报错见下&#xff1a; 10:40:31.965 [main] ERROR org.springframework.boot.SpringApplication - Application run failed org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name ‘redisDi…

Tribon二次开发- tbbatchjob

在Tribon安装目录下C:\Tribon\M3\Bin里面有许多未知用途的exe,有的双击后时一个DOS终端,有的一闪而过,有的需要按照提示输入信息,有的需要提前在指定的目录配置文件,该如何使用呢? 这些exe大多可以在Tribon以外通过.NET来使用,有的可以通过添加.NET项目引用来使用,有的…

Spring Cloud Alibaba - Nacos源码分析(三)

目录 一、Nacos客户端服务订阅的事件机制 1、监听事件的注册 2、ServiceInfo处理 serviceInfoHolder.processServiceInfo 一、Nacos客户端服务订阅的事件机制 Nacos客户端订阅的核心流程&#xff1a;Nacos客户端通过一个定时任务&#xff0c;每6秒从注册中心获取实例列表&…

filebeat介绍

1、filebeat概述 Filebeat是用于转发和集中日志数据的轻量级传送工具。Filebeat监视您指定的日志文件或位置&#xff0c;收集日志事件&#xff0c;并将它们转发到Elasticsearch或 Logstash或kafka进行索引 1.1 Filebeat两个主要组件 prospector 和 harvester。 prospector&a…

Flink CEP(二) 运行源码解析

通过DemoApp学习一下&#xff0c;CEP的源码执行逻辑。为下一篇实现CEP动态Pattern奠定理论基础。 1. Pattern的定义 Pattern<Tuple3<String, Long, String>,?> pattern Pattern.<Tuple3<String, Long, String>>begin("begin").where(new…

数据分析-关于指标和指标体系

一、电商指标体系 二、指标体系的作用 三、统计学中基本的分析手段

移远通信推出新一代高算力智能模组SG885G-WF,为工业和消费级IoT应用带来全新性能标杆

2023年7月24日&#xff0c;全球领先的物联网整体解决方案供应商移远通信宣布&#xff0c;正式推出其新一代旗舰级安卓智能模组SG885G-WF。该智能模组具有高达48 TOPS 的AI综合算力、强大性能及丰富的多媒体功能&#xff0c;非常适用于需要高处理能力和多媒体功能的工业和消费者…

OpenCV 对轮廓进行多边形逼近(Polygon Approximation)

在 OpenCV 中&#xff0c;cv::approxPolyDP 是一个函数&#xff0c;用于对轮廓进行多边形逼近&#xff08;Polygon Approximation&#xff09;。它可以将复杂的轮廓逼近为简化的多边形&#xff0c;从而减少轮廓的数据点&#xff0c;使轮廓更加紧凑。 函数原型如下&#xff1a;…

react钩子函数

React组件的生命周期包括多个阶段和方法&#xff0c;用于在组件不同的生命周期时执行特定的操作。以下是React类组件中常见的生命周期方法&#xff1a; 挂载阶段&#xff08;Mounting Phase&#xff09;&#xff1a; constructor&#xff1a;组件实例化时调用&#xff0c;用于初…

如何在win10环境下配置强化学习gym库(使用vscode)

我是通过anacondavscode完成的gym库的使用&#xff0c;只是把案例跑起来了&#xff0c;具体步骤如下&#xff1a; 1、安装anaconda,参考链接&#xff1a;https://www.jianshu.com/p/2f3be7781451 我其实就是生安装的&#xff0c;也没有去配置环境啥的&#xff0c;就是下载安…

FANUC机器人SRVO-217故障报警原因分析及参考解决办法

FANUC机器人SRVO-217故障报警原因分析及参考解决办法 如下图所示,示教器提示:SRVO-217紧急停止电路板未找到, 查阅手册可以看到以下的报警说明: 故障原因: 通电时未能识别紧急停止电路板或者增设的安全I/O装置。连接有多个安全I/O装置的系统中,在报警信息的最后,会显示发…

进程_PCB 的理解

目录 一. PCB 的概念 1. 为什么需要PCB 2. PCB的属性 二. task struct 1. task struct 介绍 2. 查看进程指令 3. PID 4. PPID 父进程是什么&#xff1f; 为什么要有父进程&#xff1f; 5. fork 创建子进程 1) fork 后的现象 为什么会打印两次&#xff1f; 2) 的返…

自动驾驶感知系统--惯性导航定位系统

惯性导航定位 惯性是所有质量体本身的基本属性&#xff0c;所以建立在牛顿定律基础上的惯性导航系统&#xff08;Inertial Navigation System,INS&#xff09;(简称惯导系统)不与外界发生任何光电联系&#xff0c;仅靠系统本身就能对车辆进行连续的三维定位和三维定向。卫星导…

fastadmin

什么是fastadmin FastAdmin是一个基于PHP的开源Web应用程序开发框架&#xff0c;它是基于ThinkPHP和其他库开发的。FastAdmin旨在通过提供模块化、可扩展和用户友好的平台来简化Web应用程序的开发。它带有各种内置功能和特性&#xff0c;使开发人员能够快速构建功能强大且可定…

Linux学成之路(基础篇0(二十三)MySQL服务(主从MySQL服务和读写分离——补充)

目录 一、MySQL Replication概述 优点 异步复制&#xff08;Asynchronous repication&#xff09; 全同步复制&#xff08;Fully synchronous replication&#xff09; 半同步复制&#xff08;Semisynchronous replication&#xff09; 三、MySQL支持的复制 四、部署主从…

Linux 配置免密登录

Linux 配置免密登录 实例# 生成公钥和私钥 ssh-keygen -t rsa Tips: 执行后会在~/.ssh/目录下创建 id_rsa 和 id_rsa.pub 文件 生成省份认证文件 ssh-copy-id -i ~/.ssh/id_rsa.pub root@192.168.0.18 Tips: 三次回车; 作用是将本地公钥填充到一个远程主机192.168.0.18的 au…

ant-design-vue中table组件使用customRender渲染v-html

ant-design-vue遇到table中列表数据需要高亮渲染 1、customRender可以使用&#xff0c;但是使用v-html发现不生效还报错 const columns [title: name,dataIndex: name,customRender: (val, row) > {return <span v-html{val}></span>} ]2、customeRender函数…