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

这篇具有很好参考价值的文章主要介绍了Flutter组件--TabBar使用详情(分段控制器)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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效果图

flutter tabbar,Flutter,flutter,TabController,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属性和说明

序列号 字段 属性 描述
1 tabs List 两个多个的Tab列表
2 controller TabController 控制tab的控制器
3 isScrollable bool 标签栏是否可以水平滚动
4 indicatorColor Color 设置选中Tab指示器的颜色
5 automaticIndicatorColorAdjustment bool 是否自动调整indicatorColor
6 indicatorWeight double 设置选中Tab指示器线条的粗细
7 indicatorPadding EdgeInsetsGeometry 设置选中Tab指示器间距,默认值为 EdgeInsets.zero
8 indicator Decoration 设置选中Tab指示器的外观
9 indicatorSize TabBarIndicatorSize 设置选中Tab指示器的大小
10 labelColor Color 设置选中Tab文字的颜色
11 labelStyle TextStyle 设置选中Tab文字的样式
12 labelPadding EdgeInsetsGeometry 设置选中Tab文字的间距
13 unselectedLabelColor Color 设置未选中Tab文字的颜色
14 unselectedLabelStyle TextStyle 设置未选中Tab文字的样式
15 dragStartBehavior DragStartBehavior 处理拖动开始行为的方式
16 overlayColor MaterialStateProperty 定义响应焦点、悬停和飞溅颜色
17 mouseCursor MouseCursor 鼠标指针进入或悬停在鼠标指针上时的光标
18 enableFeedback bool 检测到的手势是否应提供声音和/或触觉反馈
19 onTap ValueChanged 单击Tab时的回调
20 physics ScrollPhysics TabBar的滚动视图如何响应用户输入

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的滚动视图如何响应用户输入,

例如,确定在用户停止拖动滚动视图后滚动视图如何继续动画文章来源地址https://www.toymoban.com/news/detail-787295.html

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: "汽车",),
  ],
)

到了这里,关于Flutter组件--TabBar使用详情(分段控制器)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter 数据存储--shared_preferences使用详情

    shared_preferences 主要的作用是用于将数据 异步持久化到磁盘 ,因为持久化数据只是存储到临时目录,当app删除时该存储的数据就是消失,web开发时清除浏览器存储的数据也将消失。 支持存储类型: bool int double string stringList 主要用于持久化数据,如持久化用户信息、列表数据

    2023年04月08日
    浏览(31)
  • Flutter中GetX系列六--GetxController/GetView使用详情

    在实际的项目开发过程中,我们不可能把UI代码、业务逻辑都放在一起处理,这样对项目的架构、代码的可读性、后期的维护将会是致命的,好在 GetX 为我们提供了 GetxController , GetxController 主要的作用是用于UI代码与业务逻辑分离开来。 这里主要讲解使用 GetxController 动态获取

    2024年02月10日
    浏览(49)
  • Java后端接口返回视频流,使用video组件播放视频,实现分段下载

    视频文件保存在不为人知的地方,总之前端不能直接访问的位置,需要通过后端接口取出来再返回给前端。 前端这样子播放 src=后端接口 如果后端直接这样子写 小视频问题不大,视频大的话会卡顿很久,查看请求发现会先请求下载完整视频后开始播放。而且不能拖动进度条

    2024年02月12日
    浏览(44)
  • 【Flutter】自定义分段选择器Slider

    在开发一个APP的时候,需要用到一个分段选择器,系统的不满足就自己自定义了一个; 可以自定义节点的数量、自定义节点的大小、自定义滑竿的粗细,自定义气泡的有无等等… 基本上满足你的常用需求。 1、使用 2、获取进度条的值 获取当前进度条的值参与计算等业务;

    2024年02月08日
    浏览(37)
  • 【云原生】kubernetes控制器deployment的使用

        目录 ​编辑 1 Controller 控制器 1.1 什么是 Controller 1.2 常见的 Controller 控制器 1.3 Controller 如何管理 Pod 2 Deployment 2.1 创建 deployment 2.2 查看 deployment 2.3 扩缩 deployment 2.4 回滚 deployment 2.5 删除 deployment 1 Controller 控制器 官网: 控制器 | Kubernetes 1.1 什么是 Controller Kubernetes 通常不会

    2024年02月13日
    浏览(35)
  • Git版本控制器使用教程(超详细版)

    目录 一、git安装 二、git 工作原理与常用命令 1.配置用户信息  2.检查用户信息 3.git初始化本地仓库 4. git的各个模块  5. git 工作流程  6.git跟踪文件  7.git修改文件 8.git删除文件 9. git撤销本地文件的修改 10. git 取消暂存 11.git跳过暂存区 12.git版本回退  13.git 撤销提交 14. git 设

    2024年02月16日
    浏览(84)
  • 【Three.js】轨道控制器(OrbitControls)的使用

    目录 📝引入 📝使用 📤1、创建轨道控制器 🔧2、交互事件 🚴3、控制物体自动旋转  🎲4、启用阻尼(惯性)  🚫5、禁止平移 🚫6、禁止旋转 🌵完全禁止旋转 🌵禁止垂直旋转 🌵禁止水平旋转  🚫7、禁止缩放  🌵控制相机缩放范围 🎡8、设置轨道控制器焦点 🌀9、将

    2024年04月10日
    浏览(77)
  • 【GUI】使用PID控制器进行台式过程控制实验,以保持热敏电阻的温度(Matlab代码实现)

    目录 💥1 概述 📚2 运行结果 🎉3 参考文献 🌈4 Matlab代码、操作说明 本实验是温度控制的反馈控制应用。特别是,本实验讲解: 手动和自动控制的区别 生成动态数据的 步进测试 拟合动态数据以构建简单的一阶加死区时间 (FOPDT) 模型 从标准调整规则 获取 PID 控制的 参数

    2024年02月15日
    浏览(48)
  • Flutter-TabBar的使用说明,吃透这份Android高级工程师面试497题解析

    TabBar在使用之前,首先需要熟悉他的定义属性,现在查看常用定义属性: const TabBar({ Key key, @required this.tabs,//必须实现的,设置需要展示的tabs,最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动,true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.

    2024年04月26日
    浏览(47)
  • ESP32控制器使用SX1278 LoRa模块的方法

    LoRa是由Semtech公司引入的一种无线射频技术,旨在用于在不消耗大量功率的情况下将双向信息传输到长距离。如果您不熟悉LoRa,请先查看LoRa模块与Arduino开发板的连接方法。 在本篇文章中,我们将学习如何将LoRa模块SX1278与ESP32结合使用。在这里,我们将使用两个LoRa模块-一个

    2023年04月08日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包