第四十八回：TabBar Widget

Flutter教程：TabBarWidget的使用详解,
原创 已于 2023-06-08 06:40:14 修改 · 326 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #flutter #TabBar #TabBarView

于 2023-06-06 23:22:11 首次发布
文章介绍了Flutter中的TabBarWidget，用于创建屏幕顶部的标签，常用于切换不同页面。文中详细讲解了TabBarWidget的关键属性，如tabs、labelColor、indicatorColor、unselectedLabelColor和onTap，并提供了一个示例代码展示如何创建带有三个标签的AppBar。注意TabBar需配合AppBar和TabBarController使用。

文章目录


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

概念介绍

我们在这里说的TabBar Widget是指屏幕顶部的标签，通常情况下在一个界面的顶部有多个标签，点击这些标签可以切换到不同的页面。TabBar也是MaterialApp的一个设计特色，本章回将详细介绍它的使用方法。

使用方法

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

  • tabs属性：该属性类似容器类组件的children属性，主要用来存放标签组件，数量不限；
  • labelColor属性：该属性主要用来控制标签标签被选中时颜色；
  • indicatorColor属性：该属性主要用来控制标签被选中时下面指示器的颜色;
  • unselectedLabeColor属性：该属性主要用来控制标签未被选中时下面指示器的颜色;
  • onTap属性：该属性是方法类型，当标签被选中时将会调用该属性对应的方法；

上面的这些属性中只有第一个属性是必选属性，其它属性都是可选属性。第一个属性中标签的数量虽然没有做限定，但是最好不超过五个，要不然就会比较难看，毕竟界面的宽度是有限的。

关于颜色的几个属性大家不可以依据界面的颜色自行设定，不过要保证标签和指示器的颜色保持一致，选中和未选中时的颜色保持一致，这样可以保证从颜色上区分开哪些标签被选中了，哪些标签没有被选中。

onTap属性是方法类型，访方法的参数是标签的索引值，默认从0开始。

示例代码


                

                
                
        

         

    


  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
Flutter开发实战之Widget体系与布局原理

				
			

			

				

					一声雷
				

				

					07-26
					
					1200
					
				

			

		

		

			
				
Flutter的Widget体系与布局原理

			
		

	



                

            
              



	

		

			

				
					
flutter移动电商实战.zip

				
			

			

				

					10-16
				

			

		

		

			
				
第48节：详细页_详情和评论切换效果制作 第49节：详细页页_Stack作底部操作栏 第50节:持久化sharedpreferences基础1 第51节：购物车_添加商品 第52节：购物车_建立数据模型 第53节：购物车_大体结构布局 第54节：...

			
		

	



              


  
              

                


	

		

			

				
					
flutter 手写 TabBar

				
			

			

				

					唐僧的专栏
				

				

					07-15
					
					1340
					
				

			

		

		

			
				
这几天在使用 flutter TabBar 的时候 我们的设计给我提了一个需求：如下 Tabbar第一个元素 左对齐试了下TabBar 的配置，无法实现这个需求，他的 配置是针对所有元素的。而且 这个 TabBar 下面的 滑块在移动的时候 上面的文字会相应的抖动。看了下 TabBar 的源代码 他的实现是相对复杂的 下面的 滑块是 canvas 实现的。有可能他要实现的功能比较丰富。下面是我页面的布局：这样实现起来里面元素的 样式可以完全自己定义单个配置，想怎么显示都可以。

			
		

	





	

		

			

				
					
Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用

				
			

			

				

					艾米的猫儿的博客
				

				

					04-20
					
					2931
					
				

			

		

		

			
				
提示：此文章为前端学习flutter过程，如有歧义期望各位大大的宝贵意见
学习Dart 基础知识 移步这里
安装flutter环境相关 移步这里
flutter基础组件使用相关 移步这里

文章目录




			
		

	



		

			
		



	

		

			

				
					
auto.js    app    tabbar

				
			

			

				

					jackbon8的博客
				

				

					12-08
					
					1880
					
				

			

		

		

			
				
/*
 * @Author: jackbon
 * @QQ: 460880674@qq.com
 */
"ui";

