[英]Flutter - How to use container widget with image and text/icons below image
I am having a bit of a problem trying to create an image and text/icons below that image within a container in flutter. 尝试在颤动的容器内创建图像和该图像下方的文本/图标时遇到问题。 What I have so far , I want to include three row widgets under the image, each row will have a text widget or an icon widget but whenever i try to do this the container will just take the shape of the text/icon widgets and the image will disappear.
到目前为止 ,我想在图像下方包括三行小部件,每行将具有一个文本小部件或一个图标小部件,但是每当我尝试执行此操作时,容器将仅采用文本/图标小部件的形状,图像将消失。 Am I using the wrong widget in this case?
在这种情况下,我使用的是错误的小部件吗? I would like to have something similar to this notice the bottom section of the picture with the title, date, and location.
我想在此图片的底部加上标题,日期和位置,与此类似。
My code: 我的代码:
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,
),
),
);
you nee d to just wrap your container of userThumbnail with Column and use property mainAxisSize: MainAxisSize.min, that solved your problem. 您只需要用Column包装您的userThumbnail容器并使用属性mainAxisSize:MainAxisSize.min,就可以解决您的问题。
It tells column widget to take space whatever is required but not more than that.
它告诉列窗口小部件要占用任何空间,但不要多于此。 Any uncertainty in size won't work with
mainAxisSize: MainAxisSize.min
and can result in ui error of size undefined.大小的任何不确定性都不能与
mainAxisSize: MainAxisSize.min
并且可能导致大小不确定的ui 错误 。
Following code may help you. 以下代码可能会对您有所帮助。
@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.