Flutter：如何在TextField输入内容旁显示自动补全提示文本？

可以通过Row结合Expanded组件实现需求，既保证提示文本紧跟输入内容右侧，又不影响label的正常展示，核心代码如下：

class EmailTextField extends StatefulWidget {
  const EmailTextField({super.key});

  @override
  State<EmailTextField> createState() => _EmailTextFieldState();
}

class _EmailTextFieldState extends State<EmailTextField> {
  final TextEditingController _controller = TextEditingController();
  // 定义自动补全的提示文本
  final String _completionHint = '@gmail.com';

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // 用Expanded让TextField占据剩余空间，避免被压缩
        Expanded(
          child: TextField(
            controller: _controller,
            decoration: const InputDecoration(
              labelText: '邮箱地址',
              border: OutlineInputBorder(),
              contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 16),
            ),
            // 输入变化时更新状态，控制提示文本的显示/隐藏
            onChanged: (value) => setState(() {}),
          ),
        ),
        // 仅当输入内容未包含@时显示补全提示
        if (!_controller.text.contains('@'))
          Padding(
            padding: const EdgeInsets.only(right: 14),
            child: Text(
              _completionHint,
              // 用灰色弱化提示，和输入文本区分开
              style: TextStyle(
                color: Colors.grey[400],
                fontSize: 16,
              ),
            ),
          ),
      ],
    );
  }
}

关键说明 #

• Expanded组件确保TextField能自适应父容器宽度，避免出现宽度压缩为0的问题
• 提示文本通过条件渲染控制显示：当用户输入内容包含@时自动隐藏，符合自动补全的逻辑
• InputDecoration的labelText可以正常展示，不受布局影响
• 提示文本的样式可根据需求调整，保持和输入框内文本的视觉一致性

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