Flutter开发之——表单组件

在Flutter中，表单是一种常见的UI模式，用于收集用户输入信息。Flutter提供了一个Form小部件，它可以帮助我们创建和管理表单字段。

以下是一个简单的Flutter表单示例，包括一个TextFormField用于输入文本和一个RaisedButton用于提交表单：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Form Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                TextFormField(
                  decoration: InputDecoration(
                    labelText: 'Username',
                    hintText: 'Enter your username',
                  ),
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Username is required';
                    }
                    return null;
                  },
                ),
                TextFormField(
                  decoration: InputDecoration(
                    labelText: 'Password',
                    hintText: 'Enter your password',
                  ),
                  obscureText: true,
                  validator: (value) {
                    if (value.isEmpty) {
                      return 'Password is required';
                    }
                    return null;
                  },
                ),
                RaisedButton(
                  onPressed: () {
                    if (_formKey.currentState.validate()) {
                      // Process data.
                      print('Valid!');
                    }
                  },
                  child: Text('Submit'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个Form，它包含两个TextFormField用于用户名和密码的输入，以及一个RaisedButton用于提交表单。每个TextFormField都有一个验证器来确保输入的数据是有效的。当用户点击按钮时，会触发表单验证，如果所有的字段都是有效的，那么可以在这里处理数据提交。