Flutter:ListView.builder 忽略 Container child 的 BoxContrainst。始终应用完整的父级宽度

Question

在聊天应用中构建聊天气泡。我无法控制 ListView.builder 的 Container 子项的宽度。子容器始终占用 ListView.builders 父容器的完整宽度:
Expanded -> Container width.

我想要实现的目标是:消息气泡宽度尽可能小，同时仍包含消息文本，但不超过屏幕宽度的 75%。

忽略这个简化示例的文本换行。

chatBubble 在何处以及为何获得此全屏宽度？

super 简化的小部件布局示例:

@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,
      ),
    )
  )
}

结果:

Answer 1

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

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

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

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