flutter3.0,创建登录界面,包含一个标题“声音学院”,一个用户ID输入框,一个密码输入框,一个登录按钮,登录时验证用户ID和密码正确性,正确时跳转新界面,错误时在当前界面显示错误信息
时间: 2024-05-05 20:22:04 浏览: 14
好的,我可以为你提供一些关于 Flutter 3.0 创建登录界面的指导。
首先,你需要在你的 Flutter 3.0 项目中创建一个新的页面来显示登录界面。在这个页面中,你需要添加一个标题和两个输入框(一个用于用户ID,另一个用于密码),以及一个登录按钮。
下面是一个简单的示例代码,可以用作你的登录界面的基本框架:
```dart
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
String _userId = '';
String _password = '';
String _errorMessage = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('声音学院'),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
decoration: InputDecoration(
hintText: '请输入您的用户ID',
),
onChanged: (value) {
setState(() {
_userId = value;
});
},
),
SizedBox(height: 16.0),
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: '请输入您的密码',
),
onChanged: (value) {
setState(() {
_password = value;
});
},
),
SizedBox(height: 16.0),
RaisedButton(
child: Text('登录'),
onPressed: () {
if (_userId == 'your_user_id' && _password == 'your_password') {
// 导航到新页面
} else {
setState(() {
_errorMessage = '用户名或密码错误,请重新输入。';
});
}
},
),
SizedBox(height: 16.0),
Text(
_errorMessage,
style: TextStyle(color: Colors.red),
),
],
),
),
);
}
}
```
在上面的代码中,我们定义了一个 `_userId` 和 `_password` 变量,并为每个输入框设置了 `onChanged` 回调函数,以便在用户输入时更新这些变量的值。我们还定义了一个 `_errorMessage` 变量,以在登录错误时显示错误消息。
当用户点击登录按钮时,我们将检查 `_userId` 和 `_password` 的值是否与预期值匹配。如果匹配,我们将导航到新页面(你可以使用 Flutter 中的 `Navigator` 类来实现这一点)。否则,我们将设置 `_errorMessage` 变量并在页面上显示错误消息。
希望这可以帮助你开始创建你的 Flutter 3.0 登录界面!
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)