flutter：BottomNavigationBar和TabBar

news2024/12/24 22:10:28

区别

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);

  @override
  SwitcherContainerState createState() => SwitcherContainerState();
}

class SwitcherContainerState extends State<SwitcherContainer> {
  String name = '首页';
  List<String> nameList = ['首页', '书籍', '我的'];
  // 激活项
  int _currentIndex = 0;

  @override
  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;

  @override
  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;

  @override
  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一起使用，以实现在不同选项卡之间切换内容的功能。

TabBar由TabBar和TabBarView两个关键组件组成。

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

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

class SwitcherContainer extends StatefulWidget {
  const SwitcherContainer({Key? key}) : super(key: key);

  @override
  SwitcherContainerState createState() => SwitcherContainerState();
}

class SwitcherContainerState extends State<SwitcherContainer>
    with SingleTickerProviderStateMixin {
  // 控制器
  late TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    //  释放
    tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TabBar Demo'),
        bottom: TabBar( // 使用TabBar作为AppBar的bottom属性
          controller: tabController, // 关联TabController
          tabs: const [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
            Tab(text: 'Tab 3'),
          ],
        ),
      ),
      body: TabBarView( // 使用TabBarView作为body
        controller: tabController, // 关联TabController
        children: const [
          Center(child: Text('Content of Tab 1')),
          Center(child: Text('Content of Tab 2')),
          Center(child: Text('Content of Tab 3')),
        ],
      ),
    );
  }
}

注意点：

  • 在Flutter中，TabBar和TabBarView之间的切换通常需要使用动画效果。为了实现这种动画效果，需要使用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, // 关联TabController
       indicatorSize: 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作为body
     controller: tabController, // 关联TabController
     children: 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.coloradmin.cn/o/792397.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【2023】java数据结构-时间、空间复杂度分析

【2023】java数据结构-时间、空间复杂度分析

1、算法效率 算法效率分析分为两种&#xff1a;第一种是时间效率&#xff0c;第二种是空间效率。时间效率被称为时间复杂度&#xff0c;而空间效率被称作空间复杂度。 时间复杂度主要衡量的是一个算法的运行速度&#xff0c;而空间复杂度主要衡量一个算法所需要的额外空间 2、…
阅读更多...
基于Flask+Mongodb的网络文章系统

基于Flask+Mongodb的网络文章系统

在这个软件&#xff0c;你可以编辑文章&#xff0c;管理数据。 注册登录
阅读更多...
使用dockerfile来配置lnmp并运行wordpress以及镜像缩小体积

使用dockerfile来配置lnmp并运行wordpress以及镜像缩小体积

docker dockerfile创建镜像1.创建工作目录2.将各项安装包放入到对应的目录中3.在centos目录中用dockerfile创建centos&#xff1a;jiang镜像用来准备依赖包4.创建依赖包镜像5.创建docker1网段6.在centos&#xff1a;jiang依赖包镜像的前提下创建lnmp各个镜像进入各个目录编辑Do…
阅读更多...
python+monkey+ 监控 crash,性能统计

python+monkey+ 监控 crash,性能统计

目录 前言&#xff1a; monkey 压力测试 android monkey.ini 配置文件 代码分析 前言&#xff1a; 在软件开发中&#xff0c;测试和监控是非常重要的一个环节&#xff0c;它可以帮助我们更加全面地检测软件中的安全漏洞和风险。Python 是一种常用的脚本语言&#xff0c;可以…
阅读更多...
软考高项（五）信息系统工程 ★重点集萃★

软考高项（五）信息系统工程 ★重点集萃★

&#x1f451; 个人主页 &#x1f451; &#xff1a;&#x1f61c;&#x1f61c;&#x1f61c;Fish_Vast&#x1f61c;&#x1f61c;&#x1f61c; &#x1f41d; 个人格言 &#x1f41d; &#xff1a;&#x1f9d0;&#x1f9d0;&#x1f9d0;说到做到&#xff0c;言出必行&am…
阅读更多...
【Python学习笔记】：whl安装地址教程链接存档

【Python学习笔记】：whl安装地址教程链接存档

装Sklearn包的时候遇到了莫名其妙的问题&#xff0c;最后发现是少了whl文件&#xff0c;经过多方搜索找到一些比较靠谱的教程帖子&#xff1a; whl文件下载网站&#xff1a;https://www.lfd.uci.edu/~gohlke/pythonlibs/ 无需翻墙 知乎上很全面的安装教程&#xff1a;https://z…
阅读更多...
接口用例如何写？接口测试用例设计方法（详解）

接口用例如何写？接口测试用例设计方法（详解）

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、接口常遇见的b…
阅读更多...
【TiDB理论知识 07】SQL执行流程

【TiDB理论知识 07】SQL执行流程

一 DML语句读写流程 1 DML语句读流程概要 用户发出SQL 被协议层接收 Protocal Layer 通过PD获取时间戳 parse模块 解析SQL&#xff0c;通过词法解析 与 语法解析 生成AST语法树 编译SQL Compile模块 ,区分点查 与 非点查&#xff0c;生成执行计划 发送给Executor,从TIKV获…
阅读更多...
【尚硅谷】索引优化分析

【尚硅谷】索引优化分析

