Flutter组件--TabBar使用详情(分段控制器)

已于 2023-05-09 15:25:52 修改
阅读量9k 收藏 10
点赞数 4
分类专栏： Flutter 文章标签： flutter TabController TabBar 分段控制器
于 2022-11-21 15:45:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eastWind1101/article/details/127961345
版权

TabBar介绍

 

一个显示水平行选项卡的Widget。 通常创建为 AppBar 的 AppBar.bottom 部分并与 TabBarView 结合使用

在什么情况下使用TabBar

当你的app内容类别比较多的时候，我们常常会用到TabBar，例如网易新闻、京东、B站等，所以TabBar是一个使用非常频繁的组件。

如何创建

步骤一：创建TabController

为了使所选的 tab 与它所对应的内容能够同步变化，需要用 TabController 进行控制。我们既可以手动创建一个 TabController ，也能够直接使用 DefaultTabController widget。最简单的选择是使用 DefaultTabController widget，因为它能够创建出一个可供所有子 widgets 使用的 TabController

DefaultTabController(
  // 选项卡的数量
  length: 3,
  child: // 在下一步完成此代码
);

步骤二：创建tabs

当我们创建DefaultTabController, 接下来就可以用 TabBar widget 来创建 tabs。下面这个创建了包含三组 Tab widget 的 TabBar（一个），并把它放置于 AppBar widget 中。

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text("TabBar"),
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_bike),),
          Tab(icon: Icon(Icons.directions_boat),),
          Tab(icon: Icon(Icons.directions_car),),
        ],
      ),
    ),
  ),
);

步骤三：为每个Tab创建内容

现在我们已经成功创建了一些 tabs，接下来要实现的是 tab 被选中时显示其对应的内容。为了实现这个效果，我们将使用 TabBarView widget。

import 'package:flutter/material.dart';

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("TabBar"),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_bike),),
              Tab(icon: Icon(Icons.directions_boat),),
              Tab(icon: Icon(Icons.directions_car),),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.directions_bike),
            Icon(Icons.directions_boat),
            Icon(Icons.directions_car),
          ],
        ),
      ),
    );
  }
}

TabBar效果图


​​​​​​​

注意事项:

           如果TabBar是需要在首页进行展示,而此时首页又有BottomNavigationBarItem的时候,因为TabBar和BottomNavigationBarItem都需要使用到​​​​​​​Scaffold.所以两者会产生冲突异常.这个时候直接在需要使用TabBar的页面重新创建Scaffold即可(只需要将Scaffold下面的appbar中的title直接更换成Tab组件即可).

步骤四：自定义缓存组件(如果用户在第一个栏位下滑到底部,然后向右滑动到其他栏位,这个时候重新回到第一个栏位的时候,第一个栏位就会重新加载,而不会停留在上次底部位置,为此自定义了缓存功能)

import 'package:flutter/material.dart';

class KeepAliveWrapper extends StatefulWidget {

  final Widget? child;
  final bool keepAlive;

  const KeepAliveWrapper({Key? key,@required this.child,this.keepAlive=true}) : super(key: key);


  @override
  State<KeepAliveWrapper> createState() => _KeepAliveWrapperState();
}

class _KeepAliveWrapperState extends State<KeepAliveWrapper> with AutomaticKeepAliveClientMixin{
  @override
  Widget build(BuildContext context) {
    return widget.child!;
  }

  @override
  bool get wantKeepAlive => widget.keepAlive;
  @override

  void didUpdateWidget(covariant KeepAliveWrapper oldWidget) {
    // TODO: implement didUpdateWidget
    if(oldWidget.keepAlive !=widget.keepAlive)
      {
// keepAlive 状态需要更新，实现在 AutomaticKeepAliveClientMixin 中 updateKeepAlive();
        updateKeepAlive();
      }
    super.didUpdateWidget(oldWidget);
  }

}

调用

/*
*在TabBarView直接进行调用 调用详情
* body: TabBarView(
* controller: _tabController,
* children:[
*    KeepAliveWrapper(
*      child:***
* ),
* ],
* )
* */

TabBar属性和说明

