Flutter 将图像背景添加到主页
我正在尝试为我的主页添加背景，但是，它似乎不起作用。有什么想法吗？我知道如何添加它本身，但不确定如何构造它。我收到了一些使用堆栈的建议，但我不熟悉这种方法，而且网上的资源也不清楚 如果您能就如何构建此架构提供任何建议，我们将不胜感激 这是背景图像代码：Flutter 将图像背景添加到主页,flutter,Flutter,我正在尝试为我的主页添加背景，但是，它似乎不起作用。有什么想法吗？我知道如何添加它本身，但不确定如何构造它。我收到了一些使用堆栈的建议，但我不熟悉这种方法，而且网上的资源也不清楚 如果您能就如何构建此架构提供任何建议，我们将不胜感激 这是背景图像代码： Widget build(BuildContext context) { return DecoratedBox( decoration: BoxDecoration( image: Decoratio
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/startbackground.jpg"),
fit: BoxFit.cover),
),
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
color: Colors.orangeAccent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.purpleAccent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.teal,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style:
TextStyle(color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
);
}
}
如果脚手架是背景图像代码的子项，那么我猜脚手架的背景颜色隐藏了图像 为脚手架设置透明背景色：
Scaffold(
backgroundColor: Color.transparent,
...
这最终奏效了。见下文
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(children: <Widget>[
Image.asset(
"assets/startbackground.jpg",
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Scaffold(
body: Container(
color: Colors.transparent,
height: double.infinity,
width: double.infinity,
alignment: Alignment.bottomLeft,
child: UnconstrainedBox(
child: Padding(
padding: const EdgeInsets.only(left: 50, bottom: 50),
child: Container(
height: 400,
width: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
child: Text(
"Text",
style: TextStyle(
fontSize: 30, fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60,fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 3,
child: Container(
child: Text(
"Some Text",
style: TextStyle(
fontSize: 60, fontWeight: FontWeight.w700),
),
color: Colors.transparent,
),
),
Expanded(
flex: 2,
child: Padding(
padding: EdgeInsets.all(15),
child: FlatButton(
minWidth: 200,
onPressed: () {},
child: Text(
"Get Started",
style: TextStyle(
color: Color(0xff7638c9), fontSize: 15),
),
color: Colors.transparent,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.purple),
borderRadius: BorderRadius.circular(18.0),
),
),
),
),
],
),
),
),
),
),
)
]);
}
}
class MyHomePage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回堆栈（子级：[
影像资产(
“assets/startbackground.jpg”，
高度：MediaQuery.of（context）.size.height，
宽度：MediaQuery.of（context）.size.width，
适合：BoxFit.cover，
),
脚手架(
主体：容器(
颜色：颜色。透明，
高度：双无限，
宽度：double.infinity，
对齐：对齐。左下角，
孩子：不受约束的盒子(
孩子：填充(
填充：仅限常量边集（左：50，下：50），
子：容器(
身高：400，
宽度：200，
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
扩大(
弹性：1，
子：容器(
子：文本(
“文本”，
样式：TextStyle(
fontSize:30，fontWeight:fontWeight.w700），
textAlign:textAlign.left，
),
颜色：颜色。透明，
),
),
扩大(
弹性：3，
子：容器(
子：文本(
“一些文字”，
样式：TextStyle(
fontSize:60，fontWeight:fontWeight.w700），
),
颜色：颜色。透明，
),
),
扩大(
弹性：3，
子：容器(
子：文本(
“一些文字”，
样式：TextStyle(
fontSize:60，fontWeight:fontWeight.w700），
),
颜色：颜色。透明，
),
),
扩大(
弹性：2，
孩子：填充(
填充：边缘设置。全部（15），
孩子：扁平按钮(
最小宽度：200，
按下：（）{}，
子：文本(
“开始”，
样式：TextStyle(
颜色：颜色（0xff7638c9），字体大小：15），
),
颜色：颜色。透明，
形状：圆形矩形边框(
边：边框边（颜色：颜色。紫色），
边界半径：边界半径。圆形（18.0），
),
),
),
),
],
),
),
),
),
),
)
]);
}
}
装饰框，而是一个框装饰（在容器内，对于装饰：
参数）
：p
下面是一个例子：
class BackgroundImagePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.orangeAccent, // this has been moved up into BoxDeco
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://i.pravatar.cc/300'
)
)
),
height: double.infinity,
width: double.infinity,
... <snip> ...
class BackgroundImagePage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
主体：容器(
装饰：盒子装饰(
color:Colors.orangeacent，//此项已上移到BoxDeco中
图像：装饰图像(
适合：BoxFit.cover，
图片：NetworkImage(
'https://i.pravatar.cc/300'
)
)
),
高度：双无限，
宽度：double.infinity，
... ...
是的，我已经这样做了，但是如何在上面的代码中添加背景图像呢？我包含的两个代码段没有集成