Flutter中如何为TextField添加搜索图标并实现对应提示效果？

完全可以实现你所需的效果，Flutter 原生 TextField 组件已提供对应配置能力，具体实现方案如下：

你提到的预期效果参考图：

关键属性说明 #

• 提示文本通过 InputDecoration 下的 hintText 参数配置，还可搭配 hintStyle 自定义提示文本的颜色、字号、字体等样式
• 前置搜索图标直接通过 InputDecoration 下的 prefixIcon 参数配置即可
• 可搭配填充色、圆角属性实现和参考图完全一致的样式效果

完整可运行示例代码 #

import 'package:flutter/material.dart';

class SearchTextFieldPage extends StatelessWidget {
  const SearchTextFieldPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 60),
        child: TextField(
          // 配置键盘动作为搜索类型
          textInputAction: TextInputAction.search,
          decoration: InputDecoration(
            // 前置搜索图标
            prefixIcon: const Icon(Icons.search, color: Colors.grey, size: 20),
            // 提示文本
            hintText: "Search",
            // 提示文本样式
            hintStyle: const TextStyle(color: Colors.grey, fontSize: 16),
            // 背景填充和圆角配置
            filled: true,
            fillColor: Colors.grey.shade200,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide.none,
            ),
            contentPadding: const EdgeInsets.symmetric(vertical: 12),
          ),
          // 搜索触发回调
          onSubmitted: (value) {
            // 此处处理搜索逻辑
            debugPrint("搜索内容：$value");
          },
        ),
      ),
    );
  }
}

可选扩展配置 #

• 如果需要调整图标和输入内容的间距，可给 prefixIcon 外层包裹 Padding 组件自定义边距
• 如果需要点击搜索图标触发搜索，可将 prefixIcon 替换为 IconButton 组件绑定 onPressed 回调即可
• 如果需要实现输入内容后右侧显示清除按钮，可额外配置 suffixIcon 属性添加清除图标

内容的提问来源于stack exchange，提问作者Bat-Erdene Amarsaikhan