用flutter写个表单
时间: 2023-09-05 22:09:58 浏览: 34
好的,下面是一个简单的表单示例,包括姓名和电子邮件输入框以及提交按钮。
```dart
import 'package:flutter/material.dart';
class FormDemo extends StatefulWidget {
@override
_FormDemoState createState() => _FormDemoState();
}
class _FormDemoState extends State<FormDemo> {
final _formKey = GlobalKey<FormState>();
String _name;
String _email;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('表单示例'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
hintText: '请输入姓名',
),
validator: (value) {
if (value.isEmpty) {
return '请输入姓名';
}
return null;
},
onSaved: (newValue) {
setState(() {
_name = newValue;
});
},
),
TextFormField(
decoration: InputDecoration(
hintText: '请输入电子邮件',
),
validator: (value) {
if (value.isEmpty) {
return '请输入电子邮件';
}
return null;
},
onSaved: (newValue) {
setState(() {
_email = newValue;
});
},
),
SizedBox(height: 16.0),
RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
_submit();
}
},
child: Text('提交'),
),
],
),
),
),
);
}
void _submit() {
// 处理表单提交逻辑
print('姓名:$_name');
print('电子邮件:$_email');
}
}
```
在这个示例中,我们使用 `Form` 小部件来包装表单。每个输入字段都使用 `TextFormField` 小部件来构建。我们在这些字段上使用 `validator` 属性来验证输入。一旦表单被提交,我们使用 `onSaved` 属性来保存输入值。
最后,我们使用 `RaisedButton` 小部件来创建一个提交按钮,并在按钮被点击时调用 `_submit()` 方法来处理表单提交逻辑。