Flutter 表单属性用法详解

4.1 表单属性代码实现

在Flutter开发中，表单处理是非常常见的需求。下面是一个完整的表单实现示例，包含了用户名和密码的输入验证：

//变量定义
var userNameController = new TextEditingController();
var passWordController = new TextEditingController();
var _userNameFieldValue = '';
var _passWordFieldValue = '';
var _name = '';
var _pwd = '';
final _formKey = GlobalKey<FormState>();

//body部分
body: Form(
  key: _formKey,
  onWillPop: () async {
    return await showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('提示'),
          content: Text('确认退出吗？'),
          actions: [
            FlatButton(
              child: Text('取消'),
              onPressed: () {
                Navigator.of(context).pop(false);
              },
            ),
            FlatButton(
              child: Text('确认'),
              onPressed: () {
                Navigator.of(context).pop(true);
              },
            ),
          ],
        );
      });
  },
  child: Column(
    children: [
      Text(
        "用户名",
        style: TextStyle(
          color: Colors.black,
          fontSize: 16,
          fontWeight: FontWeight.bold),
      ),
      TextFormField(
        controller: userNameController,
        decoration: InputDecoration(
          icon: Icon(Icons.person),
          suffixIcon: Icon(Icons.delete),
          labelText: "请输入用户名",
          counterText: "${_userNameFieldValue.length}/32"),
        autovalidateMode: AutovalidateMode.disabled,
        validator: (userName) {
          if (userName.length < 3) {
            return "用户名过短";
          }
          return null;
        },
        onChanged: (value) {
          setState(() {
            _userNameFieldValue = value;
          });
        },
        onSaved: (value) {
          _name = value;
        },
        keyboardType: TextInputType.number,
        textCapitalization: TextCapitalization.words,
        textInputAction: TextInputAction.search,
      ),
      Text("密码",
        style: TextStyle(
          color: Colors.black,
          fontSize: 16,
          fontWeight: FontWeight.bold)),
      TextFormField(
        controller: passWordController,
        decoration: InputDecoration(
          icon: Icon(Icons.lock),
          suffixIcon: Icon(Icons.delete),
          labelText: "请输入密码",
          counterText: "${_passWordFieldValue.length}/32",
        ),
        autovalidateMode: AutovalidateMode.disabled,
        obscureText: true,
        validator: (passWord) {
          if (passWord.length < 3) {
            return "密码过短";
          }
          return null;
        },
        onChanged: (value) {
          setState(() {
            _passWordFieldValue = value;
          });
        },
        onSaved: (value) {
          _pwd = value;
        },
      ),
      RaisedButton(
        onPressed: () {
          var _state = _formKey.currentState;
          if (_state.validate()) {
            _state.save();
            login(_name, _pwd);
          }
        },
        child: Text("登录"),
      )
    ],
  ),
  onChanged: () {},
));

//login方法
void login(String name, String pwd) {
  print("用户名：$name,密码：$pwd");
  userNameController.clear();
  passWordController.clear();
}

4.2 表单属性详解

Form属性

TextFormField属性

keyboardType类型

textCapitalization类型

textInputAction类型

开发小贴士

在iOS应用开发过程中，使用AppUploader可以大大简化应用上传到App Store的流程。这个工具提供了直观的界面和自动化功能，帮助开发者快速完成应用打包、签名和上传等操作，特别适合需要频繁测试和发布的应用场景。

对于Flutter开发者来说，掌握表单处理技巧非常重要，因为它是用户交互的核心部分。合理使用表单验证和状态管理可以显著提升应用的用户体验。