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

作者: Jimi | 来源:发表于2021-08-25 10:58 被阅读0次

Flutter深入浅出组件篇---TabBar
flutter 之 TabBar、TabBarView的使用
Flutter - UI基础
Flutter之TabBar组件
uniapp自定义tabbar
Fluter：抽屉效果
Flutter跨平台移动端开发丨封装顶部导航栏部件 TabBar
Flutter开发（二）Tabbar
Flutter学习笔记(三)-TabBar的使用
flutter tabbar垂直indicator

TabBar介绍

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

在什么情况下使用TabBar

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

示例代码

本文中很多效果都没有截图，可下载源代码运行项目源代码地址，或者通过视频教程查看视频教程地址

如何使用

步骤一：创建TabController

    为了使所选的 `tab` 与它所对应的内容能够同步变化，需要用 [`TabController`](https://api.flutter-io.cn/flutter/material/TabController-class.html) 进行控制。我们既可以手动创建一个 `TabController` ，也能够直接使用 [`DefaultTabController`](https://api.flutter-io.cn/flutter/material/DefaultTabController-class.html) widget。最简单的选择是使用 `DefaultTabController` widget，因为它能够创建出一个可供所有子 widgets 使用的 `TabController`。

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

步骤二：创建tabs

    当我们创建`DefaultTabController`, 接下来就可以用 [`TabBar`](https://api.flutter-io.cn/flutter/material/TabBar-class.html) widget 来创建 tabs。下面这个创建了包含三组 [`Tab`](https://api.flutter-io.cn/flutter/material/Tab-class.html) widget 的 `TabBar`（一个），并把它放置于 [`AppBar`](https://api.flutter-io.cn/flutter/material/AppBar-class.html) 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`](https://api.flutter-io.cn/flutter/material/TabBarView-class.html) 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效果

image

TabBar属性和说明

总共20个属性

字段	属性	描述
tabs	List<Widget>	两个多个的Tab列表
controller	TabController	控制tab的控制器
isScrollable	bool	标签栏是否可以水平滚动
indicatorColor	Color	设置选中Tab指示器的颜色
automaticIndicatorColorAdjustment	bool	是否自动调整indicatorColor
indicatorWeight	double	设置选中Tab指示器线条的粗细
indicatorPadding	EdgeInsetsGeometry	设置选中Tab指示器间距，默认值为 EdgeInsets.zero
indicator	Decoration	设置选中Tab指示器的外观
indicatorSize	TabBarIndicatorSize	设置选中Tab指示器的大小
labelColor	Color	设置选中Tab文字的颜色
labelStyle	TextStyle	设置选中Tab文字的样式
labelPadding	EdgeInsetsGeometry	设置选中Tab文字的间距
unselectedLabelColor	Color	设置未选中Tab文字的颜色
unselectedLabelStyle	TextStyle	设置未选中Tab文字的样式
dragStartBehavior	DragStartBehavior	处理拖动开始行为的方式
overlayColor	MaterialStateProperty<Color>	定义响应焦点、悬停和飞溅颜色
mouseCursor	MouseCursor	鼠标指针进入或悬停在鼠标指针上时的光标
enableFeedback	bool	检测到的手势是否应提供声音和/或触觉反馈
onTap	ValueChanged<int>	单击Tab时的回调
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);
}

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](https://api.flutter.dev/flutter/material/MaterialState-class.html), [MaterialState.hovered](https://api.flutter.dev/flutter/material/MaterialState-class.html), and [MaterialState.pressed](https://api.flutter.dev/flutter/material/MaterialState-class.html) 之一进行解析。

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深入浅出组件篇---TabBar
TabBar介绍在什么情况下使用TabBar 示例代码本文中很多效果都没有截图，可下载源代码运行项目源代码地...
flutter 之 TabBar、TabBarView的使用
TabBar还有TabBarView都是谷歌flutter官方组件库——Material组件库提供的组件，其中Ta...
Flutter - UI基础
Flutter基础组件用Flutter构建漂亮的UI界面 - 基础组件篇Flutter滚动型容器组件 - List...
Flutter之TabBar组件
练习demo，链接https://gitee.com/xgljh/Flutter
uniapp自定义tabbar
App.vue中隐藏系统tabbar 创建tabbar组件页面引用tabbar组件
Fluter：抽屉效果
效果图 flutter的抽屉效果是使用Drawer组件实现的 Drawer可以添加头部属性： tabbar底部导航...
Flutter跨平台移动端开发丨封装顶部导航栏部件 TabBar
支持左右滑动切换、不限 item 数量的 tabbar 是分类信息列表展示必不可少的组件，在 flutter 中可...
Flutter开发（二）Tabbar
Flutter开发（二）Tabbar
Flutter学习笔记(三)-TabBar的使用
Flutter TabBar的使用
flutter tabbar垂直indicator
日常修改flutter组件，今天记录一下垂直的tabbar标签修改先复制tab.dart和tab_indicat...

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

TabBar介绍

在什么情况下使用TabBar

示例代码

如何使用

步骤一：创建TabController

步骤二：创建tabs

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

DEMO效果

TabBar属性和说明

TabBar属性详细使用

1、tabs

使用方法

2、controller

使用方法

3、isScrollable

使用方法

4、indicatorColor

使用方法

5、automaticIndicatorColorAdjustment

使用方法

6、indicatorWeight

使用方法

7、indicatorPadding

使用方法

8、indicator

使用方法

9、indicatorSize

使用方法

10、labelColor

使用方法

11、labelStyle

使用方法

12、labelPadding

使用方法

13、unselectedLabelColor

使用方法

14、unselectedLabelStyle

使用方法

15、dragStartBehavior

使用方法

16、overlayColor

17、mouseCursor

使用方法

18、enableFeedback

使用方法

19、onTap

使用方法

20、physics

使用方法

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读