[英]Flutter - How to use container widget with image and text/icons below image
尝试在颤动的容器内创建图像和该图像下方的文本/图标时遇到问题。 到目前为止 ,我想在图像下方包括三行小部件,每行将具有一个文本小部件或一个图标小部件,但是每当我尝试执行此操作时,容器将仅采用文本/图标小部件的形状,图像将消失。 在这种情况下,我使用的是错误的小部件吗? 我想在此图片的底部加上标题,日期和位置,与此类似。
我的代码:
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,
),
),
);
您只需要用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"),
],
)
)
],
),
],
)
],
),
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.