1

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

可能吗?如果没有,还有其他方法吗?

谢谢

这就是我想要实现的(这是三星笔记应用程序的截图)

4

1 回答 1

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"),
)

当然你可以给它minWidthminHeightin 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")
    ),

)

于 2021-05-30T13:30:06.830 回答