乐趣区

关于flutter:Flutter深入浅出组件篇TabBar

作者：

jiezi

在

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个属性

字段 属性 形容
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, 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

组件用的还是绝对比拟频繁的，也是开发人员必须把握的一个组件。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章