Question

因此，我有一个构建消息的小部件（想象一个典型的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之类的小文本，聊天气泡太大。对于更长的文本，它确实可以正常工作，但是不能假设总是如此。

因此，您能否建议我如何最好地实现此媒体查询，以使宽度的最大值设置为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,
                ),
              ),
            ),

然后结果如下：

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

1 个答案: