Flutter中如何为Pinput设置提示文本？

因为Pinput本身没有内置提示文本相关参数，你可以通过组件组合的方式实现自定义提示效果，同时保留Pinput支持自定义宽高的优势，以下是两种可行方案：

方案1：用Column分离提示文本与输入框 #

适合提示文本在输入框上方的场景，完全自定义样式：

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    // 自定义提示文本
    Text(
      '请输入6位验证码',
      style: TextStyle(
        color: Colors.grey[600],
        fontSize: 14,
        height: 1.2,
      ),
    ),
    SizedBox(height: 8), // 控制提示文本与输入框的间距
    Pinput(
      length: 6,
      defaultPinTheme: PinTheme(
        width: 50, // 自定义宽度
        height: 50, // 自定义高度
        textStyle: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey.shade300),
          borderRadius: BorderRadius.circular(8),
        ),
      ),
      // 其他业务相关配置
    ),
  ],
)

方案2：用Stack实现输入框内的提示文本 #

模拟原生输入框的hint效果，仅当输入为空时显示：

// 先定义一个控制器监听输入内容
final pinController = TextEditingController();

// 布局部分
Stack(
  alignment: Alignment.centerLeft,
  padding: EdgeInsets.symmetric(horizontal: 16), // 匹配输入框内边距
  children: [
    if (pinController.text.isEmpty)
      Text(
        '请输入验证码',
        style: TextStyle(
          color: Colors.grey[400],
          fontSize: 16,
        ),
      ),
    Pinput(
      controller: pinController,
      length: 6,
      defaultPinTheme: PinTheme(
        width: 45,
        height: 45,
        textStyle: TextStyle(fontSize: 18),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey.shade300),
          borderRadius: BorderRadius.circular(6),
        ),
      ),
    ),
  ],
)

这两种方案都能完全自定义提示文本的样式（颜色、字号、位置等），完美适配你的需求——既保留Pinput的宽高自定义能力，又实现了提示文本功能。

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