Flutter开发之——表单组件

在Flutter中，表单是一种常见的UI模式，用于收集用户输入信息。Flutter提供了一个Form类来帮助我们创建表单并管理表单字段的状态。

以下是一个简单的表单示例，包括一个TextFormField来收集用户的输入信息。

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('表单示例'),
        ),
        body: FormExample(),
      ),
    );
  }
}
 
class FormExample extends StatefulWidget {
  @override
  _FormExampleState createState() => _FormExampleState();
}
 
class _FormExampleState extends State<FormExample> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  String _name;
 
  void _submit() {
    final FormState form = _formKey.currentState;
    if (form.validate()) {
      form.save();
      // 处理提交逻辑，例如：打印用户名
      print('用户名: $_name');
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(
              labelText: '用户名',
              hintText: '请输入用户名',
            ),
            validator: (value) {
              if (value.isEmpty) {
                return '用户名不能为空';
              }
              return null;
            },
            onSaved: (value) => _name = value,
          ),
          RaisedButton(
            child: Text('提交'),
            onPressed: _submit,
          ),
        ],
      ),
    );
  }
}

在这个例子中，我们创建了一个Form，并在其内部添加了一个TextFormField。我们还定义了一个_submit方法来处理表单的提交。当用户点击提交按钮时，会先进行表单验证，验证通过后保存表单数据并打印出用户名。这个例子展示了如何在Flutter中创建和管理表单。