Flutter中如何使用TextField组件

在Flutter中使用TextField组件时，如何设置默认提示文本（hintText）？
我想自定义输入框的样式，比如修改边框颜色、圆角或背景色，该如何实现？
当用户输入内容时，怎样实时获取并处理输入的值？
如何限制输入字符的类型，比如只允许数字或特定格式的文本？
另外，如何在点击TextField时自动弹出键盘，并在失去焦点时隐藏？
如果需要在输入框旁添加图标或按钮，应该怎么布局？

2 回复

在Flutter中使用TextField组件，首先导入material.dart包，然后在Widget中调用TextField()构造函数。可通过decoration属性设置提示文本、边框等样式，使用controller管理输入内容，监听onChanged事件处理输入变化。

更多关于Flutter中如何使用TextField组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用TextField组件非常简单，它是用于接收用户文本输入的核心组件。以下是基本用法和关键属性说明：

1. 基本使用

TextField(
  decoration: InputDecoration(
    labelText: '用户名',
    hintText: '请输入用户名',
    border: OutlineInputBorder(),
  ),
)

2. 常用属性

  • controller：文本控制器，用于获取或设置文本
final TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller,
  onChanged: (value) {
    print("当前输入: $value");
  },
)
  • keyboardType：键盘类型
TextField(
  keyboardType: TextInputType.emailAddress, // 邮箱键盘
  // TextInputType.number 数字键盘
  // TextInputType.phone 电话键盘
)
  • obscureText：密码输入
TextField(
  obscureText: true, // 隐藏文本
)
  • maxLines：多行文本
TextField(
  maxLines: 3, // 最多3行
)

3. 完整示例

class MyTextField extends StatefulWidget {
  @override
  _MyTextFieldState createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16),
        child: TextField(
          controller: _controller,
          decoration: InputDecoration(
            labelText: '用户名',
            hintText: '请输入用户名',
            prefixIcon: Icon(Icons.person),
            border: OutlineInputBorder(),
          ),
          onChanged: (value) {
            print('输入内容: $value');
          },
          onSubmitted: (value) {
            print('提交内容: $value');
          },
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose(); // 记得销毁controller
    super.dispose();
  }
}

4. 注意事项

  • 使用TextEditingController管理文本时，需要在dispose中释放资源
  • 通过InputDecoration可以自定义外观（图标、标签、边框等）
  • 使用FocusNode可以管理输入框的焦点

这是TextField的基本用法，实际使用时可以根据需求组合不同的属性。

回到顶部