当前位置： 首页 > article >正文

Flutter TextFormField 完全手册与设计最佳实践

article 2025/3/25 9:59:42

目录

1. 引言

2. TextFormField 的基本用法

3. 主要属性

4. 自定义 TextFormField 样式

4.1 设置边框样式

4.2 设置输入格式限制

4.3 多行输入

5. 结论

相关推荐

1. 引言

        在 Flutter 中，TextFormField 是 TextField 的扩展版本，专为表单输入设计。它除了继承 TextField 的所有功能外，还提供了输入验证、表单状态管理等功能，使其成为表单输入的最佳选择。本文将介绍 TextFormField 的基本用法、主要属性及自定义样式。

2. TextFormField 的基本用法

    TextFormField 需要与 Form 组件一起使用，并通过 GlobalKey<FormState> 进行表单状态管理。

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: '用户名'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return '请输入用户名';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print('表单验证通过');
          }
        },
        child: Text('提交'),
      ),
    ],
  ),
)

3. 主要属性

属性说明
controller获取和控制输入框的内容
decoration自定义输入框外观，如边框、标签等
keyboardType设置键盘类型（文本、数字、邮箱等）
obscureText是否隐藏输入内容（密码输入）
validator用于验证输入内容是否合法
onSaved表单提交时保存输入值

示例：

TextFormField(
  decoration: InputDecoration(hintText: '请输入密码'),
  obscureText: true,
  validator: (value) {
    if (value == null || value.length < 6) {
      return '密码长度至少为6位';
    }
    return null;
  },
)

4. 自定义 TextFormField 样式

4.1 设置边框样式

TextFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: '邮箱',
  ),
)

4.2 设置输入格式限制

TextFormField(
  keyboardType: TextInputType.number,
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
)

4.3 多行输入

TextFormField(
  maxLines: 5,
  decoration: InputDecoration(labelText: '留言'),
)

5. 结论

    TextFormField 是 Flutter 中用于表单输入的增强版 TextField，支持输入验证、状态管理等功能，适用于用户注册、登录等场景。结合 Form 组件，可实现完整的表单交互，提高应用的可用性。一个完整的注册页面代码如下：

import 'package:flutter/material.dart';

class ScRegisterPage extends StatefulWidget {
  @override
  _ScRegisterPageState createState() => _ScRegisterPageState();
}

class _ScRegisterPageState extends State<ScRegisterPage> {
  final _formKey = GlobalKey<FormState>();
  final _scaffoldKey = GlobalKey<ScaffoldState>();

  FocusNode _userNameNode = new FocusNode();
  FocusNode _pwdNode = new FocusNode();
  FocusNode _pwd2Node = new FocusNode();

