如何使ClipRRect中的Container调整为子文本大小

Question

所以，我有一个构建消息的Widget（想象一下典型的WhatsApp消息对话框，或者可以称之为消息泡泡的对话框）。

Widget _buildMessage(String text, String time) {
return Padding(
  padding: EdgeInsets.symmetric(vertical: 7.5),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: <Widget>[
          SizedBox(width: 10),
          ClipRRect(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20),
              topRight: Radius.circular(20),
              bottomRight: Radius.circular(20),
                bottomLeft: Radius.circular(20)
            ),
            child: Container(
              color: Colors.lightBlue,
              padding: EdgeInsets.all(17),
              width: MediaQuery.of(context).size.width * 0.3,
              child: Text(
                text,
                style: TextStyle(
                  color: Colors.white,
                  height: 1.2,
                ),
              ),
            ),
          ),
        ],
      ),
      Padding(
        padding: EdgeInsets.only(left: 20),
        child: Text(
          time,
          style: TextStyle(
            color: Colors.grey,
            height: 1.5,
            fontSize: 8,
          ),
        ),
      ),
    ],
  ),
);

}

为此，我使用一个简单的调用来提供文本：

_buildMessage("Yep, sure!","20 minutes ago",)

现在，这里的问题是我现在拥有的子容器的固定宽度由以下因素确定：

width: MediaQuery.of(context).size.width * 0.3,

这是有问题的，因为它基本上不包围文本。相反，对于像hi或hello这样的小文本，聊天泡泡过于宽泛。对于较长的文本位，它确实正常工作，但不能假设它总是如此。

因此，您能否告诉我如何最好地实现此媒体查询，以便宽度的最大值设置为qazxsw poi，但是当文本较小时，还会缩小以包装文本？

width: MediaQuery.of(context).size.width * 0.3,

Answer 1

所以，这是一个相当基本的问题，我很久没想到了。你看，实际需要的是最大和最小宽度。当我尝试做类似的事情的时候，我正在用和min-width这些词进行搜索，并且不知何故并没有把答案带到任何地方。实际上，容器也没有定义任何container。它必须写在minWidth内。

因此，对此的解决方案是在容器本身上简单地使用约束（其在constraint中就视觉绥靖而建议的灵活容器表现得更好）。

#53910087

所以容器会变成：

constraints: BoxConstraints(
                  maxWidth: 250.0,
                  minWidth: 30.0,
              ),

然后结果如下：

child: Container(
              color: Colors.lightBlue,
              padding: EdgeInsets.all(17),
              constraints: BoxConstraints(
                  maxWidth: 250.0,
                  minWidth: 30.0,
              ),
              child: Text(
                text,
                style: TextStyle(
                  color: Colors.white,
                  height: 1.2,
                ),
              ),
            ),