Flutter创建TabBar

使用TabBar和TabBarView来创建一个包含"首页"、"分类"和"我的"的TabBar。每个Tab对应一个Tab控件，TabBarView中的每个页面对应一个Widget。

1.Tab使用自定义图标和颜色

一般UI设计的图会带渐变色之类的，应该保持图片的原状，不能随便就给改成纯色。

import 'package:flutter/material.dart'; // 导入Flutter Material组件库void main() {WidgetsFlutterBinding.ensureInitialized(); // 确保Flutter绑定到框架初始化runApp(const MyApp()); // 运行应用
}class MyApp extends StatelessWidget {// 创建一个无状态的组件MyAppconst MyApp({super.key}); // 构造函数，接收一个Key@overrideWidget build(BuildContext context) {// 重写build方法，构建UIreturn MaterialApp(debugShowCheckedModeBanner: false, // 禁用右上角的Debug标志theme: ThemeData(// 设置应用主题tabBarTheme: TabBarTheme(// 设置TabBar主题overlayColor: MaterialStateProperty.all<Color>(Colors.transparent), // 设置点击时的背景颜色为透明),),home: DefaultTabController(// 使用DefaultTabController来协调选项卡选择和内容显示initialIndex: 0, // 设置初始选中的Tab索引为0（首页）length: 3, // 设置Tab的数量child: Scaffold(// 创建一个Scaffold，提供基本的Material Design布局结构appBar: AppBar(// 创建一个AppBartitle: const Text('My Flutter App'), // 设置AppBar的标题), // 去掉顶部的导航栏，只需将appBar设置为nullbody: const TabBarView(// 创建TabBarView，用于显示Tab的内容physics:NeverScrollableScrollPhysics(), // 禁止在 TabBarView 中滑动切换选项卡，添加这行代码children: [Center(child: Text('首页：这里可以展示应用的主要内容')), // Tab 1 内容Center(child: Text('分类：这里可以展示商品或信息的分类')), // Tab 2 内容Center(child: Text('我的：这里可以展示用户的个人信息和设置')), // Tab 3 内容],),bottomNavigationBar: const TabBar(// 创建底部导航TabBartabs: [// Tab项定义Tab(icon: _TabIcon(// 自定义Tab图标activeIcon: // 选中状态的图标AssetImage("assets/images/tab_home_selected.png"),inactiveIcon: // 未选中状态的图标AssetImage("assets/images/tab_home_default.png"),index: 0), // Tab索引text: "首页"), // Tab文本Tab(icon: _TabIcon(activeIcon:AssetImage("assets/images/tab_category_selected.png"),inactiveIcon:AssetImage("assets/images/tab_category_default.png"),index: 1),text: "分类"),Tab(icon: _TabIcon(activeIcon:AssetImage("assets/images/tab_mine_selected.png"),inactiveIcon:AssetImage("assets/images/tab_mine_default.png"),index: 2),text: "我的"),],isScrollable: false, // 禁用滚动功能labelStyle: TextStyle(fontWeight: FontWeight.bold), // 设置文本样式为加粗labelColor: Colors.red, // 选项选中的颜色unselectedLabelColor: Colors.black, // 选项未选中的颜色indicatorColor: Colors.blue, // 下滑线颜色indicator: BoxDecoration(), // 设置为空的Container，隐藏下划线),),),);}
}class _TabIcon extends StatelessWidget {// 创建一个无状态的组件_TabIcon，用于显示Tab图标final AssetImage activeIcon; // 选中状态的图标final AssetImage inactiveIcon; // 未选中状态的图标final int index; // Tab索引const _TabIcon({// 构造函数Key? key,required this.activeIcon,required this.inactiveIcon,required this.index,}) : super(key: key);@overrideWidget build(BuildContext context) {// 重写build方法，构建UIfinal controller =DefaultTabController.of(context); // 获取当前上下文的DefaultTabControllerreturn ValueListenableBuilder(// 创建ValueListenableBuilder来监听变化valueListenable: controller.animation!, // 监听TabController的动画builder: (BuildContext context, value, Widget? child) {// 构建器回调final tabIndex = controller.index; // 获取当前选中的Tab索引return Image(// 创建Image组件来显示图标image:tabIndex == index ? activeIcon : inactiveIcon, // 根据Tab索引显示对应的图标width: 24, // 图标宽度height: 24, // 图标高度);},);}
}

