首页 > 其他分享 >如何创建TabBar

如何创建TabBar

时间:2024-09-13 22:51:28浏览次数:11  
标签:TabBarView Widget 界面 创建 如何 TabBar 组件 属性

文章目录


我们在上一章回中介绍了DefaultTabBarController Widget相关的内容,本章回中将介绍TabBarView Widget.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

概念介绍

我们这里介绍的TabBarView类似前面章回中介绍过的PageView组件,它提供了一组界面,并且配合TabBar和TabController一起使用,这样可以让用户通过选择不
同的标签(Tab)来切换不同的界面,当然也可以像PageView一样通过左右滑动来切换界面。本章回中将详细介绍它的使用方法。

使用方法

和其它的Widget一样,TabBarView Widget提供了相关的属性来控制自己,下面是常用的属性:

  • children属性:该属性用来存放不同的界面,数量不限;
  • controller属性:用来设置TabBarController,可以不写而是像上一章回一样使用;
    这两个属性中children属性是必选属性,它可以像Row组件一样包含其它的组件,虽然组件的数量没有限制,但是最好与TabBarController中的length属性值保持
    一致,这样可以保证界面数量和标签(Tab)数量一致.

示例代码

DefaultTabController(
  length: 3,
  initialIndex: 1,
  child: Scaffold(
      appBar: AppBar(
        title: Text("Example of Material App"),
        bottom: TabBar(
          labelColor: Colors.green,
          indicatorColor: Colors.green,
          unselectedLabelColor: Colors.grey,
          onTap: (index){
            print("$index is selected");
          },
          tabs: const [
            Icon(Icons.web),
            Icon(Icons.favorite),∂
            Icon(Icons.self_improvement),
          ],
        ),
      ),
      body:const TabBarView(
        children: [
          Text("First TabBarView"),
          Text("Seconde TabBarView"),
          Text("Third TabBarView"),
        ],
      ),
  ),
),

我们在上面的代码中创建了一个包含三个页面的TabBarView.每个页面中只有一个文本组件,该文本组件只显示当前TabBarView界面的标题。编译并且运行上面的代
码可以看到界面中显示三个标签,点击不同的标签时就会切换到不同的标签页面。我在这里就不演示程序的运行结果了,建议大家自己动手去实践。此外,大家需要注意:
TabBarView不能单独使用,需要配合TabBar和TabBarController一起使用。

综合使用

最近几个章回中分别介绍了TabBarView,TabBar和TabBarController组件,它们一起构成了顶部标签导航界面。这也是程序中经常使用的导航界面。在Flutter
中的组件构成了组件树,因此可以把TabBarController当作树根,而TabBar和TabBarView都是树根上的树枝,下面是一个树状图,希望通过图形来帮助大家理解
这三种组件相互之间的关系。不过该图是水平的排列的,与树形的垂直排列不同,请大家参考:tabSerils
看官们,关于TabBarView Widget的内容就介绍到这里,欢迎大家在评论区交流与讨论!

标签:TabBarView,Widget,界面,创建,如何,TabBar,组件,属性
From: https://blog.csdn.net/talk_8/article/details/142232662

相关文章

  • 一个库帮你轻松的创建漂亮的.NET控制台应用程序
    前言做过.NET控制台应用程序的同学应该都知道原生的.NET控制台应用程序输出的内容都比较的单调,假如要编写漂亮且美观的控制台输出内容或者样式可能需要花费不少的时间去编写代码和调试。今天大姚给大家分享一个.NET开源且免费的类库帮你轻松的创建漂亮、美观的.NET控制台应用程序:Sp......
  • 树莓派操作系统-利用Makefile创建内核镜像文件kernel8.img
    编写树莓派内核映像的过程可以等同于gcc的编译过程:预处理、编译、汇编、链接,后面还会加一步:将可执行文件转换成二进制的镜像文件。在MakeFile里的构建过程分为3步:1.将.c文件经过预处理、编译、汇编生成.o文件,将.S文件经过汇编生成.o文件。2.将.o文件经过链接生成.elf可执行文件......
  • tsx css class样式如何使用
    参考代码import{defineComponent,PropType,h,computed,ref,watch}from'vue';importtype{Reactive,Ref}from'vue';importstylesfrom'../scss/child.module.scss';import'../scss/child.scss';//这引入的样式是全局的,会影响其......
  • 《Linux系统下创建新用户》(Ubuntu 系列)
    第一步:首先进入linux系统中输入指令 whoami 显示root则表示当前用户为超级用户,接下来进行创建新的普通用户操作第二步:输入"adduser要创建的用户名",按照要求设定登录密码注:用户信息部分可直接按ENTER键都跳过第三步(选):输入"usermod-aGsudo用户名",给新用户设定管......
  • 如何学习go语言
    学习Go语言是一个系统而逐步深入的过程,以下是一些关键步骤和建议,帮助你高效地学习Go语言:书在python33点(0M一、了解Go语言的基础知识学习语法和基本概念:阅读官方的Go语言文档,包括语言规范、标准库和示例代码,了解Go语言的基本特性和用法。Go语言拥有简洁的语法结构和高效......
  • Laravel Blade:如何在表循环中迭代模型的belongsToMany关系?
    一、引言(一)介绍是一种流行的PHP模板引擎,用于构建动态网页。在本文中,我们将探讨如何在表循环中迭代模型的belongsToMany关系。通过使用LaravelBlade,我们可以轻松地处理这种复杂的关系,并在模板中显示相关的数据。本文将介绍如何设置关系、如何在模板中访问关系数据以及如何使用......
  • 程序员如何搞副业?
    程序员如何搞副业?程序员不仅拥有将抽象概念转化为实际应用的能力,还通常具备强大的逻辑思维和问题解决能力。然而,许多程序员并不满足于仅仅在一家公司工作,他们渴望通过副业来实现个人价值的最大化,增加收入,甚至探索自己的创业梦想。程序员不仅拥有将抽象概念转化为实际应用的能......
  • 自媒体必读,如何去除AI文章机器味,一文看懂
    让AI帮你撰写文章是不是自媒体人最希望实现的功能!但是实际情况是AI写出的文章**“机器”味太重**,稍微留意就能看出非人撰写而成!那问题到底出在哪?是AI撰写文章的能力太差还是自己本身不会使用?这个问题困扰这多少自媒体人,同时又有多少自媒体人想要突破的技术瓶颈!小侠这篇......
  • 【HBuilderX-从下载到项目创建】编程初学者适用的HBuilderX开发环境(超详细的)下载安装
    简介:HBuilderX是一款由DCloud公司开发的集成开发环境(IDE),专为前端开发设计,同时也支持多平台应用开发。它支持HTML、CSS、JavaScript、Vue、React、Uni-app等多种编程语言和框架,具备代码编辑、调试、测试等功能,并且提供了丰富的插件生态系统以扩展其功能。“......
  • 如何学习VBA_3.2.10:人机对话的实现
    我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的劳动效率,而且可以提高数据处理的准确度。我推出的VBA系列教程共九套和一部VBA汉英手册,现在已经全部完成,希望大家利用、学习。如果您只是一般的职场VBA需求,可以打包选择7.1.3.9教程+汉英手册,第7套教程是......