  late String _username,_pwd,_pwd2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("注册"),
      ),
      //Form
      body: Form(
          key: _formKey,
          child: ListView(
            // 输入框会弹出软键盘，所以加个滑动的View
            padding: EdgeInsets.fromLTRB(22.0, 18.0, 22.0, 0.0),
            children: <Widget>[
              _buildUserName(),
              _buildPwd(),
              _buildPwd2(),
              _buildRegister(),
            ],
          )),
    );
  }

  Widget _buildUserName() {
    return TextFormField(
      focusNode: _userNameNode,
      //以用户名输入框 为默认焦点，则进入页面会自动弹出软键盘
      autofocus: true,
      decoration: InputDecoration(
        labelText: "用户名",
      ),
      //  如键盘动作类型
      textInputAction: TextInputAction.next,
      onEditingComplete: () {
        //按下action 的响应
        FocusScope.of(context).requestFocus(_pwdNode);
      },
      //校验
      validator: (value) {
        if (value!.trim().isEmpty) {
          //错误提示
          return "请输入用户名";
        }
        _username = value;
      },
    );
  }

  Widget _buildPwd() {
    return TextFormField(
      focusNode: _pwdNode,
      //以用户名输入框 为默认焦点，则进入页面会自动弹出软键盘
      autofocus: true,
      decoration: InputDecoration(
        labelText: "密码",
      ),
      //  如键盘动作类型
      textInputAction: TextInputAction.next,
      onEditingComplete: () {
        //按下action 的响应
        FocusScope.of(context).requestFocus(_pwd2Node);
      },
      //校验
      validator: (value) {
        if (value!.trim().isEmpty) {
          //错误提示
          return "请输入密码";
        }
        _pwd = value;
      },
    );
  }

  Widget _buildPwd2() {
    return TextFormField(
      focusNode: _pwd2Node,
      //以用户名输入框 为默认焦点，则进入页面会自动弹出软键盘
      autofocus: true,
      decoration: InputDecoration(
        labelText: "确认密码",
      ),
      //  如键盘动作类型
      textInputAction: TextInputAction.go,
      onEditingComplete: () {
        //按下action 的响应
        _click();
      },
      //校验
      validator: (value) {
        if (value!.trim().isEmpty) {
          //错误提示
          return "请确认密码";
        }

        if(_pwd != value){
          return "两次密码输入不一致";
        }
        _pwd2 = value;
      },
    );
  }

  Widget _buildRegister() {
    ///Container:装饰性容器
    return Container(
      height: 52.0,
      margin: EdgeInsets.only(top: 18.0),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          foregroundColor: Colors.white, // 文字颜色
          backgroundColor:Theme.of(context).primaryColor, // 背景色
        ),
        onPressed: _click,
        child: Text(
          "注册",
          style: TextStyle(color: Colors.white, fontSize: 18.0),
        ),
      ),
    );
  }

  _click() async{
    //点击注册按钮 让软键盘隐藏
    _userNameNode.unfocus();
    _pwdNode.unfocus();
    _pwd2Node.unfocus();

    //校验输入内容
    if (_formKey.currentState!.validate()) {
      //弹出一个加载框
      // barrierDismissible： 不允许按返回dismiss
      showDialog(context: context,barrierDismissible: false,builder: (_){
        return Center(child: CircularProgressIndicator(),);
      });

      //可以调用后端接口去注册了
      // var result =  await SccApi.register(_username,_pwd);
      // //对话框dismiss
      // Navigator.pop(context);
      // if(result['errorCode'] == -1){
      //   var error = result['errorMsg'];
      //   //弹出提示
      //   // Toast.show(error, context,gravity: Toast.CENTER);
      // }else{
      //   //Toast.show("注册成功!", context,gravity: Toast.CENTER);
      //   Navigator.pop(context);
      // }

    }
  }
}

相关推荐

Flutter 按钮组件 ElevatedButton 详解-CSDN博客文章浏览阅读1.1k次，点赞25次，收藏29次。本文详细描述 ElevatedButton 是 Flutter 中常见的按钮组件，适用于强调操作。通过 style 属性可以灵活地修改背景色、形状、大小等。掌握 ElevatedButton 的使用可以帮助开发者创建更美观的交互界面。_flutter button 组件 https://shuaici.blog.csdn.net/article/details/146067694

Flutter TextField 从入门到精通：掌握输入框的完整指南-CSDN博客文章浏览阅读652次，点赞35次，收藏25次。本文全面解析 Flutter TextField 控件的使用技巧，覆盖从基础到进阶的完整知识体系。入门部分讲解基础属性（controller、decoration）、键盘类型设置和文本监听；进阶部分深入探讨表单验证（Form+TextFormField）、自定义输入格式（正则表达式验证）、动态样式修改（圆角/图标/动画）以及高级功能（输入长度限制、防抖处理）。通过代码示例演示手机号输入验证、密码隐藏切换、输入掩码等实战场景，并提供多平台适配、性能优化和无障碍访问等最佳实践方案。 https://shuaici.blog.csdn.net/article/details/146068520 


http://www.kler.cn/a/597023.html

相关文章：

  • 【MySQL报错】：Column count doesn’t match value count at row 1
  • 只是“更轻更薄”？不！遨游三防平板还选择“更强更韧”
  • 为什么 Redis 选择单线程模型？
  • 基于区块链的 Web3 数据保护技术探索
  • 现代前端开发框架对比：React、Vue 和 Svelte 的选择指南
  • Linux进程信号（下：补充）
  • 数字证书 与 数字签名 介绍
  • Beyond Compare 4注册激活方法
  • 使用HTML5和CSS3实现3D旋转相册效果
  • IoTDB 常见问题 QA 第六期
  • 一条不太简单的TEX学习之路
  • tryhackme——The Lay of the Land
  • 从报错到成功：Mermaid 流程图语法避坑指南✨
  • 嵌入式基础知识学习：UART是什么？
  • kotlin 函数引用
  • SQL语言——MySQL
  • 解决 ECharts Map3D 在高分辨率大屏下鼠标与地图位置错位的问题
  • 如何理解java中Stream流？
  • Python Django入门(创建网页：学习笔记主页)
  • hive:处理JSON格式(get_json_object()函数),连续登录题型,快速生成表(explode,stack),迭代计算