如何在Flutter的TextField边框上实现hint(placeholder)浮动效果

你需要的是Material Design规范里的浮动标签输入框效果，不同技术栈的实现方案如下：

1. Web前端场景 #

原生实现（CSS+JS） #

核心逻辑是监听输入框的聚焦、失焦和内容变化事件，控制标签的位移样式，核心代码如下：

/* 父容器 */
.input-box {
  position: relative;
  margin-top: 20px;
}
/* 输入框样式 */
.input-box input {
  width: 300px;
  padding: 12px 15px;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}
/* 默认标签样式 */
.input-box .label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  padding: 0 3px;
  color: #999;
  transition: all 0.2s ease;
  pointer-events: none;
}
/* 激活状态（聚焦/有输入内容）标签样式 */
.input-box input:focus + .label,
.input-box input:not(:placeholder-shown) + .label {
  top: 0;
  transform: translateY(-50%) scale(0.85);
  color: #2563eb;
}

如果使用主流UI框架，Element Plus的el-input、Ant Design的a-input都内置了该效果，直接开启对应配置项即可。

2. Flutter场景 #

Flutter官方的TextField组件自带该效果，只需要配置decoration的label相关属性即可：

TextField(
  decoration: InputDecoration(
    labelText: "用户名",
    border: OutlineInputBorder(),
    // 可自定义标签不同状态的样式
    labelStyle: TextStyle(color: Colors.grey),
    floatingLabelStyle: TextStyle(color: Colors.blue),
  ),
)

3. Android原生场景 #

使用Material组件库的TextInputLayout包裹输入框即可直接实现：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="请输入手机号">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

4. iOS原生场景 #

可以自定义UITextField实现该效果，也可以直接使用MaterialComponents库的MDCOutlinedTextField组件，配置label.text属性即可自动开启浮动标签效果。

内容的提问来源于stack exchange，提问作者Nikola G.