TextField

带标签的 TextField

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

获取输入值

// 方式1：使用 TextEditingController
final TextEditingController _controller = TextEditingController();

TextField(
  controller: _controller,
)

// 获取值
print(_controller.text);

// 方式2：使用 onChanged 回调
TextField(
  onChanged: (value) {
    print('当前输入: $value');
  },
)

decoration - 装饰属性

TextField(
  decoration: InputDecoration(
    // 标签文本
    labelText: '邮箱',
    // 提示文本
    hintText: '请输入邮箱地址',
    // 前缀图标
    prefixIcon: Icon(Icons.email),
    // 后缀图标
    suffixIcon: IconButton(
      icon: Icon(Icons.clear),
      onPressed: () {
        _controller.clear();
      },
    ),
    // 边框样式
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
    ),
    // 填充颜色
    filled: true,
    fillColor: Colors.grey[100],
    // 错误文本
    errorText: _isEmailValid ? null : '邮箱格式不正确',
  ),
)

keyboardType - 键盘类型

TextField(
  keyboardType: TextInputType.emailAddress, // 邮箱键盘
  // 其他类型：
  // TextInputType.text - 普通文本
  // TextInputType.number - 数字
  // TextInputType.phone - 电话
  // TextInputType.multiline - 多行文本
)

输入控制

class TextFieldControllerExample extends StatefulWidget {
  @override
  _TextFieldControllerExampleState createState() => _TextFieldControllerExampleState();
}

class _TextFieldControllerExampleState extends State<TextFieldControllerExample> {
  final TextEditingController _controller = TextEditingController();
  String _inputText = '';

  @override
  void initState() {
    super.initState();
    // 监听文本变化
    _controller.addListener(() {
      setState(() {
        _inputText = _controller.text;
      });
    });
    
    // 设置初始值
    _controller.text = '初始文本';
  }

  @override
  void dispose() {
    _controller.dispose(); // 必须释放控制器
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller,
        ),
        Text('输入的内容: $_inputText'),
        ElevatedButton(
          onPressed: () {
            _controller.text = ''; // 清空文本
          },
          child: Text('清空'),
        ),
      ],
    );
  }
}

焦点控制

class FocusExample extends StatefulWidget {
  @override
  _FocusExampleState createState() => _FocusExampleState();
}

class _FocusExampleState extends State<FocusExample> {
  final FocusNode _focusNode1 = FocusNode();
  final FocusNode _focusNode2 = FocusNode();

  @override
  void initState() {
    super.initState();
    // 监听焦点变化
    _focusNode1.addListener(() {
      if (_focusNode1.hasFocus) {
        print('第一个输入框获得焦点');
      }
    });
  }

  @override
  void dispose() {
    _focusNode1.dispose();
    _focusNode2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          focusNode: _focusNode1,
          decoration: InputDecoration(labelText: '用户名'),
          textInputAction: TextInputAction.next,
          onSubmitted: (_) {
            // 按下回车后焦点移动到下一个输入框
            FocusScope.of(context).requestFocus(_focusNode2);
          },
        ),
        SizedBox(height: 16),
        TextField(
          focusNode: _focusNode2,
          decoration: InputDecoration(labelText: '密码'),
          textInputAction: TextInputAction.done,
          onSubmitted: (_) {
            // 完成输入，隐藏键盘
            _focusNode2.unfocus();
          },
        ),
      ],
    );
  }
}

样式定制

class CustomTextField extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextField(
      style: TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.w500,
        color: Colors.blue[800],
      ),
      decoration: InputDecoration(
        labelText: '自定义样式输入框',
        labelStyle: TextStyle(
          color: Colors.blue,
          fontSize: 16,
        ),
        hintText: '请输入内容',
        hintStyle: TextStyle(
          color: Colors.grey[400],
          fontSize: 14,
        ),
        enabledBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.blue, width: 1.0),
          borderRadius: BorderRadius.circular(8.0),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.blueAccent, width: 2.0),
          borderRadius: BorderRadius.circular(8.0),
        ),
        errorBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.red, width: 1.0),
          borderRadius: BorderRadius.circular(8.0),
        ),
        focusedErrorBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.red, width: 2.0),
          borderRadius: BorderRadius.circular(8.0),
        ),
        contentPadding: EdgeInsets.symmetric(
          horizontal: 16,
          vertical: 12,
        ),
        prefixIcon: Icon(Icons.person, color: Colors.blue),
        suffixIcon: Icon(Icons.check_circle, color: Colors.green),
        filled: true,
        fillColor: Colors.blue[50],
      ),
    );
  }
}

