限制Flutter中Container的最大宽度

Question

  Widget build(context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 300,
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: color ?? Colors.blue,
            borderRadius: BorderRadius.circular(10)
          ),
          child: msg
        )
      ],  
    );
  }

这是我的小部件的构建方法，它根据我传递的msg参数呈现此UI

1. 正在加载文本
2. 一些非常长的文本

现在我面临的问题是，我无法在不设置宽度的情况下将文本包装在此容器/蓝色框内但是如果我设置容器/蓝色框的宽度，那么无论文本有多短，它都将保持宽度。

现在有没有办法设置容器/蓝盒子的maxWidth（比如让我们说500）？因此，蓝色框将变得像“加载”这样的小文本所需的宽度，对于长文本，它将扩展到达到500个单位的宽度然后将文本换行？

长文本所需的输出：

对于像加载这样的小文本，我不希望在UI中进行任何更改，但对于长文本，我希望它看起来像这样。

Answer 1

您可以使用首选的maxWidth向Container Widget添加约束，如下所示：

Widget build(context) {
return Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    Container(
      constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: color ?? Colors.blue,
        borderRadius: BorderRadius.circular(10)
      ),
      child: msg
    )
  ],  
);
}

我希望这有帮助！

Answer 2

也许在文本周围使用Flexible，然后将Flexible包装在固定大小的容器中？只是一个想法。