qt 实现登录时有等待转圈_使用 Flutter MVVM 开发登录功能

前几天写了篇关于 Flutter MVVM 实现的文章 从web端开发到app端开发也许只有一个Flutter MVVM的距离，今天我们使用它来开发一个简单的登录功能，体验使用 MVVM 数据绑定在开发过程中的便捷。

本篇完整代码

unicreators/mvvm​github.com

功能描述

登录界面中包括 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()));

此刻运行后效果

实现功能点 1

UserName 、 Password 任一输入框内容长度小于3个字符时， login 按钮为不可用状态

在Flutter中文本输入框(TextField)是通过附加一个控制器 TextEditingController来控制其输入输出的。

首先我们在 LoginViewModel 中创建两个 TextEditingController, 并在视图 LoginView 中，使用 $Model 将 TextEditingController 附加到 UserName 和 Password文本输入框上

为方便显示省略了部分代码

class LoginViewModel extends ViewModel {
    
    final T