Dart 如何为颤振中的列指定图像背景
我想知道如何在Flitter中为我的flipcard中的一列添加图像作为背景 我希望将图像添加到何处的代码如下所示(从新的子列到末尾):Dart 如何为颤振中的列指定图像背景,dart,flutter,flutter-layout,Dart,Flutter,Flutter Layout,我想知道如何在Flitter中为我的flipcard中的一列添加图像作为背景 我希望将图像添加到何处的代码如下所示(从新的子列到末尾): FlipCard( 方向:FlipDirection.HORIZONTAL,//默认值 正面:集装箱( 装饰:新盒子装饰( 边框:新边框。全部(颜色:Colors.black), 边界半径:边界半径。圆形(10.0), ), 保证金:所有边缘套(10.0), 子:新列( mainAxisAlignment:mainAxisAlignment.start, 儿童
FlipCard(
方向:FlipDirection.HORIZONTAL,//默认值
正面:集装箱(
装饰:新盒子装饰(
边框:新边框。全部(颜色:Colors.black),
边界半径:边界半径。圆形(10.0),
),
保证金:所有边缘套(10.0),
子:新列(
mainAxisAlignment:mainAxisAlignment.start,
儿童:[
新专栏(
儿童:[
新容器(
保证金:所有(10),
宽度:190.0,
身高:190.0,
装饰:新盒子装饰(
形状:BoxShape.circle,
边框:新边框。全部(颜色:Colors.black),
图片:新装饰图片(
fit:BoxFit.fill,
图像:新网络图像(
"https://pbs.twimg.com/profile_images/610120554738266112/I4pl2ygE_400x400.jpg")
)
)
),
新文本(“拉尔斯·勒克”,
样式:新文本样式(
字体大小:20.0,
),
),
新文本('Venstre',
样式:新文本样式(
尺寸:15,
),
),
],
),
在图中可以看到完整的布局,并用蓝色勾勒出我想要图像背景的位置:
希望您能帮助我,谢谢。只需将-
列
用-装饰框
代码:
FlipCard(
方向:FlipDirection.HORIZONTAL,//默认值
子:容器(
装饰:新盒子装饰(
边框:新边框。全部(颜色:Colors.black),
边界半径:边界半径。圆形(10.0),
),
保证金:所有边缘套(10.0),
子:新列(
mainAxisAlignment:mainAxisAlignment.start,
儿童:[
DecoratedBox(//添加此
子:新列(
儿童:[
新容器(
保证金:所有(10),
宽度:190.0,
身高:190.0,
装饰:新盒子装饰(
形状:BoxShape.circle,
边框:新边框。全部(颜色:Colors.black),
图片:新装饰图片(
fit:BoxFit.fill,
图像:新网络图像(
"https://pbs.twimg.com/profile_images/610120554738266112/I4pl2ygE_400x400.jpg")))),
新文本(
“拉尔斯·勒克”,
样式:新文本样式(
字体大小:20.0,
颜色:颜色。白色
),
),
新文本(
“文斯特”,
样式:新文本样式(
尺寸:15,
颜色:颜色。白色
),
),
],
mainAxisSize:mainAxisSize.min,
),
装饰:盒子装饰(
图像:装饰图像(
图片:NetworkImage(
'https://placeimg.com/640/480/any'),fit:BoxFit.fill),
),
]))),
输出:
我成功了,但填充并不能掩盖一切,但我会努力解决。谢谢你的帮助。你知道我最终无法拉伸图像(无论大小)的原因吗?添加横轴对齐以在列中拉伸我将在哪里放置对齐,如果我将对齐放置在与图像相同的位置,它将不接受我的对齐拟合.对齐:CrossAxisAlignment.stretch
FlipCard(
direction: FlipDirection.HORIZONTAL, // default
front: Container(
decoration: new BoxDecoration(
border: new Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(10.0),
),
margin: EdgeInsets.all(10.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
new Column(
children: <Widget>[
new Container(
margin: EdgeInsets.all(10),
width: 190.0,
height: 190.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
border: new Border.all(color: Colors.black),
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage(
"https://pbs.twimg.com/profile_images/610120554738266112/I4pl2ygE_400x400.jpg")
)
)
),
new Text('Lars Løkke',
style: new TextStyle(
fontSize: 20.0,
),
),
new Text('Venstre',
style: new TextStyle(
fontSize: 15,
),
),
],
),
FlipCard(
direction: FlipDirection.HORIZONTAL, // default
child: Container(
decoration: new BoxDecoration(
border: new Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(10.0),
),
margin: EdgeInsets.all(10.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
DecoratedBox( // add this
child: new Column(
children: <Widget>[
new Container(
margin: EdgeInsets.all(10),
width: 190.0,
height: 190.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
border: new Border.all(color: Colors.black),
image: new DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage(
"https://pbs.twimg.com/profile_images/610120554738266112/I4pl2ygE_400x400.jpg")))),
new Text(
'Lars Løkke',
style: new TextStyle(
fontSize: 20.0,
color: Colors.white
),
),
new Text(
'Venstre',
style: new TextStyle(
fontSize: 15,
color: Colors.white
),
),
],
mainAxisSize: MainAxisSize.min,
),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://placeimg.com/640/480/any'),fit: BoxFit.fill)),
),
]))),