如何将图标添加到 TextFormField 中的提示文本答案

【问题标题】：How to add Icon to the hintText in TextFormField如何将图标添加到 TextFormField 中的提示文本
【发布时间】：2020-08-21 11:47:21
【问题描述】：

我想将 Icon 添加到 TextFormField 的 hintText 字段。我已经阅读了有关 prefixIcons 和 SuffixIcons 的信息，但它们会永久添加图标。我希望图标作为提示文本，以便当用户单击它时它会像提示文本一样消失。我如何在颤振中实现这一目标

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您无法使用 TextFormField 的属性来实现这一点，但您可以根据 Field 的控制器更改 Icon 的可见性：

bool isVisible = true;
TextEditingController controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: TextFormField(
        controller: controller,
        onChanged: (text){
          setState(() {
            controller.text.isEmpty ? isVisible = true : isVisible = false;
          });
        },
        decoration: InputDecoration(
          hintText: 'hintText',
          prefixIcon: Visibility(
            visible: isVisible,
            child: Icon(Icons.person, color: Colors.grey,),
          ),
        ),
      ),
    ),
  );
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

【讨论】：

感谢@LOfG 的回答
前缀图标不要在提示文本的开头添加图标? hello world can't do that with prefixicon

【解决方案2】：

如果您愿意，可以在“hintText”字符串中添加表情符号。由于表情符号被视为字符串，例如在颤振中，如果您想使用“关闭”图标，您可以使用“十字标记”表情符号来代替

搜索表情符号?的结果如下所示 https://i.stack.imgur.com/9Yykb.jpg

class ResultPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: TextField(
        decoration:
            InputDecoration(hintText: " ❌   hello this is a hint text"),
      ),
    )));
  }
}

【讨论】：

我也想过这个，但是windows中不存在搜索表情符号
你好，我已经用“搜索”表情符号的图像更新了答案，看看它是否适合你的需要
很抱歉，这个搜索表情符号看起来不太好。如果可能，搜索默认材料搜索图标...