Flutter-防京东商城项目-用户登录 退出登录 事件广播更新状态-36

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

本章效果：

在login页面添加两个属性。

1.创建两个属性

String username = '';
String password = '';

2.去到下面进行赋值

SizedBox(height: 30),
JdText(
  text: "请输入用户名",
  onChanged: (value) {
    // print(value);
    this.username=value;//--------------------------------------------
  },
),
SizedBox(height: 10),
JdText(
  text: "请输入密码",
  password: true,
  onChanged: (value) {
    // print(value);
    this.password=value;//--------------------------------------------
  },
),

3.回到页面
导入

import '../config/Config.dart';
import 'package:dio/dio.dart';
//提示框
import 'package:fluttertoast/fluttertoast.dart';
import '../services/Storage.dart';
import 'dart:convert';

doLogin() async{
  RegExp reg = new RegExp(r"^1\d{10}$");
  if (!reg.hasMatch(this.username)) {
     Fluttertoast.showToast(
      msg: '手机号格式不对',
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
    );
  } else if(password.length<6){
    Fluttertoast.showToast(
      msg: '密码不正确',
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.CENTER,
    );
  }else{
    var api = '${Config.domain}api/doLogin';
    var response = await Dio().post(api, data: {"username": this.username,"password":this.password});
    if (response.data["success"]) {
      print(response.data);
      //保存用户信息
      Storage.setString('userInfo', json.encode(response.data["userinfo"]));

      Navigator.pop(context);
      
    } else {
      Fluttertoast.showToast(
        msg: '${response.data["message"]}',
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
      );
    }

  }
}

3.1然后运用登录的方法

JdButton(
  text:"登录",
  color: Colors.red,
  height: 74,
  cb: doLogin,//--------------------------------------------
)

4.通过实践广播的方式，登录完成回到我的页面刷新UI
回到页面。在文件里面添加下面的代码

//用户中心广播
class UserEvent{
  String str;
  UserEvent(String str){
    this.str=str;
  }
}

5.回到页面
引入

import '../services/EventBus.dart';

6.添加下面的代码

//监听登录页面销毁的事件
dispose(){
  super.dispose();
  eventBus.fire(new UserEvent('登录成功...'));
}

7.在也要引入实践广播

import '../../services/EventBus.dart';

添加下面的代码

@override
void initState() {
  // TODO: implement initState
  super.initState();
  this._getUserinfo();



//--------------------------------------------
  //监听登录页面改变的事件
  eventBus.on<UserEvent>().listen((event) {
    print(event.str);
    this._getUserinfo();
  });
//--------------------------------------------



}

8.优化退出登录按钮 拉到最下面的退出登录按键替换下面的代码
现在替换成盘算是否登录显示按键。
旧的代码

替换代码

this.isLogin
    ? Container(
        padding: EdgeInsets.all(20),
        child: JdButton(
          color: Colors.red,
          text: "退出登录",
          cb: () {
            UserServices.loginOut();//    写了不用写
            this._getUserinfo();
          },
        ),
      )
    : Text("")