Flutter 如何创建边框中部带标签与图标的自定义Outlined TextField

你要的Outlined描边样式、标签与图标落在边框水平中线的效果，完全可以通过Flutter原生能力落地，不需要自定义RenderObject做绘制，两种可复用的实现路径适配不同灵活度需求：

方案选型 #

• 轻量调整方案：适合尽量复用TextField原生能力、位置精度要求不高的场景
• 叠层定制方案：适合需要完全控制标签/图标位置、脱离TextField默认布局逻辑的场景

轻量调整方案实现 #

核心是复用TextField自带的浮动标签、描边边框能力，仅通过属性配置实现效果：

1. 基础描边配置
   给decoration的enabledBorder、focusedBorder分别赋值OutlineInputBorder，实现无填充的Outlined风格描边边框。
2. 标签与图标对齐调整
   关键配置项：
   • 设置floatingLabelBehavior: FloatingLabelBehavior.always，让标签始终保持悬浮状态，不会随输入操作收起
   • 给floatingLabelStyle设置和页面背景/输入框填充色完全一致的backgroundColor，盖住穿过标签区域的边框线
   • 调整floatingLabelAlignment为居中对齐，配合alignLabelWithHint微调标签垂直偏移，让标签刚好落在边框的水平中线上
   • 直接通过prefixIcon配置前置图标，系统会自动让图标和标签保持垂直对齐，一同落在边框中线位置。

参考实现代码：

TextField(
  decoration: InputDecoration(
    labelText: "用户名",
    prefixIcon: const Icon(Icons.person),
    floatingLabelBehavior: FloatingLabelBehavior.always,
    floatingLabelAlignment: FloatingLabelAlignment.center,
    floatingLabelStyle: TextStyle(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: const BorderSide(color: Colors.grey),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: const BorderSide(color: Colors.blue),
    ),
    contentPadding: const EdgeInsets.symmetric(vertical: 16, horizontal: 12),
  ),
)

叠层定制方案实现 #

如果轻量调整的标签位置达不到精确的视觉要求，直接用Stack叠层的方式完全自定义位置，灵活度最高：

1. 先搭建底层纯输入框：把所有系统自带的标签、前缀、后缀全部置空，只保留描边边框和输入文本区域，给输入内容区留够左右边距，避免和中线位置的图标/标签重叠。
2. 用Stack把自定义的标签、图标块叠在输入框的边框中线位置，给每个叠层块设置和输入框背景完全一致的填充色，盖住穿过该区域的边框线，模拟出“标签嵌在边框中间”的视觉效果。

参考实现代码：

Stack(
  alignment: Alignment.center,
  children: [
    // 底层纯描边输入框
    TextField(
      decoration: InputDecoration(
        labelText: null,
        prefixIcon: null,
        suffixIcon: null,
        contentPadding: const EdgeInsets.symmetric(
          vertical: 16,
          horizontal: 64, // 左右预留空间放置中线位置的图标/标签
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Colors.grey),
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Colors.blue),
        ),
      ),
    ),
    // 左侧中线位置的图标+标签块
    Positioned(
      left: 16,
      child: Container(
        color: Theme.of(context).scaffoldBackgroundColor,
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Icon(Icons.person, size: 20, color: Colors.grey),
            const SizedBox(width: 8),
            const Text("用户名", style: TextStyle(color: Colors.grey)),
          ],
        ),
      ),
    ),
    // 右侧中线位置的功能图标块
    const Positioned(
      right: 16,
      child: Icon(Icons.visibility, color: Colors.grey),
    )
  ],
)

细节校准注意点 #

• 叠在边框上的元素背景色必须和输入框的实际填充色/页面背景色完全一致，否则会透出底下的边框，破坏“嵌在边框中”的视觉效果
• 调整contentPadding的左右值时，要预留足够空间，避免用户输入的文本和固定在中线位置的图标、标签发生重叠
• 如果输入框存在禁用、错误等多状态边框，要同步给叠层元素的背景色匹配对应状态下的输入框填充色，保证全状态下的视觉统一

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