登陆功能 & App响应

[Nealyang]

前言

截止目前，我们完成了基本的页面UI编写，毕竟作为一款社区app，登陆功能也是必须的。但是登陆功能对接我们不同业务可能场景不同，无论是存储session还是token或者uid，都是根绝自己业务需求来的。所以这里我们大致简单的模拟一下

登陆page

从掘金web版的开发api可以看出，登陆通过调用https://juejin.im/auth/type/phoneNumber ,通过post请求去发送我们账号、密码。但是这里我们并没有必要去模拟，毕竟不同公司，不同业务对于敏感数据的处理是不同的。

• lib/pages/login.dart

  Column(
            children: <Widget>[
              TextField(
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  contentPadding: const EdgeInsets.all(10.0),
                  icon: Icon(Icons.person),
                  labelText: '请输入用户名',
                ),
                onChanged: _userNameChange,
                autofocus: false,
              ),
              SizedBox(
                height: 20.0,
              ),
              TextField(
                keyboardType: TextInputType.text,
                decoration: InputDecoration(
                  contentPadding: const EdgeInsets.all(10.0),
                  icon: Icon(Icons.security),
                  labelText: '请输入密码',
                ),
                onChanged: _passwordChange,
                autofocus: false,
                obscureText: true,
              ),
              SizedBox(
                height: 20.0,
              ),
              FlatButton(
                onPressed: () {
                  if (_userName != '' && _password != '') {
                    Application.router.pop(context);
                    ApplicationEvent.event
                        .fire(UserLoginEvent(_userName,_userPic));
                  }
                },
                color: Theme.of(context).primaryColor,
                child: Text('登陆',
                    style: TextStyle(color: Colors.white, fontSize: 18.0)),
              )
            ],
          )

• 使用TextField widget 来完成对输入框的编写 关于 TextField widget更多的使用可以参照 博客总结 也可以参照 官网文档
• 点击button后，触发登陆请求，这里笔者只是简单模拟，更多的操作读者们也可以自己探索，根据自己的业务需求

App相应

这里我们使用 flutter package中的event_bus 目的在于有些页面，在登陆后和登录前UI展示是不一样的，所以这里，我们需要在登陆后，通过对应需要更改状态的页面修改相应的状态。

首先我们在项目中导入 event_bus 包。

然后修改项目整体结构：lib目录下添加event目录

在 event-bus.dart中配置EventBus

  import 'package:event_bus/event_bus.dart';
  
  class ApplicationEvent{
    static EventBus event;
  }

在 event-model.dart 中配置项目所需的全部事件元

  class UserLoginEvent{
    final String userName;
    final String userPic;
    // token uid...
    UserLoginEvent(this.userName,this.userPic);
  }

这里我们就定义了一个 UserLoginEvent class

然后在入口文件中，实例化 event_bus

• lib/pages/my_app.dart

  String _userName = '';
  String _userPic = '';
  ...
  _MyAppState() {
    final router = new Router();
    final eventBus = new EventBus();
    Routes.configureRoutes(router);
    Application.router = router;
    ApplicationEvent.event = eventBus;
  }

然后在页面的 initState 中注入相关的事件监听

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: _bottomTabs.length);
    ApplicationEvent.event.on<UserLoginEvent>().listen((event) {
      setState(() {
        _userName = event.userName;
        _userPic = event.userPic;
      });
    });
  }

完整代码地址：my_app.dart

发送广播

在我们登陆页面，登陆后，即可发送对应的广播

                onPressed: () {
                  if (_userName != '' && _password != '') {
                    ApplicationEvent.event
                        .fire(UserLoginEvent(_userName,_userPic));
                    Application.router.pop(context);
                  }
                },

效果如下：

总结

如上我们就完成了app的mock 登陆以及广播的发送，其实对于Flutter中，我们也可以使用类似react中的react-redux来统一管理我们的state。Flutter redux 具体实现可以自行查阅相关文档。关于登陆响应当然也有更多的实现方式，欢迎大家评论探讨指教~ 当然event_bus还是一个非常实用的package，也希望大家能够多多利用。利用的好，必然会给我们带来开发上的很多便利。