Flutter深入浅出组件篇---TabBar

头像
Jimi
    阅读 8 分钟
    1

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

    ​ TabBar 默认将会在 Widget 树中向上寻找离它最近的一个 DefaultTabController 节点作为自己的 TabController。如果您想手动创建 TabController，那么您必须将它作为参数传给 TabBar。

    步骤三：为每个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 是怎么结合 TabBarView 来使用的。

    DEMO效果

    TabBar属性和说明

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

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

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

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

    ​ 如果非空，则会使用 MaterialState.focused, MaterialState.hovered, and MaterialState.pressed 之一进行解析。

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

    总结

    ​ 以上是 TabBar 的属性详细解析并写了一个简单的 demo ，在平时的开发过程中 TabBar

    组件用的还是相对比较频繁的，也是开发人员必须掌握的一个组件。

    flutter
    Jimi
    23 声望14 粉丝
    « 上一篇
    Flutter深入浅出组件篇---AppBar
    下一篇 »
    Flutter深入浅出组件篇---Padding、AnimatedPadding

    引用和评论

    推荐阅读
    头像
    Flutter 文件读写---path_provider详解

    Jimi赞 1阅读 10.2k

    头像
    鸿蒙Flutter实战：09-现有Flutter项目支持鸿蒙

    zacks阅读 881

    头像
    卓易通：鸿蒙Next系统的蜜糖还是毒药？

    程序员老刘阅读 718

    头像
    Flutter 应用本地存储与云存储的最佳选择

    独立开发者_猫哥赞 1阅读 327

    头像
    记录一个Flutter 3.24单元测试点击事件bug

    程序员老刘阅读 623

    头像
    鸿蒙Flutter实战：01-搭建开发环境

    zacks阅读 494

    头像
    Flutter开发者必备面试问题与答案01

    独立开发者_猫哥阅读 431

    0 条评论
    得票最新