脚手架的背景图片
Background Image for Scaffold
我想将图像设置为脚手架的背景颜色。设置AppBar和bottom bar时,使用Container的装饰作为脚手架的body不会覆盖整个屏幕。
我想全屏显示背景。
下面是我的脚手架代码:
Scaffold(
backgroundColor: Image.asset('images/background.png').color,
body: Container(
decoration: defaultAppBoxDecoration(),
),
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
title: Text('Title here', style: TextStyle(color: Colors.teal),),
leading: IconButton(
icon: Image.asset('images/star.png'),
onPressed: () {},
),
actions: <Widget>[
IconButton(icon: Image.asset('images/star.png')),
// IconButton(icon: Image.asset('images/grid.png')),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: IconButton(icon: Image.asset('images/star.png')),
),
bottomNavigationBar: Container(
padding: EdgeInsets.only(left: 4.0, right: 4.0),
height: 44.0 + MediaQuery.of(context).padding.bottom,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Image.asset('images/star.png')),
IconButton(icon: Image.asset('images/star.png')),
],
),
),
);
尝试使用 Stack
检查以下示例:
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset(
"resources/background.png",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
),
bottomNavigationBar: Container(
padding: EdgeInsets.only(left: 4.0, right: 4.0),
height: 44.0 + MediaQuery.of(context).padding.bottom,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.star)),
IconButton(icon: Icon(Icons.star)),
],
),
),
body: Text("Hello world"))
],
);
}
您可以将脚手架放在带有背景图像的容器中,并为脚手架的主体使用透明颜色,如下所示:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.jpg"),
fit: BoxFit.cover,
),
),
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
backgroundColor: Colors.transparent,
body: Container(),
),);
设置 backgroundColor:Colors.transparent
是您缺少的关键。
我想将图像设置为脚手架的背景颜色。设置AppBar和bottom bar时,使用Container的装饰作为脚手架的body不会覆盖整个屏幕。
我想全屏显示背景。 下面是我的脚手架代码:
Scaffold(
backgroundColor: Image.asset('images/background.png').color,
body: Container(
decoration: defaultAppBoxDecoration(),
),
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
title: Text('Title here', style: TextStyle(color: Colors.teal),),
leading: IconButton(
icon: Image.asset('images/star.png'),
onPressed: () {},
),
actions: <Widget>[
IconButton(icon: Image.asset('images/star.png')),
// IconButton(icon: Image.asset('images/grid.png')),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: IconButton(icon: Image.asset('images/star.png')),
),
bottomNavigationBar: Container(
padding: EdgeInsets.only(left: 4.0, right: 4.0),
height: 44.0 + MediaQuery.of(context).padding.bottom,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Image.asset('images/star.png')),
IconButton(icon: Image.asset('images/star.png')),
],
),
),
);
尝试使用 Stack
检查以下示例:
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Image.asset(
"resources/background.png",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
),
bottomNavigationBar: Container(
padding: EdgeInsets.only(left: 4.0, right: 4.0),
height: 44.0 + MediaQuery.of(context).padding.bottom,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.star)),
IconButton(icon: Icon(Icons.star)),
],
),
),
body: Text("Hello world"))
],
);
}
您可以将脚手架放在带有背景图像的容器中,并为脚手架的主体使用透明颜色,如下所示:
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bg.jpg"),
fit: BoxFit.cover,
),
),
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
backgroundColor: Colors.transparent,
body: Container(),
),);
设置 backgroundColor:Colors.transparent
是您缺少的关键。