我正在为主页设置背景图片。我正在从屏幕开始获取图像位置，并填充宽度而不是高度。 我在代码中遗漏了什么吗?颤振有图像标准吗?图片的大小是基于每部手机的屏幕分辨率吗?
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")
]
)
)
);
}
}
当前回答
Stack(
children: [
SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: Image.asset(
Images.splashBackground,
),
)
),
your widgets
])
这帮助了我
其他回答
我们可以使用Container并将其高度标记为无穷大
body: Container(
height: double.infinity,
width: double.infinity,
child: FittedBox(
fit: BoxFit.cover,
child: Image.network(
'https://cdn.pixabay.com/photo/2016/10/02/22/17/red-t-shirt-1710578_1280.jpg',
),
),
));
输出:
我不确定我是否理解你的问题，但如果你想让图像填充整个屏幕，你可以使用一个适合BoxFit.cover的DecorationImage。
class BaseLayout extends StatelessWidget{
@override
Widget build(BuildContext context){
return Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/bulb.jpg"),
fit: BoxFit.cover,
),
),
child: null /* add child content here */,
),
);
}
}
对于你的第二个问题，这里有一个关于如何将依赖分辨率的资产图像嵌入到应用程序中的文档链接。
如果你使用一个容器作为脚手架的主体，它的大小将相应的其子元素的大小，这通常不是你想要的，当你试图添加一个背景图像到你的应用程序。
再看另一个问题，@ 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"),
)
],
)
);
}
您可以使用Stack使图像延伸到全屏。
Stack(
children: <Widget>
[
Positioned.fill( //
child: Image(
image: AssetImage('assets/placeholder.png'),
fit : BoxFit.fill,
),
),
...... // other children widgets of Stack
..........
.............
]
);
注意:如果您使用脚手架，您可以根据需要将堆栈放在脚手架中，带或不带AppBar。
Stack(
children: [
SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: Image.asset(
Images.splashBackground,
),
)
),
your widgets
])
这帮助了我
