[英]Flutter Layouts, expand Container in Column to match other widgets width
I am creating chat bubbles, I want the width to be defined by the message itself, but then I added a "header" (a Row) with the name of the sender and a decorative line (a Container).我正在创建聊天气泡,我希望由消息本身定义宽度,但随后我添加了一个带有发件人姓名的“标题”(一行)和一条装饰线(一个容器)。 I want this line to fill the available space but when I expand it it pushes the width of the bubble to its maximum regardles of the width of the message.我希望这条线填充可用空间,但是当我扩展它时,它将气泡的宽度推到最大,无论消息的宽度如何。 In this sceenshots you can see that the recieved messages are too wide for its content.在此截图中,您可以看到收到的消息对于其内容来说太宽了。
This is a simplified version of the code, If I don't put the expanded the red Container is invisible (width 0), with the expanded takes the maximum space available but I want column to remain of the width that determines the message.这是代码的简化版本,如果我不放置扩展的红色容器是不可见的(宽度为 0),扩展会占用最大可用空间,但我希望列保留确定消息的宽度。
Thanks a lot.非常感谢。
return Container(
color: Colors.grey.shade200,
constraints:
BoxConstraints(maxWidth: (MediaQuery.of(context).size.width * 0.7)),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text("Juan"),
Expanded(
child: Container(
color: Colors.red,
height: 3,
),
)
],
),
Text("Text of the message"),
],
));
pskink nailed it. pskink 搞定了。 His answer in the comment:他在评论中的回答:
you need: child: IntrinsicWidth(child: Column(...
– pskink你需要: child: IntrinsicWidth(child: Column(...
– pskink
Hopes this also helps somebody else.希望这对其他人也有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.