![a426b2e0b4c7f633f25a2340dab68588.png](https://i-blog.csdnimg.cn/blog_migrate/494327cb42b61db7bf869d773b86cc5e.jpeg)
前几天写了篇关于 Flutter MVVM 实现的文章 从web端开发到app端开发也许只有一个Flutter MVVM的距离,今天我们使用它来开发一个简单的登录功能,体验使用 MVVM 数据绑定在开发过程中的便捷。
本篇完整代码
unicreators/mvvmgithub.com![fa23ee1183d39a989b484205a37254a3.png](https://i-blog.csdnimg.cn/blog_migrate/e2803e3de0451d4ace73306e914354b0.jpeg)
功能描述
登录界面中包括 UserName
、Password
文本输入框、login
按钮、成功信息显示文本、失败信息显示文本几部分,并有如下功能点:
UserName
、Password
任一输入框内容长度小于3个字符时,login
按钮为不可用状态- 点击
login
按钮,使用输入框内容请求远程服务,进行登录验证- 验证成功时显示用户信息
- 验证失败时显示错误信息
- 请求远程服务过程中显示等待状态(将按钮
login
字样变为转圈圈〜)
功能实现
创建Flutter项目(略〜)
在项目中添加 Flutter MVVM 依赖
找到项目中 pubspec.yaml 文件, 并在 dependencies 部分加入包信息
dependencies:
mvvm: ^0.1.3+4
为方便讲解,本篇涉及代码均在
main.dart
文件中,在实际项目中可自行拆分
编写基础代码
先创建一个空的登录视图模型 LoginViewModel
和登录视图 LoginView
,先把基础界面搭建出来 视图模型类需从 ViewModel
类继承。视图类需从 View
类继承,并指定视图模型 LoginViewModel
class LoginViewModel extends ViewModel {
}
class LoginView extends View<LoginViewModel> {
LoginView() : super(LoginViewModel());
@override
Widget buildCore(BuildContext context) {
return Scaffold(
body: Container(
margin: EdgeInsets.only(top: 100, bottom: 30),
padding: EdgeInsets.all(40),
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
SizedBox(height: 10),
TextField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'UserName',
),
),
SizedBox(height: 10),
TextField(
obscureText: true,
decoration: InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Password',
),
),
SizedBox(height: 10),
Text("Error info.",
style: TextStyle(color: Colors.redAccent, fontSize: 16)),
Container(
margin: EdgeInsets.only(top: 80),
width: double.infinity,
child: RaisedButton(
onPressed: () {},
child: Text("login"),
color: Colors.blueAccent,
textColor: Colors.white)),
SizedBox(height: 20),
Text("Success info.",
style: TextStyle(color: Colors.blueAccent, fontSize: 20))
])));
}
}
应用到启动页
void main() => runApp(MaterialApp(home: LoginView()));
此刻运行后效果
![9aa5b2ad671a5eb88275d2c6ff58c8ca.png](https://i-blog.csdnimg.cn/blog_migrate/8bc6efc37875488be1f69f04ac1006e4.jpeg)
实现功能点 1
UserName
、Password
任一输入框内容长度小于3个字符时,login
按钮为不可用状态
在Flutter中文本输入框(TextField
)是通过附加一个控制器 TextEditingController
来控制其输入输出的。
首先我们在 LoginViewModel
中创建两个 TextEditingController
, 并在视图 LoginView
中,使用 $Model
将 TextEditingController
附加到 UserName
和 Password
文本输入框上
为方便显示省略了部分代码
class LoginViewModel extends ViewModel {
final T