Flutter容器标签指示器插件container_tab_indicator的使用
Flutter容器标签指示器插件container_tab_indicator的使用
ContainerTabIndicator
ContainerTabIndicator 插件允许您自定义 TabBar 的指示器。通过这个插件，您可以调整指示器的宽度、高度、颜色、圆角半径、边框以及定位等属性。
主要特性
- 宽度和高度：可以设置固定值或相对于 Tab 宽度的比例。
- 颜色：更改指示器的颜色。
- 圆角半径：为指示器添加圆角效果。
- 边框：添加边框并设置其宽度和颜色。
- 内边距：通过
padding属性调整指示器的位置。
示例代码
以下是完整的示例代码，展示了如何在不同的场景中使用 ContainerTabIndicator：
import 'package:flutter/material.dart';
import 'package:container_tab_indicator/container_tab_indicator.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('ContainerTabIndicator Example'),
),
body: DefaultTabController(
length: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 默认的 ContainerTabIndicator
SizedBox(
height: 56,
child: TabBar(
tabs: [
Text('First', style: TextStyle(color: Colors.black)),
Text('Second', style: TextStyle(color: Colors.black)),
],
indicator: ContainerTabIndicator(),
),
),
// 使用宽度比例和内边距
SizedBox(
height: 56,
child: TabBar(
tabs: [
Text('First', style: TextStyle(color: Colors.black)),
Text('Second', style: TextStyle(color: Colors.black)),
],
indicator: ContainerTabIndicator(
widthFraction: 0.6,
height: 4,
padding: const EdgeInsets.only(top: 26),
),
),
),
// 固定宽度和高度
SizedBox(
height: 56,
child: TabBar(
tabs: [
Text('First', style: TextStyle(color: Colors.black)),
Text('Second', style: TextStyle(color: Colors.black)),
],
indicator: ContainerTabIndicator(
width: 64,
height: 32,
),
),
),
// 添加边框
SizedBox(
height: 56,
child: TabBar(
tabs: [
Text('First', style: TextStyle(color: Colors.black)),
Text('Second', style: TextStyle(color: Colors.black)),
],
indicator: ContainerTabIndicator(
width: 64,
height: 32,
borderWidth: 2.0,
borderColor: Colors.black,
),
),
),
// 圆角
SizedBox(
height: 56,
child: TabBar(
tabs: [
Text('First', style: TextStyle(color: Colors.black)),
Text('Second', style: TextStyle(color: Colors.black)),
],
indicator: ContainerTabIndicator(
radius: BorderRadius.all(Radius.circular(16.0)),
padding: const EdgeInsets.all(8.0),
),
),
),
// 更大的圆角和边框
SizedBox(
height: 56,
child: TabBar(
tabs: [
Text('First', style: TextStyle(color: Colors.black)),
Text('Second', style: TextStyle(color: Colors.black)),
],
indicator: ContainerTabIndicator(
width: 96,
height: 32,
radius: BorderRadius.all(Radius.circular(16.0)),
borderWidth: 2.0,
borderColor: Colors.black,
),
),
),
// 不同方向的圆角
SizedBox(
height: 56,
child: TabBar(
tabs: [
Text('First', style: TextStyle(color: Colors.black)),
Text('Second', style: TextStyle(color: Colors.black)),
],
indicator: ContainerTabIndicator(
width: 96,
height: 32,
radius: BorderRadius.only(
topLeft: Radius.circular(8.0),
bottomRight: Radius.circular(8.0),
),
),
),
),
// 不同方向的圆角加边框
SizedBox(
height: 56,
child: TabBar(
tabs: [
Text('First', style: TextStyle(color: Colors.black)),
Text('Second', style: TextStyle(color: Colors.black)),
],
indicator: ContainerTabIndicator(
width: 96,
height: 32,
radius: BorderRadius.only(
topLeft: Radius.circular(8.0),
bottomRight: Radius.circular(8.0),
),
borderWidth: 2.0,
borderColor: Colors.black,
),
),
),
// 内边距和边框
SizedBox(
height: 56,
child: TabBar(
tabs: [
Text('First', style: TextStyle(color: Colors.black)),
Text('Second', style: TextStyle(color: Colors.black)),
],
indicator: ContainerTabIndicator(
width: 16,
height: 16,
radius: BorderRadius.circular(8.0),
padding: const EdgeInsets.only(left: 36),
borderWidth: 2.0,
borderColor: Colors.black,
),
),
),
// TabBarView 显示内容
SizedBox(
height: 16,
child: TabBarView(
children: [
Container(color: Colors.red[400]),
Container(color: Colors.green[400]),
],
),
)
],
),
),
),
);
}
}
参考资料
贡献
该插件仍在早期阶段，如果您发现任何问题或有改进建议，欢迎提交 Issue 或 Pull Request。更多详情请参阅 Issue board。
更多关于Flutter容器标签指示器插件container_tab_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter容器标签指示器插件container_tab_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter中使用container_tab_indicator插件的示例代码。这个插件允许你自定义TabLayout中的指示器样式，使其可以适应各种UI设计需求。
首先，确保你已经在pubspec.yaml文件中添加了container_tab_indicator依赖：
dependencies:
flutter:
sdk: flutter
container_tab_indicator: ^x.y.z # 请替换为最新版本号
然后，运行flutter pub get来安装依赖。
以下是一个完整的示例代码，展示了如何使用container_tab_indicator来创建一个自定义标签指示器：
import 'package:flutter/material.dart';
import 'package:container_tab_indicator/container_tab_indicator.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Container Tab Indicator Example'),
bottom: TabBar(
indicator: ContainerTabIndicator(
// 自定义指示器的容器
containerBuilder: (context, tabIndex) {
return Container(
color: Colors.blue, // 指示器的颜色
height: 4.0, // 指示器的高度
width: MediaQuery.of(context).size.width / 3, // 根据Tab数量分配宽度
);
},
indicatorPadding: EdgeInsets.symmetric(horizontal: 8.0), // 指示器左右的内边距
),
tabs: [
Tab(icon: Icon(Icons.directions_car), text: 'Tab 1'),
Tab(icon: Icon(Icons.directions_transit), text: 'Tab 2'),
Tab(icon: Icon(Icons.directions_bike), text: 'Tab 3'),
],
),
),
body: TabBarView(
children: [
Center(child: Text('Content of Tab 1')),
Center(child: Text('Content of Tab 2')),
Center(child: Text('Content of Tab 3')),
],
),
),
),
);
}
}
在这个示例中，我们使用了DefaultTabController来管理Tab的状态，TabBar来显示Tab按钮，并使用TabBarView来显示与每个Tab关联的内容。关键部分是indicator属性，它使用了ContainerTabIndicator来自定义指示器的样式。
containerBuilder：这是一个函数，它返回一个Container，你可以在这里自定义指示器的样式，如颜色、高度和宽度。indicatorPadding：用于设置指示器左右的内边距。
这个示例展示了如何使用container_tab_indicator插件来自定义Tab指示器的外观，你可以根据实际需求进一步调整样式。