这段代码创建了一个简单的Flutter应用，其中包含一个具有三个Tab的底部导航栏。每个Tab都有自己的图标和文本。这些Tab可以在用户点击它们时切换显示内容。代码中还包含了对Tab图标颜色的自定义处理，确保图标显示其原始颜色。

示意图：

2.Tab使用自定义图标，但不使用图标所带的颜色。

import 'package:flutter/material.dart';void main() {// 确保Flutter绑定到框架初始化WidgetsFlutterBinding.ensureInitialized();runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false, // 禁用右上角的Debug标志theme: ThemeData(tabBarTheme: TabBarTheme(overlayColor: MaterialStateProperty.all<Color>(Colors.transparent), // 设置点击时的背景颜色为透明),),home: DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(title: const Text('My Flutter App'),), // 去掉顶部的导航栏，只需将appBar设置为nullbody: const TabBarView(children: [Center(child: Text('首页：这里可以展示应用的主要内容')),Center(child: Text('分类：这里可以展示商品或信息的分类')),Center(child: Text('我的：这里可以展示用户的个人信息和设置')),],),bottomNavigationBar: const TabBar(tabs: [Tab(icon: _TabIcon(activeIcon:AssetImage("assets/images/tab_home_selected.png"),inactiveIcon:AssetImage("assets/images/tab_home_default.png"),index: 0),text: "首页"),Tab(icon: _TabIcon(activeIcon:AssetImage("assets/images/tab_category_selected.png"),inactiveIcon:AssetImage("assets/images/tab_category_default.png"),index: 1),text: "分类"),Tab(icon: _TabIcon(activeIcon:AssetImage("assets/images/tab_mine_selected.png"),inactiveIcon:AssetImage("assets/images/tab_mine_default.png"),index: 2),text: "我的"),],labelColor: Colors.red, // 选项选中的颜色unselectedLabelColor: Colors.grey, // 选项未选中的颜色indicatorColor: Colors.blue, // 下滑线颜色indicator: BoxDecoration(), // 设置为空的Container，隐藏下划线),),),);}
}class _TabIcon extends StatelessWidget {final AssetImage activeIcon;final AssetImage inactiveIcon;final int index;const _TabIcon({Key? key,required this.activeIcon,required this.inactiveIcon,required this.index,}) : super(key: key);@overrideWidget build(BuildContext context) {final tabIndex = DefaultTabController.of(context).index;return ImageIcon(tabIndex == index ? activeIcon : inactiveIcon,);}
}

3.Tab使用系统图标

import 'package:flutter/material.dart';void main() {// 确保Flutter绑定到框架初始化WidgetsFlutterBinding.ensureInitialized();runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false, // 禁用右上角的Debug标志theme: ThemeData(tabBarTheme: TabBarTheme(overlayColor: MaterialStateProperty.all<Color>(Colors.transparent), // 设置点击时的背景颜色为透明),),home: DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(title: const Text('My Flutter App'),), // 去掉顶部的导航栏，只需将appBar设置为nullbody: const TabBarView(children: [Center(child: Text('首页：这里可以展示应用的主要内容')),Center(child: Text('分类：这里可以展示商品或信息的分类')),Center(child: Text('我的：这里可以展示用户的个人信息和设置')),],),bottomNavigationBar: const TabBar(tabs: [Tab(icon: Icon(Icons.home), text: "首页"),Tab(icon: Icon(Icons.category), text: "分类"),Tab(icon: Icon(Icons.person), text: "我的"),],labelColor: Colors.red, // 选项选中的颜色unselectedLabelColor: Colors.grey, // 选项未选中的颜色indicatorColor: Colors.blue, // 下滑线颜色indicator: BoxDecoration(), // 设置为空的Container，隐藏下划线),),),);}
}