//tabs 数据
var tabs_data = {
    //tabs 背景
    bg: "#ffffff",
    selectColor: {
        //当前页面选中颜色
        on: "#00ffff",
        //当前页面未选中颜色
        off: "#999999"
    },
    //图标大小
    srcSize: .

			
		

	





	

		

			

				
					
Flutter 实战：构建跨平台应用

				
			

			

				

					程序边界
				

				

					11-11
					
					8967
					
				

			

		

		

			
				
Flutter是由Google开发的一款开源移动应用开发框架，它可以帮助开发者在iOS和Android平台上快速、高效地开发应用。Flutter使用Dart语言作为开发语言，具有跨平台兼容性高、开发效率快、性能优异等特点。本文将通过实战案例，介绍如何使用Flutter构建跨平台应用。《Flutter小白开发——跨平台客户端应⽤开发学习路线》以移动平台（iOS/安卓）与Web 平台为例，系统地介绍如何基于Flutter 框架开发跨平台的应用。

			
		

	





	

		

			

				
					
Flutter基础（四）开发Flutter应用前需要掌握的Basic Widget

				
			

			

				

					weixin_30478757的博客
				

				

					06-05
					
					226
					
				

			

		

		

			
				
本文首发于公众号「刘望舒」

关联系列
ReactNative入门系列
React Native组件
Flutter基础系列
前言
学完了Dart语言，接下来就可以学习Widget了，Flutter的UI界面就是由Widget组成的，Widget的数量繁多，因此我会用几篇文章来专门介绍它，本篇就来介绍Basics Widget。
1.什么是Widget
Flutter的Widget的设计灵感来自...

			
		

	





	

		

			

				
					
Flutter：引领移动开发新潮流，跨平台应用程序的终极解决方案

				
			

			

				

					程序边界
				

				

					11-23
					
					9305
					
				

			

		

		

			
				
Flutter是由Google开发的一款开源移动应用开发框架，它可以帮助开发者快速高效地构建跨平台的移动应用程序。Flutter基于Dart编程语言，具有简单易学、高效灵活的特点，并且可以与现有的Android和iOS应用进行集成。本文将介绍Flutter的基本概念、开发环境搭建、基础组件、生命周期管理、路由控制、网络请求、数据存储、调试与优化等方面的内容，帮助大家快速入门Flutter开发。

			
		

	





	

		

			

				
					
揭开UI设计的神秘面纱：如何打造一款让用户爱不释手的移动APP

				
			

			

				

					程序边界
				

				

					01-19
					
					5742
					
				

			

		

		

			
				
移动APP UI设计与制作(微课版)》以通俗易懂的语言、翔实生动的案例全面介绍了移动App UI设计理论和各种界面元素的设计方法。全书共分13章，内容涵盖UI设计的基础理论，App UI设计的要点，设计原则和规范，图标、基础UI控件、闪屏页、引导页、空白页、首页、个人中心页、列表页、播放页和详情页的设计方法等，力求为读者带来良好的学习体验。与书中内容同步的案例操作教学视频可供读者随时扫码学习。

			
		

	





	

		

			

				
					
卡片式ViewPager，一屏展示多个pager item，设置高度不一致的tabBar

				
			

			

				

					MrCoder的博客
				

				

					12-08
					
					1882
					
				

			

		

		

			
				
ViewPager的基本用法不必多说，这都很简单，我们可以在ViewPager中加载一个ImageView，也可以加载一个Fragment，这都是目前非常常见的用法。那么我今天说的是ViewPager中的PageTransformer属性，用好这个属性可以让我们的应用更加出彩，OK，那我们就开始吧！

本文将从如下几方面来介绍：

 

1.clipChildren属性
2.一个页面显示多个Vie...

			
		

	





	

		

			

				
					
自定义多套tabbar

				
			

			

				

					03-03
				

			

		

		

			
				
 child: TabBar(controller: TabController(length: 3, vsync: null),tabs:[ //第二套TabBar  Tab(text:"One"),  Tab(text:"Two"),  Tab(text:"Three")  ])  )  ],  ),  ),  ),  );  } } ```  此代码片段展示了如何...

			
		

	





	

		

			

				
					
《零基础学PHP：从入门到实战》教程-模块七：MySQL 数据库基础-4

				
			

			

				

					zwh821的博客
				

				

					12-03
					
					573
					
				

			

		

		

			
				
PHP连接MySQL数据库操作指南 本章介绍了使用PHP的mysqli扩展连接和操作MySQL数据库的核心方法。主要内容包括： 两种编程风格：面向对象和面向过程方式，推荐使用面向对象风格 数据库连接：建立连接的标准流程和必要的错误处理 SQL操作： SELECT查询及结果处理 INSERT/UPDATE/DELETE操作 安全防护： 重点讲解SQL注入攻击原理 演示不安全的字符串拼接方式的风险 推荐使用预处理语句（prepare/bind_param/execute）作为唯一正确的防护手段 通过代码示例展示

			
		

	





	

		

			

				
					
如何将照片从 Mac 传输到 Android

				
			

			

				

					Digitally的博客
				

				

					12-03
					
					885
					
				

			

		

		

			
				
将照片从 Mac 传输到 Android 手机或平板电脑有时会感觉像是跨越数字鸿沟。由于 Mac 和 Android 运行在不同的生态系统中，直接拖放的方法行不通。如果您想将照片从 Mac 传输到 Android，可以尝试本指南中介绍的有效方法，这些方法可以高质量地传输照片。

			
		

	





	

		

			

				
					
Android 初学者入门：Fragment 与 ListView 基础概念与使用方法

				
			

			

				

					am_g123的博客
				

				

					12-03
					
					348
					
				

			

		

		

			
				
类别关键点Fragment是 Activity 的子组件，用于构建可复用 UI 部分，适用于大屏适配。生命周期Fragment 生命周期依赖于 Activity，不可独立存在。托管机制必须由 Activity 或其他 Fragment 托管。动态管理使用 FragmentManager 进行 add/remove/replace 操作。通信方式通过 Activity 作为中介进行 Fragment 之间的通信。ListView使用 Adapter 绑定数据，自动适配列表长度，常见于商品、菜单等场景。

			
		

	





	

		

			

				
					
Android getDrawingCache 过时废弃

				
			

			

				

					要乐观，要积极，多笑，多照镜子
				

				

					12-04
					
					398
					
				

			

		

		

			
				
Android中getDrawingCache()方法已被废弃，推荐使用更现代的替代方案。该API在Android 9（API 28）后被标记为@Deprecated，存在内存泄漏、尺寸限制和硬件加速冲突等问题。最佳替代方案包括：1）使用Canvas手动绘制View，兼容性好且支持任意尺寸；2）对屏幕上显示的View使用PixelCopy（API 24+）。若必须兼容旧代码，需在API 28以下使用并确保及时关闭缓存。开发者应避免使用废弃API，改用Canvas.draw()或PixelCopy等更安全高效

			
		

	





	

		

			

				
					
PHP框架的资源管理机制如何优雅适配后台任务？

				
			

			

				

					
				

				

					12-04
					
					728
					
				

			

		

		

			
				
PHP传统的资源管理遵循请求-响应模型，当HTTP请求到达时，PHP初始化执行环境，处理业务逻辑，返回结果并释放所有资源。这种模型对后台任务存在根本性限制：短生命周期无法支持长时间运行的任务，资源即时释放难以维持持久数据库连接，同步处理模式让用户必须等待任务完成。

			
		

	





	

		

			

				
					
MySQL 时区参数 time_zone 详解

				
			

			

				

					2509_94217142的博客
				

				

					11-30
					
					319
					
				

			

		

		

			
				
MySQL 时区参数 time_zone 有什么用？修改它有什么影响？如何设置该参数，本篇文章会详细介绍。

			
		

	





	

		

			

				
					
RK-3576-Android15屏蔽EditText的长按分享菜单的功能

					
最新发布

				
			

			

				

					十年饮冰，难凉热血
				

				

					12-04
					
					539
					
				

			

		

		

			
				
定制的工控产品和部分定制消费品，需求不一样和使用场景不一样，要求把长按输入框里面文字长按时候去掉分享功能。这里其实就是一个普通的客需，最重要的就是解决问题的思路，怎么在源码里面去找到问题点并解决，思路、方法很重要对于显示UI效果，太大等可能跟自己屏幕、系统有关， 如果实际显示效果不好，自己调试即可不同的平台、不同的Android版本源码，修改位置可能不一样，但是解决问题思路一样，必须知道。此需求给自己最大的扩展知识点：相关的基本的UI组件修改都在。

			
		

	





	

		

			

				
					
Android 性能调优与故障排查：ADB 诊断命令终极指南

				
			

			

				

					2501_94233638的博客
				

				

					11-30
					
					622
					
				

			

		

		

			
				
针对应用卡顿、耗电快、内存泄漏等性能问题，通过命令获取资源占用数据，精准优化性能瓶颈。涵盖应用管理、文件操作、系统配置等辅助功能，助力调试流程高效推进，适配多场景调试需求。此类命令聚焦应用崩溃、无响应等核心故障，能快速抓取关键日志与堆栈信息，定位问题根源。这是 ADB 调试的前提，需先完成环境校验与设备连接，避免后续命令执行失败。

			
		

	





	

		

			

				
					
IOS自定义控件实例代码集合：TabBar与NavBar

				
			

			

				

					
				

			

		

		

			
				
从给定文件信息中，我们可以提取出关键的知识点是关于iOS开发中自定义控件的实现和应用，尤其是在TabBar和nav bar这两个关键的用户界面元素上。由于文件描述提及资源中包含实例代码，我们可以推测以下知识点将会围绕...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
talk_8

			
真诚赞赏，手有余香

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值