序列号字段属性描述
1tabsList两个多个的Tab列表
2controllerTabController控制tab的控制器
3isScrollablebool标签栏是否可以水平滚动
4indicatorColorColor设置选中Tab指示器的颜色
5automaticIndicatorColorAdjustmentbool是否自动调整indicatorColor
6indicatorWeightdouble设置选中Tab指示器线条的粗细
7indicatorPaddingEdgeInsetsGeometry设置选中Tab指示器间距，默认值为 EdgeInsets.zero
8indicatorDecoration设置选中Tab指示器的外观
9indicatorSizeTabBarIndicatorSize设置选中Tab指示器的大小
10labelColorColor设置选中Tab文字的颜色
11labelStyleTextStyle设置选中Tab文字的样式
12labelPaddingEdgeInsetsGeometry设置选中Tab文字的间距
13unselectedLabelColorColor设置未选中Tab文字的颜色
14unselectedLabelStyleTextStyle设置未选中Tab文字的样式
15dragStartBehaviorDragStartBehavior处理拖动开始行为的方式
16overlayColorMaterialStateProperty定义响应焦点、悬停和飞溅颜色
17mouseCursorMouseCursor鼠标指针进入或悬停在鼠标指针上时的光标
18enableFeedbackbool检测到的手势是否应提供声音和/或触觉反馈
19onTapValueChanged单击Tab时的回调
20physicsScrollPhysicsTabBar的滚动视图如何响应用户输入

TabBar属性详细使用

1.tabs

由两个多个组成的Tab列表