表单验证

class SingleFieldValidation extends StatefulWidget {
  @override
  _SingleFieldValidationState createState() => _SingleFieldValidationState();
}

class _SingleFieldValidationState extends State<SingleFieldValidation> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _emailController = TextEditingController();
  bool _isEmailValid = true;

  String? _validateEmail(String? value) {
    if (value == null || value.isEmpty) {
      return '邮箱不能为空';
    }
    final emailRegex = RegExp(r'^[\w-.]+@([\w-]+.)+[\w-]{2,4}$');
    if (!emailRegex.hasMatch(value)) {
      return '请输入有效的邮箱地址';
    }
    return null;
  }

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      // 表单验证通过
      print('邮箱: ${_emailController.text}');
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('表单提交成功')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            controller: _emailController,
            decoration: InputDecoration(
              labelText: '邮箱',
              hintText: 'example@domain.com',
              errorText: _isEmailValid ? null : '邮箱格式不正确',
            ),
            keyboardType: TextInputType.emailAddress,
            validator: _validateEmail,
            onChanged: (value) {
              setState(() {
                _isEmailValid = _validateEmail(value) == null;
              });
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _submitForm,
            child: Text('提交'),
          ),
        ],
      ),
    );
  }
}
### 多字段表单验证

class MultiFieldForm extends StatefulWidget { @override _MultiFieldFormState createState() => _MultiFieldFormState(); }

class _MultiFieldFormState extends State { final _formKey = GlobalKey(); final TextEditingController _nameController = TextEditingController(); final TextEditingController _emailController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); bool _obscurePassword = true;

@override Widget build(BuildContext context) { return Form( key: _formKey, child: Column( children: [ TextFormField( controller: _nameController, decoration: InputDecoration( labelText: '姓名', hintText: '请输入您的姓名', prefixIcon: Icon(Icons.person), ), validator: (value) { if (value == null || value.isEmpty) { return '姓名不能为空'; } if (value.length < 2) { return '姓名至少2个字符'; } return null; }, ), SizedBox(height: 16), TextFormField( controller: _emailController, decoration: InputDecoration( labelText: '邮箱', hintText: 'example@domain.com', prefixIcon: Icon(Icons.email), ), keyboardType: TextInputType.emailAddress, validator: (value) { if (value == null || value.isEmpty) { return '邮箱不能为空'; } final emailRegex = RegExp(r'^[\w-.]+@([\w-]+.)+[\w-]{2,4}'); if (!emailRegex.hasMatch(value)) { return '请输入有效的邮箱地址'; } return null; }, ), SizedBox(height: 16), TextFormField( controller: _passwordController, decoration: InputDecoration( labelText: '密码', hintText: '至少6个字符', prefixIcon: Icon(Icons.lock), suffixIcon: IconButton( icon: Icon( _obscurePassword ? Icons.visibility : Icons.visibility_off, ), onPressed: () { setState(() { _obscurePassword = !_obscurePassword; }); }, ), ), obscureText: _obscurePassword, validator: (value) { if (value == null || value.isEmpty) { return '密码不能为空'; } if (value.length < 6) { return '密码至少6个字符'; } return null; }, ), SizedBox(height: 24), ElevatedButton( onPressed: () { if (_formKey.currentState!.validate()) { // 表单验证通过 print('姓名: {_nameController.text}'); print('邮箱: ${_emailController.text}'); print('密码:${_passwordController.text}');

            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('注册成功'),
                backgroundColor: Colors.green,
              ),
            );
          }
        },
        child: Text('注册'),
        style: ElevatedButton.styleFrom(
          minimumSize: Size(double.infinity, 50),
        ),
      ),
    ],
  ),
);

} }

### 如何隐藏键盘？
    ```
FocusScope.of(context).unfocus();

// 方法2：使用 FocusNode
_focusNode.unfocus();

###  如何设置默认值？
```

// 在初始化时设置 final TextEditingController _controller = TextEditingController();

@override void initState() { super.initState(); _controller.text = '默认值'; }

// 或者直接设置 _controller.text = '新值';

    ### 如何监听文本变化

// 方法1：使用 addListener _controller.addListener(() { print('文本变化: ${_controller.text}'); });

// 方法2：使用 onChanged TextField( onChanged: (value) { print('文本变化: $value'); }, )