目录 1. 常用指令查使用引擎的指令 sql 优化合并去重分页显示模糊查询 索引优化单表优化两表优化 1. 常用指令 常用指令&#xff1a; 查询日志&#xff1a;默认关闭&#xff0c;记录查询的sql语句&#xff08;比如慢查询&#xff0c;大于多少秒的都记录&#xff09;&#xff0…
阅读更多...
Linux共享库库+例子

Linux共享库库+例子

1.什么是共享库&#xff1f;有什么优点&#xff1f;和静态库有什么区别&#xff1f; Linux动态库&#xff08;Dynamic Link Library&#xff0c;缩写为DLL&#xff09;是一种在Linux系统中使用的共享库&#xff08;Shared Library&#xff09;。与静态库不同&#xff0c;动态库…
阅读更多...
船舶推进系统故障诊断（Python代码，多通道信息融合）

船舶推进系统故障诊断（Python代码，多通道信息融合）

1.代码运行环境要求&#xff1a;TensorFlow版本>2.4.0&#xff0c;python版本>3.6.0 船舶推进系统是船舶的重要组成部分&#xff0c;其功能是提供动力以推动船舶前进。故障可能由多种因素引起&#xff0c;以下是船舶推进系统常见的故障类型&#xff1a; 发动机故障&…
阅读更多...
k8s部署新版elasticsearch+kibana并配置快照备份

k8s部署新版elasticsearch+kibana并配置快照备份

版本:es 7.17.6 kibana 7.17.6 k8s:1.19.16 一、介绍 Elasticsearch和Kibana是一对强大的开源工具&#xff0c;通常一起使用以构建实时数据分析和可视化解决方案。 Elasticsearch: Elasticsearch是一个分布式、高性能的实时搜索和分析引擎。它构建在开源搜索引擎库Lucene之上…
阅读更多...
mysql在完全没有网络是安装，全是小红叉

mysql在完全没有网络是安装，全是小红叉

阅读更多...
Java基础阶段学习哪些知识内容？

Java基础阶段学习哪些知识内容？

Java是一种面向对象的编程语言&#xff0c;刚接触Java的人可能会感觉比较抽象&#xff0c;不要着急可以先从概念知识入手&#xff0c;先了解Java&#xff0c;再吃透Java&#xff0c;本节先来了解下Java的基础语法知识。 对象&#xff1a;对象是类的一个实例&#xff0c;有状态…
阅读更多...
2023.07.26【微生物】|qiime2组间分析，ANCOM算法介绍与结果解读

2023.07.26【微生物】|qiime2组间分析，ANCOM算法介绍与结果解读

目录 摘要ANCOM简介主要步骤数据聚合添加伪计数计算特征差异 结果解读火山图差异显著特征统计表差异显著特征百分位数统计表优缺点 总结 摘要 在使用qiime2进行16S/ITS分析的时候&#xff0c;少不了对样品进行组间分析。除了常见的PicRust和Lefse分析之外&#xff0c;qiime2自…
阅读更多...
web前端tips：js继承——借用构造函数继承

web前端tips：js继承——借用构造函数继承

上篇文章给大家分享了 js继承中的原型链继承 web前端tips&#xff1a;js继承——原型链继承 在文章末尾&#xff0c;我提到了 原型链的继承&#xff0c;子类需要传递参数给父类的构造函数&#xff0c;就无法通过直接调用父类的构造函数来实现&#xff0c;需要通过中间的过程来…
阅读更多...
分享5款有点冷门的实用派软件

分享5款有点冷门的实用派软件

​ 分享5款冷门但值得下载的Windows软件&#xff0c;个个都是实用&#xff0c;你可能一个都没见过&#xff0c;但是 我觉得你用过之后可能就再也离不开了。 系统监控——XMeters ​ XMeters是一个系统监控软件&#xff0c;可以让你在任务栏上显示各种系统信息&#xff0c;如C…
阅读更多...
（十九）使用InfluxDB搭建报警系统

（十九）使用InfluxDB搭建报警系统

以下内容来自 尚硅谷&#xff0c;写这一系列的文章&#xff0c;主要是为了方便后续自己的查看&#xff0c;不用带着个PDF找来找去的&#xff0c;太麻烦&#xff01; 第 19 章 使用InfluxDB搭建报警系统 19.1 什么是监控 1、监控其实每隔一段时间对数据计算一下。比如&#xf…
阅读更多...
SAS-数据集添加序号

SAS-数据集添加序号

一、数据集添加序号 方法1&#xff1a;data步生成 方法2&#xff1a;proc sql生成 /** 方法1 **/ data class1; set sashelp.class; seq _N_; /** 添加序号 **/ run; /** 方法2 **/ proc sql;create table class2 as select monotonic() as id, * /** monotonic()添加id **…
阅读更多...
航空发动机支架质量检测非接触式全尺寸测量CASAIM 3D扫描仪

航空发动机支架质量检测非接触式全尺寸测量CASAIM 3D扫描仪

发动机是实现飞行的强大“心脏”支撑&#xff0c;发动机支架是飞机这一精密而复杂系统中不可或缺的一部分,它将巨大而沉重的发动机牢固安装在飞机上,使其可以承受各种飞行载荷和各种未知的挑战&#xff0c;因此航空发动机支架的质量检测和尺寸测量至关重要。 使用CASAIM 3D扫描…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023