Question

我有一个带有后缀Icon的TextFormField组件。但是我的一些输入字段相当多，因为它们仅接受2或3个字符。如果文本字段太小，我想自动隐藏suffixIcon。这可能吗？

TextFormField(
  decoration: InputDecoration(
    suffixIcon: IconButton(
      icon: Icon(
        Icons.clear,
        color: ThemeColors.iconColor,
      ),
      onPressed: () {
        _controller.clear();
      },
    )
  ),
  controller: _controller 
)

编辑：

文本字段的宽度不固定-我不知道它的宽度。通常，文本字段会集成到灵活的布局中，例如在行中。

因此，实际上，我需要知道一个灵活的文本字段的宽度。

Answer 1

您可以使用LayoutBuilder提供的约束并相应地更新UI。您可以使用constraints.maxWidth并将其与您的值进行比较

您的代码将更新如下

LayoutBuilder(builder: (context, constraints) {
  print(constraints.maxWidth);

  return TextFormField(
    decoration: InputDecoration(
      suffixIcon: constraints.maxWidth > YOUR_VALUE ? IconButton(
        icon: Icon(
          Icons.clear,
          color: ThemeColors.iconColor,
        ),
        onPressed: () {
          _controller.clear();
        },
      ) : null,
    )
  );
});

希望对您有帮助！

Answer 2

是的，只需将要隐藏的小部件包裹在Visibility中，然后添加条件以检查输入字段的长度是长还是短

TextFormField：仅当文本字段足够宽时才显示suffixIcon

2 个答案: