如何对齐TextFormField内的前缀图标、提示文本与后缀图标？

问题出在你使用了suffix属性放置清除图标，而非suffixIcon。suffix用于自定义位置的任意组件，不会自动对齐输入框内的前缀图标与文本；而suffixIcon是Flutter专为输入框后缀图标设计的属性，会自动继承输入框的对齐规则，与前缀图标、提示文本保持一致。

修改后的代码如下：

Widget yourNameWidget(yourNameCtrlr) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 0.0),
    child: TextFormField(
      style: const TextStyle(fontFamily: 'Poppins', fontSize: 12),
      controller: yourNameCtrlr,
      keyboardType: TextInputType.text,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(18),
        isDense: true,
        prefixIcon: const Icon(Icons.person),
        enabledBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Color(0xFFCECECE)),
          borderRadius: BorderRadius.circular(12),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Color(0xFFCECECE)),
        ),
        // 替换suffix为suffixIcon实现对齐
        suffixIcon: GestureDetector(
          onTap: () {
            yourNameCtrlr.clear();
          },
          child: const Icon(
            Icons.clear,
            size: 16,
          ),
        ),
        hintText: 'Your Name',
        fillColor: const Color(0xFFFEFEFE),
        filled: true,
      ),
      validator: (value) {
        if (value!.isEmpty || !RegExp(r'^[a-z A-Z]+$').hasMatch(value)) {
          return "Please enter a valid name.";
        } else {
          return null;
        }
      },
      onChanged: (value) {},
    ),
  );
}

关键改动说明：

• 将suffix替换为suffixIcon，让清除图标自动与前缀图标、提示文本垂直居中对齐
• 保留GestureDetector的点击逻辑，不影响清除输入内容的功能

内容的提问来源于stack exchange，提问作者flutternewbiee