Flutter版本玩Android客户端(6)——登录注册模块以及文章收藏与取消

最新推荐文章于 2024-08-18 10:44:42 发布

xingfeng_coder

最新推荐文章于 2024-08-18 10:44:42 发布

阅读量1k

点赞数 3

分类专栏： Flutter 文章标签： Flutter 玩Android

本文链接：https://blog.csdn.net/qq_19431333/article/details/99606571

版权

Flutter 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本篇继上篇Flutter版本玩Android客户端(5)——微信公众号tab点击跳转后，完成了登录注册模块，以及文章收藏与取消。

但仍有部分没有完成，比如登录状态的同步，drawer的header中没有因登录状态而改变。

先看效果：
登录注册模块

登录注册

玩Android登录后，会返回一个cookie，需要将该cookie保存，然后在一些post接口上带上该cookie表示用户信息，比如收藏、取消收藏都隐含了cookie。

保存cookie的实现

这里是通过给Dio增加了一个拦截器来实现的，具体代码如下：

ApiClient._() {
    dio = Dio();
    dio.options.connectTimeout = TIMEOUT;
    dio.options.receiveTimeout = TIMEOUT;
    dio.options.responseType = ResponseType.json;
    getCookiePath().then((val) {
      dio.interceptors
          .add(CookieManager(PersistCookieJar(dir: val, ignoreExpires: true)));
    });
  }

  Future<String> getCookiePath() async {
    Directory tempDir = await getTemporaryDirectory();
    return tempDir.path;
  }

其中使用了path_provider库获取了路径，作为cookie保存的路径，使用了cookie_jar库作为保存、加载cookie。关于这两个库的使用可以参考后面的三方库链接。

登录注册模块

登录注册模块主要涉及表单Form这个Widget，其中TextFormField使用TextEditingController进行控制，可以通过该类来获取对应TextFormField的数据。一些基本的检查可以交给validate函数，比如注册时对确认密码的校验，第二次输入的密码得和第一次相同。

TextFormField(
                controller: _repasswordController,
                decoration: InputDecoration(
                    labelText: '确认密码',
                    hintText: '密码确认',
                    icon: Icon(Icons.lock)),
                obscureText: true,
                //校验
                validator: (v) {
                  return v.trim().length > 0
                      ? (v ==
                      //通过Controller可以得到文本
                      _passwordController.text ? null : '两次密码不相同')
                      : '密码不能为空';
                },
              ),

状态保存

目前只在登录成功后保存了用户名、密码、登录成功状态，这部分是通过shared_preference三方库实现的，和后面的Toast一样，后续会通过实现MethodChannel进行替换。

收藏、取消收藏

这里对ArticleListWidget做了一个重构，将其中的文章Item作为一个Widget抽出，会根据Article的collect这个字段进行是否收藏的图标的变化，因此这得是一个StatefulWidget，然后在图标点击时进行状态的切换，以收藏为例，代码如下：

/// 收藏
  collectArticle(ArticleItem articleItem) {
    ApiClient apiClient = ApiClient.getInstance();
    //发送请求
    apiClient
        .postRequest(
            'https://www.wanandroid.com/lg/collect/${articleItem.id}/json',
            null)
        .then((val) {
      BaseModel baseModel = BaseModel.fromJson(val);
      if (baseModel.errorCode == 0) {
        //收藏成功，更新ui状态
        setState(() {
          articleItem.collect = true;
        });
        Fluttertoast.showToast(msg: '收藏成功');
      } else {
        Fluttertoast.showToast(msg: '收藏失败，${baseModel.errorMsg}');
      }
    });
  }