Flutter AppBar 自定义顶部按钮图标、颜色
// leading：在标题前面显示的一个控件。在首页，通常显示应用的 logo；在其他界面，通常显示为返回按钮。
// title：标题。通常显示为当前界面的标题文字，但也可以是其他的组件。
// actions：通常使用 IconButton 来表示，也可以包含其他的按钮组。
// bottom：一般用于放置 tabBar，即在标题下面显示一个 Tab 导航栏。
// backgroundColor：导航背景颜色。
// iconTheme：用于定义图标样式。
// textTheme：用于定义文字样式。
// centerTitle：定义标题是否居中显示。Flutter AppBar 中自定义 TabBar 实现顶部 Tab 切换
// tabs：显示的标签内容，一般使用 Tab 对象，但也可以是其他的 Widget。
// controller：用于控制 Tab 的 TabController 对象。
// isScrollable：定义是否可滚动。
// indicatorColor：定义指示器颜色。
// indicatorWeight：定义指示器高度。
// indicatorPadding：定义底部指示器的 Padding。
// indicator：指示器的 decoration，例如边框等。
// indicatorSize：指示器大小的计算方式。TabBarIndicatorSize.label 使其跟文字等宽，而 TabBarIndicatorSize.tab 使其跟每个 tab 等宽。
// labelColor：定义选中的 label 颜色。
// labelStyle：定义选中 label 的 Style。
// labelPadding：定义每个 label 的 padding 值。
// unselectedLabelColor：定义未选中的 label 颜色。
// unselectedLabelStyle：定义未选中 label 的 Style。案例代码：
import 'package:flutter/material.dart';
class ClassIf extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Row(
children: <Widget>[
Expanded(
flex: 1,
child: TabBar(
tabs: <Widget>[
Tab(text: '分类一'),
Tab(text: '分类二')
],
),
)
],
),
),
body: TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
Text('132'),
Text('132'),
Text('132'),
],
),
ListView(
children: <Widget>[
Text('132'),
Text('132'),
Text('132'),
],
)
],
),
),
);
}
}Flutter AppBar 中自定义 TabBar 实现 Tabs 的另一种方法
// 使用 TabController 定义 TabBar 的方式。
// 1. 页面必须继承 StatefulWidget。
// 2. 页面必须实现 SingleTickerProviderStateMixin。
// 3. 在页面初始化时，需要实例化 TabController。
// 4. 在 TabBar 和 TabBarView 组件中，都要指定 controller 为实例化的 TabController。
// 这种方式主要是为了监听 TabBar 与 TabBarView 的交互。例如，可以在 tab 切换时加载不同的数据或自定义切换动画。
参数详解：
// animation：一个动画值，表示 TabBar 所选选项卡指示器的当前位置以及 TabBar 和 TabBarView 的 scrollOffsets。
// index：当前的 tab 索引。
// indexIsChanging：当有动画时为 true。
// length：tab 的总数。
// offset：动画的值与当前索引之间的差异。偏移量的值必须在 -1.0 和 1.0 之间。
// previousIndex：之前的 tab 索引。
方法详解：
// animateTo：从当前 tab 跳转到目标 tab 并执行动画。
// dispose：销毁方法。
// addListener：添加监听方法。
// noSuchMethod：当试图调用一个不存在的方法时会被触发。
// notifyListeners：调用所有的监听器。
// removeListener：清除监听器。import 'package:flutter/material.dart';
// 定义AppBardemoPage StatefulWidget类
class AppBardemoPage extends StatefulWidget {
AppBardemoPage({Key key}) : super(key: key);
@override
_AppBardemoPageState createState() => _AppBardemoPageState();
}
// 对应的State类
class _AppBardemoPageState extends State<AppBardemoPage> with SingleTickerProviderStateMixin {
TabController _tabController;
// State销毁时，释放TabController资源
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
// 初始化State
void initState() {
super.initState();
// 初始化TabController
_tabController = TabController(length: 3, vsync: this, initialIndex: 0);
_tabController.addListener(() {
print(_tabController.index);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('顶部 tab 切换'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_bike)),
Tab(icon: Icon(Icons.directions_boat)),
Tab(icon: Icon(Icons.directions_bus)),
],
controller: _tabController,
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(child: Text('自行车')),
Center(child: Text('船')),
Center(child: Text('巴士')),
],
),
);
}
}自定义tabBar 不放在appBar里面示例
// 定义TransactionRecord StatefulWidget类
class TransactionRecord extends StatefulWidget {
@override
_TransactionRecord createState() => _TransactionRecord();
}
// 对应的State类
class _TransactionRecord extends State<TransactionRecord> with SingleTickerProviderStateMixin {
var _tabController;
// 初始化State
@override
void initState() {
super.initState();
// 初始化TabController
_tabController = TabController(length: 3, vsync: this, initialIndex: 0);
_tabController.addListener(() {
print(_tabController.index);
});
}
// State销毁时，释放TabController资源
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
Screen.init(context); // 初始化屏幕参数
return DefaultTabController(
length: 3,
child: Scaffold(
body: Container(
alignment: Alignment.centerLeft,
color: ColorGather.colorBg(),
child: Column(
children: [
Container(
height: 50,
color: Colors.white,
child: TabBar(
labelPadding: EdgeInsets.all(0),
controller: _tabController,
tabs: [
Tab(child: Text('时间筛选', style: TextStyle(fontSize: Screen.width(28)))),
Tab(child: Text('时间筛选', style: TextStyle(fontSize: Screen.width(28)))),
Tab(child: Text('时间筛选', style: TextStyle(fontSize: Screen.width(28)))),
],
onTap: (val) {},
),
),
Expanded(
child: TabBarView(
controller: _tabController,
children: [
Text('123'),
Text('123'),
Text('123'),
],
),
)
],
)
),
),
);
}
}不确定数量的Tab控制示例
// 如果标题列表的数量不固定，可以这样创建DefaultTabController
DefaultTabController(
length: titleList.length,
child: // 这里应继续根据你的代码需求进行布局
)本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
