AppBar 透明需要在Scaffold 下面
透明有两种情况
第一种 以这个为例子 这种全透明
![](https://img-blog.csdnimg.cn/img_convert/7bce5bfac24ae97d2d636bfee45deedc.png)
实现思路就是
return Scaffold(
extendBodyBehindAppBar: true,//主要代码为extendBodyBehindAppBar 这个属性
appBar: AppBar(
centerTitle: true,
// 标题居中
backgroundColor: Colors.transparent,
// 背景颜色设置为透明
shadowColor: Colors.transparent,
// 阴影也要设置为透明
//把AppBar 设置为透明色
elevation: 0,
),
body: Container(
//设置背景图背景图覆盖整个就可以做到上面图的效果
image: DecorationImage(
image: AssetImage('assets/images/dialog_success.png'),
fit: BoxFit.fill, // 完全填充
),
)
第二种就是 滑动时导航栏透明
![](https://img-blog.csdnimg.cn/img_convert/99f9624ec6c3d94e0c54f99f3c9fdda6.png)
实现思路和上面大致
return Scaffold(
extendBodyBehindAppBar: true,//主要代码为extendBodyBehindAppBar 这个属性
appBar: AppBar(
centerTitle: true,
// 标题居中
backgroundColor: Colors.transparent,
// 背景颜色设置为透明
shadowColor: Colors.transparent,
// 阴影也要设置为透明
//把AppBar 设置为透明色
elevation: 0,
),
//Stack 这个可以固定底部导航栏
![](https://img-blog.csdnimg.cn/img_convert/5e071dca5e2ed6305c7f50adc8c30a73.png)
body: Stack(
children: [
ListView.builder(
内容
),
//底部导航栏
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
// height: 20,
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
border: Border.all(width: 1.0, color: Colors.white),
color: Colors.white),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(10),
// child: Text(data.l.chapterName.toString()), 如果需要可以自己开放
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.yellow,
elevation: 0,
minimumSize: const Size(0, 35),
shape: const StadiumBorder(),
textStyle: const TextStyle(fontSize: 14),
),
child: const Text(
'开始阅读',
style: TextStyle(color: Colors.black),
),
)
],
),
),
),
]
),