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

【问题标题】：Flutter: ListView.builder ignores BoxContrainst of Container child. Always applies full parent widthFlutter：ListView.builder 忽略 Container child 的 BoxContrainst。始终应用完整的父宽度
【发布时间】：2020-05-30 22:00:47
【问题描述】：

在聊天应用中构建聊天气泡。我无法控制 ListView.builder 的 Container 子项的宽度。子容器总是占据 ListView.builders 父容器的全部宽度：
Expanded -> Container width.

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

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

chatBubble 在哪里以及为什么会得到这个全屏宽度？

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

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

结果：

【问题讨论】：

尝试将chatBubble()响应Column小部件与mainAxisSize: MainAxisSize.min放在一起

标签： flutter

【解决方案1】：

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

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

但是，如果您只想在该部分中提供一个孩子，您可以使用Align Widget，这样您就可以使用alignment property 来决定如何对齐孩子。在这种情况下，请尝试下一个：

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

【讨论】：

你们是我的英雄！