乐趣区

关于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

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

退出移动版