TabBar(
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

2.controller

可以控制tab的控制器

TabController _tabController;

@override
void initState() {
  // TODO: implement initState
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
_tabController.addListener(() 
{ 
//如果不做下面判断的话,单击页面的时候此处监听会执行2次
if (_tabController.animation!.value == _tabController.index)
 {
 print(_tabController.index); 
//获取点击或滑动页面的索引值 
  } });
}

TabBar(
  controller: _tabController,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

3.isScrollable

标签栏是否可以水平滚动

TabBar(
  isScrollable: false,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

4.indicatorColor

设置选中Tab指示器的颜色

TabBar(
  indicatorColor: Colors.red,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

5.automaticIndicatorColorAdjustment

是否自动调整 indicatorColor，如果 automaticIndicatorColorAdjustment 为 true 时，那么indicatorColor 会自动调整成 Colors.white

TabBar(
  automaticIndicatorColorAdjustment: false,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

6.indicatorWeight

设置选中Tab指示器线条的粗细

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

7.indicatorPadding

设置选中Tab指示器间距，默认值为 EdgeInsets.zero

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

8.indicator

设置选中Tab指示器的外观

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  indicator: BoxDecoration(
    gradient: LinearGradient(colors: [
      Colors.orange,
      Colors.green
    ]),
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

9.indicatorSize

设置选中Tab指示器的大小，该值是一个枚举类型，TabBarIndicatorSize.tab 跟随 Tab 的宽度，TabBarIndicatorSize.label 跟随 Tab 内容文字的宽度。

TabBar(
  indicatorColor: Colors.red,
  indicatorSize: TabBarIndicatorSize.tab,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

10.labelColor

设置选中Tab文字的颜色

TabBar(
  indicatorColor: Colors.red,
  labelColor: Colors.pink,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

11.labelStyle

设置选中Tab文字的样式

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

12.labelPadding

设置选中Tab内容的间距

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  labelPadding: EdgeInsets.all(0),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

13.unselectedLabelColor

设置未选中Tab文字的颜色

TabBar(
	unselectedLabelColor: Colors.orange,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

14.unselectedLabelStyle

设置未选中Tab文字的样式

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

15.dragStartBehavior

处理拖动开始行为的方式

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  dragStartBehavior: DragStartBehavior.start,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

16.overlayColor

定义响应焦点、悬停和飞溅颜色。

17.mouseCursor

鼠标指针进入或悬停在鼠标指针上时的光标，针对 Flutter web 应用

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  mouseCursor: SystemMouseCursors.allScroll,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

18.enableFeedback

检测到的手势是否应提供声音和/或触觉反馈，默认为 true

TabBar(
  enableFeedback: true,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

19.onTap

单击Tab时的回调

TabBar(
  enableFeedback: true,
  onTap: (index) {
   //只能监听到单击事件,无法监听到滑动事件
    print(index);
  },
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

20.physics

TabBar的滚动视图如何响应用户输入，

例如，确定在用户停止拖动滚动视图后滚动视图如何继续动画

TabBar(
  physics: NeverScrollableScrollPhysics(),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

~废弃回忆 �༄
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与目标 我们的目标是在嵌入式系统中使用Flutter。 我们正在开发此嵌入器，以在嵌入式产品中使用Flutter。 最终，我们希望向的主线提出并贡献该软件，这意味着我们希望为所有嵌入式开发人员正式向Flutter添加嵌入式系统支持。 请注意，这只是我们的理想，而不是Flutter社区的官方意见。 如果您能向我们提供有关错误和新功能要求的反馈，我们将不胜感激。 我们想介绍通用嵌入式系统的规范。 特征 适用于嵌入式系统 一些依赖库 比Linux的Flutter桌面轻巧（不使用X11和GTK） 该嵌入器的主要目标是Arm64设备。 我们尚未在Arm 32bit
flutter-cupertino-tabbar
03-08
cupertino_tabbar 一个高度可定制且简单的小部件，用于安装iOS 13样式选项卡栏。 强烈建议您阅读文档并在真实设备上运行示例项目，以全面了解和检查所有功能。 | |最近的[useShadow]已添加。 如果设置为true，则指示...
flutter 自定义TabBar 【top 0 级别】
半身风雪
12-01 2230
在日常开发中，tab 标签选项，是一个我们特别常用的一个组件了，往往我们在一个项目中，有很多地方会使用到它，每次单独去写，真的是太繁琐，这里我会定义一个通用的tab 选择器，喜欢的朋友可以拿去试试简简单单一个widget，复制粘贴直接用，废话不多说，啥？没有写怎么调用？不知道怎么调用，你还是去看看前面的文章吧。
Flutter-TabBar的使用说明
2401_84150043的博客
05-04 1031
！最后放上一个大概的Android学习方向及思路（详细的内容太多了~），提供给大家：对于程序员来说，要学习的知识内容、技术有太多太多，这里就先放上一部分，其他的内容有机会在后面的文章向大家呈现出来，不过我自己所有的学习资料都整理成了一个文档，一直在不断学习，希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！为什么某些人会一直比你优秀，是因为他本身就很优秀还一直在持续努力变得更优秀，而你是不是还在满足于现状内心在窃喜！Android架构师之路很漫长，一起共勉吧！
flutter（四）底部tabbar切换，顶部切换，页面跳转
07-07 9087
flutter（四）底部tabbar，顶部切换，页面跳转 上篇文章为大家讲述了flutter的组件；（动态组件和静态组件）本篇文章接着上篇内容继续为大家介绍flutter的其他主要组件（底部选项卡，顶部切换等等实用组件），本文针对功能点做特殊实例讲解，特别详细的整体使用我们会在其它的文章中来展开说明。每篇文章只要有代码说明 就会有demo提供。 前言 一、底部tabbar 二、图片资源加载...
Flutter自定义tabbar任意样式
qq_28844947的博客
02-20 1056
Flutter自定义tabbar
Flutter组件--分段控制器(DefaultTabController)
eastWind1101的博客
10-20 1851
Flutter中分段控制器, DefaultTabController,TabBar,TabBarView
Flutter组件--BottomNavigationBar,底部tabbar,FloatingActionButton
eastWind1101的博客
10-16 784
FloatingActionButton,tabbar,底部tabbar
Flutter组件--Silder(滑块,进度条)使用详解
eastWind1101的博客
10-23 1639
Silder(滑块,进度条)使用详解
flutter控件----快速实现TabBar分割符
姜澜的博客
04-26 2531
一、概述 TabBar的Tab之间需要有个竖线或者斜线的分隔符。 可以自定义Tab实现各种想要的效果。 本次仅提供以下几种实现方式。 1、TabBar用文字做分隔符 Widget _tabBarItem(String title, {bool showRightImage = true}) { return Tab( child: Row( mainAxisAlignmen...
Flutter - APP主界面Tabbar保持页面状态
iotjin的专栏
09-15 1273
APP主界面每个模块的页面一般由底部tabbar+顶部导航 + 中间内容组成的。一般情况下，每个模块的页面初始化一次就可以了，每次都刷新的话不太友好。在didChangeDependencies判断currentIndex，以下代码添加了。这是通过IndexedStack保持页面状态的，还是改的build方法。如果需要在某个页面跳转返回到tabbar的指定页面，这里说一下在tabbar中保持页面状态的方式。如果不需要返回tabbar的指定页面，可以把。如果需要每次进入页面刷新得话，可以添加。
Flutter-组件框架之旅
01-27
Flutter组件使用现代的响应式框架(react-styleframework)建立，灵感来源React。核心思想，通过组件(widget)构建UI。通过给组件(Widgets)设置它们当前的配置(configuration )和状态(state)来描述它们(Widgets)的长相...
flutter-login:使用Flutter的简单登录
05-08
【标题】"flutter-login:使用Flutter的简单登录"是一个基于Flutter框架开发的登录界面示例。Flutter是由Google推出的开源UI工具包，用于构建高性能、高保真度的原生应用程序，支持Android和iOS平台，同时也可用于Web...
flutter-internationalization：使用JSON文件进行Flutter国际化
02-04
Flutter国际化示例 在此示例中，Flutter可以通过使用json文件进行国际化。 这是Flutter的基本国际化示例。... cd flutter-internationalization\ flutter upgrade\ flutter run\ 使用的语言 土耳
flutter控件----NestedScrollView+TabBar+TabBarView实现折叠顶部布局
热门推荐
姜澜的博客
05-24 1万+
一、概述 NestedScrollView+TabBar+TabBarView实现TabBar滑动吸附在顶部。 二、开始编码 本次代码以NestedScrollView的headerSliverBuilder实现滑动的顶部布局，其中SliverPersistentHeader实现吸附在顶部的TabBar。body中放TabBarView实现页面切换。（flutter的滑动家族还是值得好好学习一番...
Flutter开发Dart 中的 mixin、extends 和 implements
我叫柱子哥
07-24 861
在 Dart 中，mixin、extends 和 implements 是面向对象编程中常用的关键字，它们分别用于不同的继承和实现方式。理解它们的用法和区别对于编写高质量、可维护的 Dart 代码至关重要。本文将详细介绍这三个关键字的用法，并通过实例展示它们在实际编程中的应用。
flutter开发实战-AssetBundle读取指定packagename的文件
一名开发者
07-24 271
flutter开发实战-AssetBundle读取指定packagename的文件在Flutter中，如果你想从特定的包名中读取资源文件，你可以使用rootBundle类来访问packages目录下的资源。下面使用rootBundle来读取包名为my_package的资源文件user.json。
Vue.js中自定义Markdown插件实现References解析
最新发布
浮游的博客
07-25 336
是一个快速、灵活的Markdown解析器，它支持CommonMark标准，并且可以通过插件来扩展其功能。在Vue.js项目中，我们可以使用来将Markdown文本转换为HTML。在某些情况下，我们可能需要在Markdown文本中包含自定义的HTML标签，例如标签，用于显示参考文献或其他额外信息。为了能够在中解析这些自定义标签，我们需要编写一个自定义插件。首先，我们需要定义插件应该执行的功能。在我们的例子中，插件需要识别标签，并将其转换为相应的HTML结构。我们使用正则表达式来匹配Markdown文本中的。
Flutter控件--TextFiled
05-26
Flutter中的TextField是一个常用的输入控件，它允许用户在应用程序中输入文本。 TextField通常用于表单中，可以接收用户输入的文本，比如用户名、密码、电子邮件地址等。 以下是一个基本的TextField示例： ```dart TextField( decoration: InputDecoration( hintText: '请输入文本', ), ); ``` 在上面的示例中，我们使用了decoration属性来设置TextField的外观，其中hintText属性用于设置提示文本。 TextField还有许多其他的属性可以设置，比如maxLength（允许输入的最大长度）、keyboardType（键盘类型）、obscureText（是否隐藏输入内容）等等。 下面是一个更完整的TextField示例： ```dart class MyTextField extends StatefulWidget { @override _MyTextFieldState createState() => _MyTextFieldState(); } class _MyTextFieldState extends State<MyTextField> { final TextEditingController _controller = TextEditingController(); @override Widget build(BuildContext context) { return TextField( controller: _controller, maxLength: 10, keyboardType: TextInputType.text, obscureText: true, decoration: InputDecoration( hintText: '请输入文本', labelText: '文本框', prefixIcon: Icon(Icons.text_fields), suffixIcon: IconButton( icon: Icon(Icons.clear), onPressed: () { setState(() { _controller.clear(); }); }, ), border: OutlineInputBorder(), ), onChanged: (value) { print('输入的文本为：$value'); }, ); } } ``` 在上面的示例中，我们使用了TextEditingController来控制TextField的文本内容，maxLength属性限制了用户输入的最大长度为10，keyboardType属性指定了键盘类型为文本类型，obscureText属性设置为true表示隐藏输入内容。 此外，我们还设置了decoration属性来自定义TextField的外观，包括了输入提示文本、标签文本、前缀图标、后缀图标和边框样式等。 最后，我们通过onChanged回调函数来监听用户输入的文本，并打印出来。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值