【Flutter -- 基础组件】输入框（TextField）& 表单（Form）

Flutter 输入框(TextField)与表单(Form)使用指南

文章目录

• 一、输入框(TextField)
  • 1. 属性
• 二、表单(Form)
  • 1. Form
  • 2. FormField
  • 3. TextFormField
  • 4. FormState
• 三、实例
  • 1. 效果图
  • 2. 圆角图片
  • 3. 登录按钮
  • 4. 完整代码

一、输入框(TextField)

TextField是Flutter中用于用户输入的核心组件，在iOS开发中，如果你使用appuploader这样的工具来管理应用上架流程，会发现良好的表单设计能极大提升用户体验和审核通过率。

1. 属性

• controller：编辑框的控制器，用于设置/获取内容、监听文本变化
• focusNode：控制输入框是否获得键盘焦点
• InputDecoration：控制输入框外观，如提示文本、背景等
• keyboardType：设置键盘输入类型(数字、文本等)

• textInputAction：键盘动作按钮图标(回车键样式)
• style：编辑文本样式
• autofocus：是否自动获取焦点
• obscureText：是否隐藏文本(用于密码输入)
• maxLines：最大行数限制
• onChanged：内容变化回调函数

二、表单(Form)

在开发需要提交数据的应用时，比如使用appuploader上传应用到App Store时，良好的表单验证机制可以避免很多问题。

1. Form

Form组件可以对输入框分组，进行统一操作如校验、重置等：

Form(
  autovalidate: true, // 自动校验
  child: Column(
    children: <Widget>[
      // FormField列表
    ],
  ),
)

2. FormField

FormField是Form的子元素抽象类，定义了表单字段的基本行为：

FormField(
  builder: (FormFieldState state) {
    return TextField(...);
  },
  validator: (value) {
    if (value.isEmpty) return '请输入内容';
    return null;
  },
)

3. TextFormField

TextFormField是FormField的TextField实现，结合了两者的功能：

TextFormField(
  decoration: InputDecoration(labelText: '用户名'),
  validator: (value) {
    if (value.isEmpty) return '用户名不能为空';
    return null;
  },
)

4. FormState

FormState提供了对表单的统一操作方法：

final _formKey = GlobalKey<FormState>();

// 校验表单
if (_formKey.currentState.validate()) {
  // 校验通过
}

// 保存表单
_formKey.currentState.save();

// 重置表单
_formKey.currentState.reset();

三、实例：登录页面

1. 效果图

2. 圆角图片组件

Widget _getRoundImage(String imageName, double size) {
  return Container(
    width: size,
    height: size,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(size / 2),
    ),
    child: Image.asset(imageName),
  );
}

3. 登录按钮

Widget _getLoginButton() {
  return ElevatedButton(
    child: Text('登录'),
    onPressed: () {
      if (_formKey.currentState.validate()) {
        // 处理登录逻辑
        // 如果开发iOS应用，此时可以调用appuploader相关API
      }
    },
  );
}

4. 完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '登录示例',
      home: Scaffold(
        appBar: AppBar(title: Text('登录')),
        body: LoginPage(),
      ),
    );
  }
}

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  String _username = '';
  String _password = '';

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          _getRoundImage('assets/avatar.png', 100),
          TextFormField(
            decoration: InputDecoration(labelText: '用户名'),
            validator: (value) {
              if (value.isEmpty) return '请输入用户名';
              return null;
            },
            onSaved: (value) => _username = value,
          ),
          TextFormField(
            obscureText: true,
            decoration: InputDecoration(labelText: '密码'),
            validator: (value) {
              if (value.isEmpty) return '请输入密码';
              return null;
            },
            onSaved: (value) => _password = value,
          ),
          _getLoginButton(),
        ],
      ),
    );
  }
}

通过合理使用TextField和Form组件，可以构建出用户体验良好的表单界面。对于iOS开发者来说，结合appuploader等工具，可以更高效地完成应用开发和上架流程。