要将 Flutter 中的 AppBar
设置为透明,可以通过将 backgroundColor
属性设置为 Colors.transparent
,并将 elevation
设置为 0 来移除阴影。这样,AppBar
将不会有背景色或阴影效果,使其完全透明。最重要的一点是设置extendBodyBehindAppBar 为true 。
原理是取消appbar的颜色,使用自定义的Container来代替appbar
@override
Widget build(BuildContext context) {
super.build(context);
return Scaffold(
appBar: AppBar(
title: Text("首页"),
// 设置背景透明
backgroundColor: Colors.transparent,
),
// 让body延伸到AppBar后面 如果不延伸,也不会是透明
extendBodyBehindAppBar: true,
body: bodyView(),
);
}
bodyView() {
return Container(
// kToolbarHeight 是appbar 高度
padding:
EdgeInsets.only(top: ScreenUtil().statusBarHeight + kToolbarHeight),
// 整个界面渐变色
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0xFFD1EDFF), Color(0x00C3E4FA)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) {
return [
SliverToBoxAdapter(
child: Container(
clipBehavior: Clip.hardEdge,
margin: EdgeInsets.fromLTRB(16.w, 12.h, 16.w, 16.h),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.r),
),
child: Image.network(
"https://www.vuv-tech.com/u_file/images/20_06_19/9412f547d9.jpg",
width: double.infinity,
height: 200,
fit: BoxFit.fill,
),
),
)
];
},
body: Column(
children: [
TabBar(
tabs: tabs.map((e) => Text(e)).toList(),
controller: tabController,
labelPadding: EdgeInsets.symmetric(vertical: 10.h),
dividerColor: Color(0x80D6D6D6),
onTap: (value) {
homeController.chooseIndex.value = value;
},
labelColor: Color(0xFF232427),
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
),
unselectedLabelColor: Color(0xFF65676E),
unselectedLabelStyle: TextStyle(
fontWeight: FontWeight.normal,
),
),
Expanded(
flex: 1,
child: TabBarView(
controller: tabController,
children: tabbarView,
),
)
],
),
),
);
}