Flutter：ListView.builder忽略Container子项的BoxContrainst。始终应用完整的父宽度。

Question

在聊天应用程序中构建聊天气泡。我无法控制ListView.builder的Container子元素的宽度。子容器总是采用ListView.builders父容器的全宽:
Expanded -> Container width.

我的目标是：消息泡的宽度尽可能小，同时仍然包含消息文本，但不大于屏幕宽度的75％。

对于这个简化的示例，请忽略文本换行。

为什么聊天气泡会获得这个全屏宽度，以及在哪里？

超级简化的小部件布局示例：

@override
Widget build(BuildContext context) {
  return Container(
    height: safeHeight,
    child: Column(
      children: <Widget>[
        Expanded(
          child: ListView.builder(
            itemCount: messages.length,
            itemBuilder: (ctx, i) => chatBubble(messages[i]),
          )
        ),
        Container(
          height: 50,
          child: TextField(/* stuff */),
        )
      ]
    )
  );
}

chatBubble(Message msg) {
  return Padding(
    padding: EdgeInsets.all(8.0),
    child: Container(
      color: Colors.lightBlue,
      child: Text(msg.text),
      constraints: BoxConstraints(
        maxWidth: screenWidth * 0.75,
      ),
    )
  )
}

结果：

这是一个图片链接，无法提供更多信息。

- Maksym Moros

---

尝试使用 Column 小部件将 chatBubble() 的响应包装起来，同时设置 mainAxisSize: MainAxisSize.min。 - Sanjay Sharma

Answer 1

默认情况下，ListView 中的所有小部件都会被展开，但您可以使用其他小部件来包装内容。 如果您在 chatBubble 中有更多数据，则可以使用 Column 或 Wrap 小部件，如下所示:

  chatBubble(Message msg) {
    return Wrap(
      children: [
       Padding(
        ...
        ),
       ],
    );
  }

但如果您只想在该部分提供一个子项，可以使用Align Widget，它允许您使用alignment属性来决定如何对齐子项。在这种情况下，请尝试以下内容：

 chatBubble(Message msg) {
    return Align(
      alignment: Alignment.centerRight,
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: ...
      ),
    );
  }

- Luis Miguel Mantilla

---

你们是我的英雄！ - Maksym Moros