1、AppBar 自定义顶部按钮图标、颜色
AppBar AppBar({
Key? key,
Widget? leading, //在标题前面显示的一个控件
bool automaticallyImplyLeading = true, //当 leading 为 null 时是否隐藏 leading 控件，默认 true
Widget? title, //标题
List<Widget>? actions, //底部控件。通常用tabBar来表示放置Tab标签栏；
Widget? flexibleSpace, //此小部件堆叠在工具栏和选项卡栏的后面。它的高度与应用栏的整体高度相同
PreferredSizeWidget? bottom, //通常放tabBar，标题下面显示一个 Tab 导航栏
double? elevation, //应用栏阴影大小
double? scrolledUnderElevation, // 如果要在内容滚动到 AppBar 下时保持标高，只需将它设置为非零值
bool Function(ScrollNotification) notificationPredicate = defaultScrollNotificationPredicate, // 检查组件是否需要监听下拉事件
Color? shadowColor, //应用栏阴影颜色
Color? surfaceTintColor, //用于应用程序栏背景色的表面色调覆盖的颜色
ShapeBorder? shape, //描边形状，可使用其子类构建标题栏形状
Color? backgroundColor, //导航背景颜色
Color? foregroundColor, //导航栏中文本和图标的颜色
IconThemeData? iconTheme, //图标样式
IconThemeData? actionsIconTheme, //title 右侧小部件图标颜色，大小，阴影
bool primary = true, //true时，appBar 会以系统状态栏高度为间距显示在下方；false 时，会和状态栏重叠。
bool? centerTitle, //标题是否居中显示
bool excludeHeaderSemantics = false, //标题是否应该用 Semantics 包裹,默认false
double? titleSpacing, //title 在水平轴上的间距
double toolbarOpacity = 1.0, //应用栏透明度
double bottomOpacity = 1.0, //应用栏底部 bottom 的透明度
double? toolbarHeight, //应用栏高度
double? leadingWidth, //左侧 leading 的宽度,默认56
TextStyle? toolbarTextStyle, //导航栏图标的颜色
TextStyle? titleTextStyle, //导航栏标题的默认颜色
SystemUiOverlayStyle? systemOverlayStyle, //叠加层样式
bool forceMaterialTransparency = false, //是否强制 Material 透明，默认 false
Clip? clipBehavior, //裁剪样式
})
使用示例
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: const Center(
child: Text("测试测试测试"),
),
appBar: AppBar(
title: const Text("data"),
backgroundColor: Colors.green,
leading: const Icon(Icons.abc),
// automaticallyImplyLeading: false,
actions: [
IconButton(
onPressed: () {
print("search click");
},
icon: const Icon(Icons.search)),
IconButton.filled(
onPressed: () {
print("more click");
},
icon: const Icon(Icons.more_horiz))
],
flexibleSpace: const Text(
"Hello 我在这里呢!!!",
style: TextStyle(color: Colors.red),
),
foregroundColor: Colors.yellow,
),
),
);
}
}
2、Tabbar 属性介绍
TabBar TabBar({
Key? key,
required List<Widget> tabs, // tab组件集合，一般使用Tab对象,也可以是其他的Widget
TabController? controller, //TabController对象
bool isScrollable = false, //是否可滚动
EdgeInsetsGeometry? padding, //设置选中Tab指示器间距，默认值为 EdgeInsets.zero
Color? indicatorColor, //指示器颜色
bool automaticIndicatorColorAdjustment = true, //是否自动调整indicatorColor
double indicatorWeight = 2.0, //指示器高度
EdgeInsetsGeometry indicatorPadding = EdgeInsets.zero, //底部指示器的Padding
Decoration? indicator, //指示器decoration，例如边框等
TabBarIndicatorSize? indicatorSize, //指示器大小，TabBarIndicatorSize.label 跟文字等宽,TabBarIndicatorSize.tab 跟每个tab等宽
Color? dividerColor, // 分隔符颜色
Color? labelColor, //选中label颜色
TextStyle? labelStyle, //选中label的Style
EdgeInsetsGeometry? labelPadding, //每个label的padding值
Color? unselectedLabelColor, //未选中label颜色
TextStyle? unselectedLabelStyle, //未选中label的Style
DragStartBehavior dragStartBehavior = DragStartBehavior.start, //处理拖动开始行为的方式
MaterialStateProperty<Color?>? overlayColor, //定义响应焦点、悬停和飞溅颜色
MouseCursor? mouseCursor, //鼠标指针进入或悬停在鼠标指针上时的光标
bool? enableFeedback, //检测到的手势是否应提供声音和/或触觉反馈
void Function(int)? onTap, //单击Tab时的回调
ScrollPhysics? physics, //TabBar的滚动视图如何响应用户输入
InteractiveInkFeatureFactory? splashFactory, // 水波纹效果
BorderRadius? splashBorderRadius, // 水波纹Radius
})
3、TabBarView 属性介绍
TabBarView TabBarView({
Key? key,
//子页面，注意保持 TabBarView.children 数量、DefaultTabController.length， TabBar.tabs 三者数量相同。
required List<Widget> children,
// TabController 控制页面切换与 TabBar 设置相同的 TabController达到联动效果
TabController? controller,
//滑动效果，如滑动到末端时，继续拉动，使用 ClampingScrollPhysics 实现 Android 下微光效果。使用 BouncingScrollPhysics 实现 iOS 下弹性效果。
ScrollPhysics? physics,
//启动时阻尼效果，默认为 DragStartBehavior.start
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
//为每个 Page 页占据整个 PageView 比例；
double viewportFraction = 1.0,
//裁剪样式
Clip clipBehavior = Clip.hardEdge,
})
4、Tabbar 和 TabBarView 使用
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
//1 混入 SingleTickerProviderStateMixin
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
//数据
final int _numbs = 20;
final List<Widget> _titleList = [];
final List<Widget> _contentList = [];
//2 初始化
late TabController _tabController;
@override
void initState() {
super.initState();
//数据初始化
for (var i = 0; i < _numbs; i++) {
_titleList.add(Text("第 $i 页"));
_contentList.add(Text("第 $i 页的内容"));
}
_tabController = TabController(
length: _numbs,
vsync:
this); //注: 此处的 length 长度既要与下面 bottom 中的 tabs 数量一致,又要和 body 中 children 的数量一致.
_tabController.addListener(() {
if (_tabController.animation?.value == _tabController.index) {
print("当前选中的索引值为: ${_tabController.index}"); //获取点击或滑动页面的索引值
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
//PreferredSize 可以改变 appBar 的高度
preferredSize: const Size.fromHeight(50),
child: AppBar(
title: const Text("TabBar"),
backgroundColor: Colors.red,
//3 注: tabs 数量既要与上面 TabController 中的 length 长度一致,又要和下面 body 中 children 的数量一致.
bottom: TabBar(
isScrollable: true, //是否可滚动
padding:
const EdgeInsets.all(5), //设置选中Tab指示器间距，默认值为 EdgeInsets.zero
indicatorColor: Colors.green, //指示器颜色
automaticIndicatorColorAdjustment: true, //是否自动调整indicatorColor
indicatorWeight: 4, //指示器高度
indicatorPadding: const EdgeInsets.all(0), //底部指示器的Padding
indicatorSize: TabBarIndicatorSize.label, //指示器大小
labelColor: Colors.white, //选中label颜色
labelStyle: const TextStyle(
//选中label的Style
fontSize: 15,
),
unselectedLabelColor: Colors.grey, //未选中label颜色
unselectedLabelStyle: const TextStyle(
//未选中label的Style
fontSize: 12),
controller: _tabController,
tabs: _titleList),
)),
//注: children 中的数量既要与上面 TabController 中的 length 长度一致,又要和上面 bottom 中的 tabs 数量一致.
body: TabBarView(
controller: _tabController,
// physics: const ClampingScrollPhysics(), //滑动效果
// dragStartBehavior: DragStartBehavior.down,//启动时阻尼效果
// viewportFraction: 0.5, //为每个 Page 页占据整个 PageView 比例
// clipBehavior: Clip.none, //裁剪样式
children: _contentList),
);
}
}
补充
1、 preferredSize 组件
PreferredSize 可以改变 appBar 的高度
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(50),
child: AppBar(
....
) ),
body: Test(...),
)
2、监听 TabController 改变事件
void initState() {
super.initState();
_tabController = TabController(length: 8, vsync: this); //监听_tabController的改变事件
_tabController.addListener(() {
if (_tabController.animation!.value==_tabController.index){
print(_tabController.index); //获取点击或滑动页面的索引值 }
}
);
}
3、MaterialApp 去掉 debug 图标
return MaterialApp(
debugShowCheckedModeBanner:false , //去掉debug图标
home:Tabs(),
...
);
