Flutter - 如何使 TextField 宽度适合其文本（“包装内容”）

Question

我正在尝试使用一些代表选定联系人的芯片来执行“搜索联系人列表”功能，并且用户可以在文本字段中输入以过滤和添加更多联系人：

这是一个做Wrap小部件，包装列表Chip窗口小部件，并结束与一个列表Container一个的TextField小部件。

我试过的：

如果我不设置 的宽度TextField，它默认占据一整行。为了清楚起见，让我们将其设为红色：

我不想要整行，所以我将它设置为一个小的值，50。但是如果文本很长，这不起作用：

题：

是否可以将TextField起点变小，并在需要时自动扩展到整条线？我试过“minWidth”，BoxConstraint但由于TextField默认为整行，所以不起作用。在这里使用 Wrap 和 TextField 是正确的方法吗？

Answer 1

使用IntrinsicWidth小部件将孩子的大小调整为孩子的最大固有宽度。在这种情况下，有效地收缩包装 TextField：

IntrinsicWidth(
  child: TextField(),
)

但是，这会使 TextField 在为空时变得太小。为了解决这个问题，我们可以使用ConstrainedBox强制最小宽度约束。例如：

ConstrainedBox(
  constraints: BoxConstraints(minWidth: 48),
  child: IntrinsicWidth(
    child: TextField(),
  ),
)

最终结果：