我正在为主页设置背景图片。我正在从屏幕开始获取图像位置，并填充宽度而不是高度。 我在代码中遗漏了什么吗?颤振有图像标准吗?图片的大小是基于每部手机的屏幕分辨率吗?
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")
]
)
)
);
}
}
当前回答
要在添加子图像后不收缩地设置背景图像，请使用此代码。
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>[],
),
),
其他回答
截图:
代码:
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
),
child: Center(child: FlutterLogo(size: 300)),
);
}
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/background.png'),fit:BoxFit.cover
)
),
);
你可以使用下面的代码为你的应用程序设置背景图像:
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。拉伸以使背景图像充满屏幕。
我不确定我是否理解你的问题，但如果你想让图像填充整个屏幕，你可以使用一个适合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 */,
),
);
}
}
对于你的第二个问题，这里有一个关于如何将依赖分辨率的资产图像嵌入到应用程序中的文档链接。
你可以使用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,
),
),
),
),
),
],
),
),
),
);
}
}
输出:
