收藏与取消

Posted 2022-04-23 xingfeng_coder

本篇继上篇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');
      
    );
  

Toast

这里使用了fluttertoast库作为Toast的弹框，后面会通过自己使用MethodChannel通道来进行替换，敬请期待。

关于代码，参考https://github.com/wangli135/wan_android/tree/9a20c840c5ff9a885c3744e5d8af2a28306e1dc9

三方库

• shared_preferences
• fluttertoast
• path_provider
• CookieJar

参考

• Postman 模拟带 cookie 的请求

关注我的技术公众号，不定期会有技术文章推送，不敢说优质，但至少是我自己的学习心得。微信扫一扫下方二维码即可关注：