flutter 表单示例

这段程序创建一个简单的表单，用户可以在其中输入用户名。当用户点击提交按钮时，会进行验证并显示一个包含用户名的提示。

import 'package:flutter/material.dart';

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(
              labelText: '用户名',
              hintText: '请输入用户名',
              border: OutlineInputBorder(),
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '用户名不能为空';
              }
              return null;
            },
            onSaved: (value) {
              _username = value!;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  _formKey.currentState!.save();
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('用户名：$_username')),
                  );
                }
              },
              child: Text('提交'),
            ),
          ),
        ],
      ),
    );
  }
}

以下是对提供的Flutter应用程序代码的分析：

1. 导入Flutter库： import ‘package:flutter/material.dart’;
   这行代码导入了Flutter的material库，它提供了实现Material Design风格应用所需的各种Widget。

2. 主函数： void main() {
   runApp(MyApp());
   }
   main函数是程序的入口点，它调用runApp函数并传入MyApp实例作为参数，从而启动Flutter应用程序。

3. MyApp类： class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return MaterialApp(
   title: ‘TextFormField 示例’,
   home: Scaffold(
   appBar: AppBar(
   title: Text(‘TextFormField 示例’),
   ),
   body: MyForm(),
   ),
   );
   }
   }
   MyApp是一个无状态Widget，它定义了应用的基本配置。build方法返回一个MaterialApp Widget，指定了应用的标题和主页。主页是由Scaffold Widget构成，包含一个AppBar和一个MyForm Widget。

4. MyForm类： class MyForm extends StatefulWidget {
   @override
   _MyFormState createState() => _MyFormState();
   }
   MyForm是一个有状态Widget，它有一个与之关联的状态类_MyFormState。状态类负责管理Widget的状态。

5. _MyFormState类： class _MyFormState extends State {
   final _formKey = GlobalKey();
   String _username = ‘’;
   _MyFormState是MyForm的状态类，它包含一个GlobalKey实例_formKey，用于在表单验证和保存时引用表单状态。还有一个_username字符串变量，用于存储用户输入的用户名。

6. 构建方法： @override
   Widget build(BuildContext context) {
   return Form(
   key: _formKey,
   child: Column(
   crossAxisAlignment: CrossAxisAlignment.start,
   children: [
   // …
   ],
   ),
   );
   }
   build方法返回了一个Form Widget，它包含了表单验证和保存的逻辑。Form Widget的key属性设置为_formKey，允许我们访问表单的状态。

7. TextFormField： TextFormField(
   decoration: InputDecoration(
   labelText: ‘用户名’,
   hintText: ‘请输入用户名’,
   border: OutlineInputBorder(),
   ),
   validator: (value) {
   if (value == null || value.isEmpty) {
   return ‘用户名不能为空’;
   }
   return null;
   },
   onSaved: (value) {
   _username = value!;
   },
   ),
   TextFormField是一个用于输入文本的Widget，它具有以下属性： • decoration：定义了输入框的装饰，包括标签文本、提示文本和边框样式。 • validator：一个回调函数，用于验证输入值。如果返回非空字符串，则表示验证失败。 • onSaved：一个回调函数，当表单保存时调用，用于保存输入的值。

8. 提交按钮： Padding(
   padding: const EdgeInsets.symmetric(vertical: 16.0),
   child: ElevatedButton(
   onPressed: () {
   if (_formKey.currentState!.validate()) {
   _formKey.currentState!.save();
   ScaffoldMessenger.of(context).showSnackBar(
   SnackBar(content: Text(‘用户名：$_username’)),
   );
   }
   },
   child: Text(‘提交’),
   ),
   ),

这是一个ElevatedButton，当用户点击时会触发onPressed回调。回调中，首先使用_formKey.currentState!.validate()来验证表单。如果验证通过，则调用_formKey.currentState!.save()来保存表单值，并使用ScaffoldMessenger显示一个包含用户名的SnackBar。

整个应用程序的核心功能是创建一个简单的表单，用户可以在其中输入用户名。当用户点击提交按钮时，会进行验证并显示一个包含用户名的提示。