Flutter-如何使用图像和图像下方的文本/图标的容器小部件

Question

我在flutter中的容器中尝试创建一个图像和该图像下方的文本/图标时遇到了一点问题。到目前为止，我想在图像下包括三行小部件，每行都有一个文本小部件或一个图标小部件，但每当我尝试这样做时，容器就会变成文本/图标小部件的形状，图像就会消失。在这种情况下，我是否使用了错误的小部件？我想在图片的底部有一些类似的东西，包括标题、日期和位置。

我的代码：

class EventRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 150.0,
margin: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 24.0,
),
child: new Stack(
children: <Widget>[
eventCardContent,
userThumbnail,
],
),
);
}
final userThumbnail = new Container(
margin: EdgeInsets.symmetric(vertical: 16.0),
alignment: FractionalOffset.centerLeft,
child: CircleAvatar(
backgroundImage: AssetImage("assets/images/letter_u.png"),
backgroundColor: Colors.white,
maxRadius: 40.0,
),
);
final eventCardContent = new Container(
margin: new EdgeInsets.only(left: 46.0),
decoration: new BoxDecoration(
shape: BoxShape.rectangle,
color: new Color(0xFFFFFFFF),
borderRadius: new BorderRadius.circular(8.0),
image: DecorationImage(
image: AssetImage("assets/images/moon_pumpkin.jpeg"),
fit: BoxFit.fill,
),
),
);

Answer 1

您只需要用Column包装您的userThumbnail容器，并使用属性mainAxisSize:mainAxisSize.min，即可解决您的问题。

它告诉列小部件占用空间所需的空间但不超过此空间。任何大小的不确定性不适用于mainAxisSize: MainAxisSize.min，并可能导致大小未定义的ui错误。

以下代码可能会对您有所帮助。

@override
Widget build (BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Csd"),
),
body: Column(
children: <Widget>[
Container(
height: 150.0,
margin: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 24.0,
),
child: new Stack(
children: <Widget>[
eventCardContent,
userThumbnail,
],
),
),
new Column(
children: <Widget>[
Row(
children: <Widget>[
new Column(
children: <Widget>[
Text("SEP"),
Text("30"),
],
),
Expanded(
child:new Column(
children: <Widget>[
new Text("title"),
new Text("Sub title"),
new Text("Second Sub Title"),
],
)
)
],
),
],
)
],
),
);
}