我正在努力使之振奋:
我的实际结果:
我的代码是这样的:
new Container(
height: 150.0,
margin: const EdgeInsets.only(top: 16.0, bottom: 8.0),
child: new Stack(
children: <Widget>[
recantoCard,
recantoThumbnail,
],
),
)
final recantoThumbnail = new Container(
alignment: new FractionalOffset(0.0, 0.5),
margin: const EdgeInsets.only(left: 5.0, top: 10),
child: new Image(
image: new AssetImage("assets/nossos_restaurantes.png"),
height: 350.0,
),
);
final recantoCard = new Container(
margin: const EdgeInsets.only(left: 0.0, right: 48.0),
decoration: new BoxDecoration(
color: Color(getColorHexFromStr("E5E6E8")),
shape: BoxShape.rectangle,
),
child: new Container(
margin: const EdgeInsets.only(top: 10.0, left: 170.0),
constraints: new BoxConstraints.expand(),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text("text",
style: TextStyle(
color: Colors.black,
fontFamily: 'Poppins',
fontWeight: FontWeight.w600,
fontSize: 20.0)),
new Text("texto:",
style: TextStyle(
color: Colors.black,
fontFamily: 'Poppins',
fontWeight: FontWeight.w500,
fontSize: 17.0)),
],
),
),
);
图像是一个.png文件,我需要将其覆盖到“容器和堆栈”中,但是图像始终停留在150高度的容器中。我如何用图像超越容器?
答案 0 :(得分:1)
要使图像超过容器,您必须使用 Matrix4.translationValues(double x,double y,double z)类。
在需要立交时使用此类 transform:Matrix4.translationValues(0.0,60,0.0),
Container(
height: 150.0,
color: Colors.red,
child: Center(
child:Container(
height: 130.0,
width: 130.0,
transform: Matrix4.translationValues(0.0, 60, 0.0),
child: Image.asset('assets/image.jpg'),
)
),
)