Flutter 文本输入

在移动应用开发中，文本输入是一个基本且常见的功能。Flutter 提供了多种控件来实现这一功能，其中最常用的是 TextField 和 TextFormField。这两个组件都用于收集用户输入的文本数据，但它们在一些特定场景下有着不同的用途和优势。

TextField 组件

基本使用

TextField 是一个简单的文本输入框，可以用来接收用户的文本输入。下面是一个简单的示例：

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("TextField 示例")),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              decoration: InputDecoration(
                labelText: '请输入文字',
                border: OutlineInputBorder(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

控制文本显示

通过 obscureText 属性，可以将输入的文本以点号或其他字符代替，常用于密码输入：

TextField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: '请输入密码',
    border: OutlineInputBorder(),
  ),
)

自定义输入提示

通过 hintText 可以为用户提供一些输入提示信息：

TextField(
  decoration: InputDecoration(
    labelText: '请输入文字',
    hintText: '请输入您的姓名',
    border: OutlineInputBorder(),
  ),
)

文本输入监听

可以通过设置 onChanged 回调函数来监听文本变化，并进行相应的处理：

// www.javascriptcn.com code example
TextField(
  onChanged: (value) {
    print('当前输入值为：$value');
  },
  decoration: InputDecoration(
    labelText: '请输入文字',
    border: OutlineInputBorder(),
  ),
)

TextFormField 组件

TextFormField 是 TextField 的封装，它增加了表单验证的功能，适合用于需要验证用户输入的场景。

基本使用

与 TextField 类似，TextFormField 也可以用来创建文本输入框：

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: '用户名'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请输入用户名';
              }
              return null;
            },
          ),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState.validate()) {
                // 表单验证通过
                print('表单提交成功');
              } else {
                // 验证失败
                print('请检查输入');
              }
            },
            child: Text('提交'),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyForm()));
}

验证规则

通过 validator 属性，可以对输入的数据进行验证，确保其符合预期格式：

// www.javascriptcn.com code example
TextFormField(
  decoration: InputDecoration(labelText: '邮箱'),
  validator: (value) {
    if (value == null || !RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
      return '请输入有效的邮箱地址';
    }
    return null;
  },
)

自动填充

TextFormField 支持自动填充功能，可以在用户输入时提供自动补全建议：

TextFormField(
  decoration: InputDecoration(labelText: '搜索'),
  textInputAction: TextInputAction.search,
  onFieldSubmitted: (value) {
    print('搜索关键词：$value');
  },
)

总结

TextField 和 TextFormField 是 Flutter 中用于文本输入的两个重要组件。前者简单易用，适用于大多数文本输入场景；后者则更适用于需要表单验证和自动填充功能的应用。了解这些组件的基本用法和高级特性，可以帮助开发者构建出更加丰富和灵活的用户界面。