我正在为主页设置背景图片。我正在从屏幕开始获取图像位置，并填充宽度而不是高度。 我在代码中遗漏了什么吗?颤振有图像标准吗?图片的大小是基于每部手机的屏幕分辨率吗?
class BaseLayout extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Image.asset("assets/images/bulb.jpg")
]
)
)
);
}
}
当前回答
你可以使用下面的代码为你的应用程序设置背景图像:
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/background.jpg"),
fit: BoxFit.cover,
),
),
// use any child here
child: null
),
);
}
如果你的容器的子部件是列小部件，你可以使用crossAxisAlignment: crossAxisAlignment。拉伸以使背景图像充满屏幕。
其他回答
截图:
代码:
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
),
child: Center(child: FlutterLogo(size: 300)),
);
}
如果你使用一个容器作为脚手架的主体，它的大小将相应的其子元素的大小，这通常不是你想要的，当你试图添加一个背景图像到你的应用程序。
再看另一个问题，@ colin -jackson也建议使用Stack而不是Container作为脚手架的主体，它肯定能达到你想要的效果。
这就是我的代码的样子
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Stack(
children: <Widget>[
new Container(
decoration: new BoxDecoration(
image: new DecorationImage(image: new AssetImage("images/background.jpg"), fit: BoxFit.cover,),
),
),
new Center(
child: new Text("Hello background"),
)
],
)
);
}
要在添加子图像后不收缩地设置背景图像，请使用此代码。
body: Container(
constraints: BoxConstraints.expand(),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/aaa.jpg"),
fit: BoxFit.cover,
)
),
//You can use any widget
child: Column(
children: <Widget>[],
),
),
根据您的需求，可以采用以下两种方式:
背景图像跨越应用程序栏
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
title: const Text(
"Home Page",
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.transparent,
),
body: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://wallpaperaccess.com/full/2440003.jpg'))
child: < Your Widgets go here >
),
));
背景图像没有跨越应用程序栏
Scaffold(
appBar: AppBar(
elevation: 0,
title: const Text(
"Home Page",
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.transparent,
),
body: Container(
height: double.infinity,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
'https://wallpaperaccess.com/full/2440003.jpg'))
child: < Your Widgets go here >
),
));
额外的:
要只向appBar添加背景图像，请参考此答案
其他答案都很棒。这是另一种方法。
这里我使用sizebox .expand()来填充可用空间，并将严格的约束传递给它的子代(Container)。 BoxFit。cover enum缩放图像并覆盖整个屏幕
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox.expand( // -> 01
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover, // -> 02
),
),
),
),
);
}
