简体   繁体   English

Flutter Layouts,在 Column 中展开 Container 以匹配其他小部件的宽度

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM