【自学Flutter】7.2 表单使用和数据校验(方法2)

最新推荐文章于 2025-05-10 10:28:21 发布

原创最新推荐文章于 2025-05-10 10:28:21 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #Android

自学Flutter 专栏收录该内容

64 篇文章

订阅专栏

本文介绍了一种在Flutter中实现表单验证的方法，通过使用GlobalKey和Form组件，结合TextFormField进行输入验证，确保用户名不为空且密码长度不少于7位。代码示例详细展示了如何在用户点击按钮时触发验证，并在验证通过时输出信息。

7.2 表单使用和数据校验(方法2)

1.源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  GlobalKey globalKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Form(
                  key: globalKey,
                  autovalidate: true,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      TextFormField(
                        autofocus: true,
                        decoration: InputDecoration(
                          prefixIcon:Icon(Icons.perm_identity),
                          labelText: "用户名",
                          hintText: "请输入用户名",
                        ),
                        validator: (value){
                          return value.trim().length > 0 ? null:"用户名不能为空";
                        },
                      ),
                      TextFormField(
                        obscureText: true,
                        decoration: InputDecoration(
                          prefixIcon:Icon(Icons.lock),
                          labelText: "密码",
                          hintText: "请输入密码",
                        ),
                        validator: (value){
                          return value.trim().length > 6 ? null:"密码长度至少7位";
                        },
                      ),
                      Builder(builder: (context){
                         return RaisedButton(
                             child: Text("点击验证"),
                             onPressed: (){
                               if(Form.of(context).validate()){
                                 print("验证通过！");
                               }
                             });
                      })
                    ],
                  ),
                )
            )
        )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  GlobalKey globalKey = new GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Form(
                  key: globalKey,
                  autovalidate: true,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      TextFormField(
                        autofocus: true,
                        decoration: InputDecoration(
                          prefixIcon:Icon(Icons.perm_identity),
                          labelText: "用户名",
                          hintText: "请输入用户名",
                        ),
                        validator: (value){
                          return value.trim().length > 0 ? null:"用户名不能为空";
                        },
                      ),
                      TextFormField(
                        obscureText: true,
                        decoration: InputDecoration(
                          prefixIcon:Icon(Icons.lock),
                          labelText: "密码",
                          hintText: "请输入密码",
                        ),
                        validator: (value){
                          return value.trim().length > 6 ? null:"密码长度至少7位";
                        },
                      ),
                      //这是第二种方法
                      Builder(builder: (context){
                         return RaisedButton(
                             child: Text("点击验证"),
                             onPressed: (){
                               //判断验证是否通过
                               if(Form.of(context).validate()){
                                 //验证通过
                                 print("验证通过！");
                               }
                             });
                      })
                    ],
                  ),
                )
            )
        )
    );
  }
}

3.效果图

效果图