我正在为主页设置背景图片。我正在从屏幕开始获取图像位置，并填充宽度而不是高度。 我在代码中遗漏了什么吗?颤振有图像标准吗?图片的大小是基于每部手机的屏幕分辨率吗?
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")
]
)
)
);
}
}
当前回答
Image.asset(
"assets/images/background.png",
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
alignment: Alignment.center,
),
如果仍然有problèm，似乎你的图像在高度和宽度上都不完美
其他回答
我不确定我是否理解你的问题，但如果你想让图像填充整个屏幕，你可以使用一个适合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"),
)
],
)
);
}
你可以使用FractionallySizedBox
有时decoratedBox不能覆盖全屏大小。 我们可以通过使用FractionallySizedBox Widget包装它来修复它。 在这个小部件中，我们给出了宽度因子和高度因子。
宽度因子显示[FractionallySizedBox]小部件应该占应用程序宽度的_____百分比。
高度因子显示[FractionallySizedBox]小部件应该占应用程序高度的_____百分比。
示例:hightfactor = 0.3表示应用高度的30%。Widthfactor = 0.4表示应用宽度的40%。
Hence, for full screen set heightfactor = 1.0 and widthfactor = 1.0
提示:FractionallySizedBox与堆栈小部件配合得很好。所以你可以很容易地在堆栈小部件的背景图像上添加按钮，头像，文本，而在行和列中你不能这样做。
要了解更多信息，请查看该项目的存储库github存储库链接
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Stack(
children: <Widget>[
Container(
child: FractionallySizedBox(
heightFactor: 1.0,
widthFactor: 1.0,
//for full screen set heightFactor: 1.0,widthFactor: 1.0,
child: DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/1.jpg"),
fit: BoxFit.fill,
),
),
),
),
),
],
),
),
),
);
}
}
输出:
Stack(
children: [
SizedBox.expand(
child: FittedBox(
fit: BoxFit.cover,
child: Image.asset(
Images.splashBackground,
),
)
),
your widgets
])
这帮助了我
以下是实现这一目标的方法。第一个例子是资产映像，第二个例子是网络映像。
当地的形象:
Container(
height: 200,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/cat2.jpg"),
fit: BoxFit.cover),
),
child:
)
网络图片:
Container(
height: 200,
width: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://picsum.photos/id/237/200/300"),
fit: BoxFit.cover),
),
child:
)
