请用flutter和dart语言实现一个登陆界面,给出代码示例
时间: 2023-04-05 10:05:17 浏览: 193
好的,以下是一个简单的 Flutter 登录界面的示例代码:
```dart
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final _formKey = GlobalKey<FormState>();
String _email;
String _password;
@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(
labelText: '邮箱',
),
validator: (value) {
if (value.isEmpty) {
return '请输入邮箱';
}
return null;
},
onSaved: (value) {
_email = value;
},
),
TextFormField(
decoration: InputDecoration(
labelText: '密码',
),
obscureText: true,
validator: (value) {
if (value.isEmpty) {
return '请输入密码';
}
return null;
},
onSaved: (value) {
_password = value;
},
),
Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
// TODO: 登录逻辑
}
},
child: Text('登录'),
),
),
],
),
),
),
);
}
}
```
这个示例代码中,我们使用了 `Form` 和 `TextFormField` 来实现一个简单的登录界面。在用户点击登录按钮时,我们会验证表单输入是否合法,并将用户输入的邮箱和密码保存到 `_email` 和 `_password` 变量中。你可以根据自己的需求来修改这个示例代码。
阅读全文