Dart 容器大小与盒子装饰图像不符
我想将以下容器添加到ListView,但该容器不将正在添加的图像的大小作为装饰。如果我将图像添加为容器的子对象,它可以正常工作,但我也希望在图像顶部显示文本Dart 容器大小与盒子装饰图像不符,dart,flutter,Dart,Flutter,我想将以下容器添加到ListView,但该容器不将正在添加的图像的大小作为装饰。如果我将图像添加为容器的子对象,它可以正常工作,但我也希望在图像顶部显示文本 var imageListView = new List<Container>(); var container1 = new Container( margin: EdgeInsets.all(8.0), alignment: Alignment.bottomLeft, child: new Text('Order
var imageListView = new List<Container>();
var container1 = new Container(
margin: EdgeInsets.all(8.0),
alignment: Alignment.bottomLeft,
child: new Text('Order of The Day',
style: new TextStyle(
fontFamily: 'CallingAngelsPersonalUse',
fontSize: 20.0,
color: Colors.white
),
),
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage('assets/SVSunset.jpg'),
fit: BoxFit.cover,
),
),
);
有人能看到我缺少什么吗?容器小部件大小(它的宽度和高度)等于它的子小部件。您的
文本
作为容器
子对象不够大,无法创建一个容器
,该容器可以包含您的全尺寸背景图像
您可以向容器添加宽度和高度,如下所示:
Container(
width: 55.0
height: 60.0
child:...
...
)
您还可以通过以下方式获得屏幕宽度:MediaQuery.of(context.size.width
我通过将所有内容放入堆栈并定位文本来解决此问题,如下所示:
var container1 = new Container(
margin: EdgeInsets.all(8.0),
child: new Stack(
children: <Widget>[
new Image(image: new AssetImage('assets/SVSunset.jpg')),
new Positioned(
left: 8.0,
bottom: 8.0,
child: new Text('Order of the day',
style: new TextStyle(
fontFamily: 'CallingAngelsPersonalUse',
fontSize: 30.0,
color: Colors.white
),
),
)
],
),
);
var container1=新容器(
边距:所有边集(8.0),
子:新堆栈(
儿童:[
新图像(图像:newassetimage('assets/SVSunset.jpg'),
新定位(
左:8.0,
底部:8.0,
子项:新文本(“当日顺序”,
样式:新文本样式(
fontFamily:“CallingAngelsPersonalUse”,
字体大小:30.0,
颜色:颜色。白色
),
),
)
],
),
);
对于颤振版本1.22.1,可以使用如下比例参数:
Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
image: DecorationImage(
scale: 1.5,
image: AssetImage('flutter_icon.png'),
),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Colors.white,
),
),
装饰图像无法接受缩放参数。最近更新的颤振使用缩放参数。请在回答中提及颤振版本。
Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
image: DecorationImage(
scale: 1.5,
image: AssetImage('flutter_icon.png'),
),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
color: Colors.white,
),
),