容器大小取决于其内容（文本）

Question

我希望我的容器根据其内容（在本例中为文本）具有不同的大小，如果一个用户写入较长的文本，则容器会更大，如果另一个用户写入较短的文本，则容器会较小。

是否可以？如果没有，还有其他方法吗？

谢谢

这就是我想要实现的（这是三星note应用程序的截图）

Answer 1

您不需要将width或height分配给 ，Container因此它将根据 调整大小child：

Container(
     color: Colors.red,
     child: const Text("Hi there111"),
)

如果你想控制最大宽度和最大高度，你将使用Container'sconstraints字段

Container(
      color: Colors.red,
      constraints: const BoxConstraints(
          maxWidth: 200,
      ),
      child: const Text("Hi there11122222222"),
)

当然，您也可以将其输入minWidth和minHeight中BoxConstraints。

当你处于以下状态时的结果maxWidth

当文本太长以至于超出 的边界时的结果maxWidth，在这种情况下高度会自动调整大小：

您还可以添加填充以获得更好的外观：

Container(
    padding: EdgeInsets.all(20),
    color: Colors.red,
    constraints: const BoxConstraints(
      maxWidth: 200,
    ),
    child: const Text("Hi there11122222222222222222"),
)

但对于其他类型的小部件，如果像这样 Text包装它们会更安全，请注意小部件：FittedBoxText

Container(
    padding: EdgeInsets.all(20),
    color: Colors.red,
    constraints: const BoxConstraints(
      maxWidth: 200,
    ),
    child: FittedBox(
       fit: BoxFit.fill,
       child: const Text("asfasfasfasfasf")
    ),

)