时间戳

首页 > 解决方案 > TextFormField：仅当文本字段足够宽时才显示 suffixIcon

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

问题描述

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

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

编辑：

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

所以，事实上，我需要知道灵活文本字段的宽度。

标签： flutter

解决方案

您可以使用 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,
    )
  );
});

我希望它有帮助！

推荐阅读