Flutter实现iOS TabBarController效果和android TabHost效果
先上截图， 如何实现下图的效果呢。对于iOS开发者，我们可以使用UITabBarController来实现,对于android开发者,我们可以使用FragmentTabHost来实现。在Flutter中并没有这两个控件，进入正题，我们看看在Flutter中我们如何使用Flutter中的PageView来实现这种效果。
目录
TabBar 是 Flutter 中一个非常常用的导航组件，用于实现标签页切换效果。结合 TabBarView 和 DefaultTabController，可以快速实现从顶部导航到底部导航的多种场景。本文将全面介绍 TabBar 的用法、属性，并结合案例展示其灵活性。
一、什么是 TabBar
TabBar 是一个显示一组选项卡的组件，通常与 TabBarView 和 DefaultTabController 一起使用，能轻松实现内容区域的切换。典型应用场景包括：顶部导航栏、底部导航栏等。
二、TabBar的基本实现
下面是一个简单的 TabBar 应用，展示了如何实现顶部导航：
import 'package:flutter/material.dart';
class FlutterTabBarDemosPage extends StatefulWidget {
static String routeName = '/flutterTabBar_examples_page';
const FlutterTabBarDemosPage({super.key});
@override
State<FlutterTabBarDemosPage> createState() => _FlutterTabBarDemosPageState();
}
class _FlutterTabBarDemosPageState extends State<FlutterTabBarDemosPage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 4, // Tab 的数量
child: Scaffold(
appBar: AppBar(
title: const Text('DefaultTabController'),
),
body: const TabBarView(
children: [
Center(child: Text('首页')),
Center(child: Text('通讯录')),
Center(child: Text('发现')),
Center(child: Text('我的')),
],
),
bottomNavigationBar: Container(
color: Colors.blue, // 设置底部导航的背景色
child: TabBar(
labelColor: Colors.white, //选中时候的标签颜色
unselectedLabelColor: Colors.white60,//未选中时候的标签颜色
indicatorColor: Colors.yellow,//选中时候的标签颜色
labelStyle: const TextStyle(fontSize: 12),//选中标签的文字样式
unselectedLabelStyle: const TextStyle(fontSize: 12),//未选中标签的文字样式
indicatorWeight: 2.0,//indicatorColor
indicatorPadding:const EdgeInsets.all(10),//指示器与标签之间的间距
indicatorSize: TabBarIndicatorSize.tab,//指示器的宽度类型 TabBarIndicatorSize.tab：指示器与标签宽度一致 TabBarIndicatorSize.label：指示器与标签文字宽度一致。
indicator: BoxDecoration(//完全自定义指示器样式，例如下划线、圆点等。
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),//选中时候的标签颜色
tabs: const [
Tab(icon: Icon(Icons.home), text: '首页'),
Tab(icon: Icon(Icons.star), text: '通讯录'),
Tab(icon: Icon(Icons.settings), text: '发现'),
Tab(icon: Icon(Icons.settings), text: '我的'),
],
),
),
),
);
}
}
三、TabBar 的属性详解
TabBar 是 Flutter 中用于实现标签页导航的组件，提供了丰富的属性来进行样式和行为的自定义。以下是 TabBar 的常用属性及其作用:
1.常用属性列表
1.基本属性
1.tabs
这个属性用来定义每个标签的内容，通常使用 Tab 小部件，支持文本、图标或自定义组件。
TabBar(
tabs: [
Tab(text: 'Home', icon: Icon(Icons.home)),
Tab(text: 'Star', icon: Icon(Icons.star)),
],
)2.controller
这个属性用于手动管理 Tab 的切换状态。如果未提供，默认使用最近的
TabController controller = TabController(length: 3, vsync: this);
TabBar(controller: controller, tabs: [...]);3.isScrollable
这个属性用于判断是否可以水平滚动。如果设置为 true，标签会根据内容宽度自适应；否则平分屏幕宽度。
TabBar(isScrollable: true, tabs: [...]);2.样式属性
4.labelColor
这个属性用于设置选中标签的文字颜色。
5.unselectedLabelColor
这个属性用于设置未选中标签的文字颜色。
6.labelStyle
这个属性用于设置选中标签的文字样式。
7.unselectedLabelStyle
这个属性用于设置未选中标签的文字样式。
8.indicatorColor
这个属性用于设置指示器的颜色。
9.indicatorWeight
这个属性用于设置指示器的厚度。
10.indicatorPadding
这个属性用于设置指示器与标签之间的间距。
默认值为：EdgeInsets.zero
11.indicatorSize
这个属性用于指示器的宽度类型。它是个枚举类型：
- TabBarIndicatorSize.tab：指示器与标签宽度一致。
- TabBarIndicatorSize.label：指示器与标签文字宽度一致。
默认值：TabBarIndicatorSize.tab
12.indicator
这个属性用于完全自定义指示器样式，例如下划线、圆点等。
TabBar(
indicator: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10),
),
tabs: [...],
);3.行为属性
13.onTap
这个属性是点击标签时的回调函数，参数为标签索引。
TabBar(
onTap: (index) {
print("Tab $index clicked");
},
tabs: [...],
);14.dragStartBehavior
这是个DragStartBehavior类型的枚举，用来说明拖动行为的方式(down或start)。
默认值为DragStartBehavior.start。
四、TabBar的高级用法
1.自定义TabBar
了解TabBar的用法之后，我们可以结合Flutter中的动画制作各种炫酷的动画效果。
在下面的例子中，我们实现了切换TabBar的时候字体方法和滑动的效果。
代码如下：
import 'dart:math';
import 'package:flutter/material.dart';
class FlutterTabBarDemosPage extends StatefulWidget {
static String routeName = '/flutterTabBar_examples_page';
const FlutterTabBarDemosPage({super.key});
@override
State<FlutterTabBarDemosPage> createState() => _FlutterTabBarDemosPageState();
}
class _FlutterTabBarDemosPageState extends State<FlutterTabBarDemosPage>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 4, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('TabBar 动画效果'),
),
body: Column(
children: [
Expanded(
child: TabBarView(
controller: _tabController,
children: const [
Center(child: Text('首页')),
Center(child: Text('通讯录')),
Center(child: Text('发现')),
Center(child: Text('我的')),
],
),
),
_buildCustomTabBar(),
],
),
);
}
Widget _buildCustomTabBar() {
return Container(
color: Colors.blue, // 设置底部导航的背景色
child: TabBar(
controller: _tabController,
tabs: List.generate(4, (index) {
return AnimatedBuilder(
animation: _tabController.animation!,
builder: (context, child) {
double selectedNess = Curves.easeOut.transform(
max(
0.0,
1.0 - (_tabController.animation!.value - index).abs(),
),
);
double textSize = 12 + (selectedNess * 6); // 动态调整文字大小
return Tab(
icon: Icon(
_getTabIcon(index),
size: 24 + (selectedNess * 6), // 图标放大动画
),
child: Text(
_getTabLabel(index),
style: TextStyle(fontSize: textSize, color: Colors.white),
),
);
},
);
}),
),
);
}
String _getTabLabel(int index) {
switch (index) {
case 0:
return '首页';
case 1:
return '通讯录';
case 2:
return '发现';
case 3:
return '我的';
default:
return '';
}
}
IconData _getTabIcon(int index) {
switch (index) {
case 0:
return Icons.home;
case 1:
return Icons.contact_phone;
case 2:
return Icons.explore;
case 3:
return Icons.person;
default:
return Icons.home;
}
}
}效果图如下所示：
图2.自定义UITabBar动画
2.注意事项
1.DefaultTabController 的重要性
默认的 DefaultTabController能帮我们省去手动管理状态的麻烦。如果需要更复杂的逻辑，可以自定义 TabController。
2.Tab 数量要与内容一致
tabs中的数量和 TabBarView的子组件数量必须一致，否则会报错。
3.适配不同屏幕宽度
当标签内容过多时，可以使用 isScrollable: true 让标签支持滚动。
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)