Flutter-防京东商城项目-保存搜索历史记录-17

冯汉栩

已于 2024-03-07 10:43:06 修改

阅读量344

点赞数

分类专栏： Flutter 文章标签： flutter ios

于 2021-09-02 20:27:33 首次发布

本文链接：https://blog.csdn.net/weixin_38716347/article/details/120069048

版权

Flutter 专栏收录该内容

47 篇文章 9 订阅

订阅专栏

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

代码文档

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

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

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

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

说明一下：保存历史数据需要用到第三方的SDK，下载好之后，下面编写了一个Storage的封装文件，这个文件是基于SDK封装的增删改查方法来的，然后又继续封装了SearchServices的文件是基于Storage的文件+项目的业务再去封装的，使用的时候就用SearchServices里面封装好的方法。

1.导入第三方：

#保存搜索信息
shared_preferences: ^0.5.3+1

2.导入封装好的库

在这里插入图片描述

import 'package:shared_preferences/shared_preferences.dart';

class Storage{

  static Future<void> setString(key,value) async{
       SharedPreferences sp=await SharedPreferences.getInstance();
       sp.setString(key, value);
  }
  static Future<String> getString(key) async{
       SharedPreferences sp=await SharedPreferences.getInstance();
       return sp.getString(key);
  }
  static Future<void> remove(key) async{
       SharedPreferences sp=await SharedPreferences.getInstance();
       sp.remove(key);
  }
  static Future<void> clear() async{
       SharedPreferences sp=await SharedPreferences.getInstance();
       sp.clear();
  }
  
}

在这里插入图片描述

import 'dart:convert';

import 'Storage.dart';

class SearchServices {
  static setHistoryData(keywords) async {
    /*
          1、获取本地存储里面的数据  (searchList)

          2、判断本地存储是否有数据

              2.1、如果有数据

                    1、读取本地存储的数据
                    2、判断本地存储中有没有当前数据，
                        如果有不做操作、
                        如果没有当前数据,本地存储的数据和当前数据拼接后重新写入


              2.2、如果没有数据

                    直接把当前数据放在数组中写入到本地存储


      */

    try {
      List searchListData = json.decode(await Storage.getString('searchList'));

      print(searchListData);
      var hasData = searchListData.any((v) {
        return v == keywords;
      });
      if (!hasData) {
        searchListData.add(keywords);
        await Storage.setString('searchList', json.encode(searchListData));
      }
    } catch (e) {
      List tempList = new List();
      tempList.add(keywords);
      await Storage.setString('searchList', json.encode(tempList));
    }
  }
  static getHistoryList() async{
    try {
      List searchListData = json.decode(await Storage.getString('searchList'));
      return searchListData;
    } catch (e) {
      return [];
    }
  }

  static clearHistoryList() async{
    await Storage.remove('searchList');
  }
  static removeHistoryData(keywords) async{
    List searchListData = json.decode(await Storage.getString('searchList'));
    searchListData.remove(keywords);
    await Storage.setString('searchList', json.encode(searchListData));
  }

}

3.引入在搜索页面

import '../services/SearchServices.dart';

4.保存搜索数据

onTap: () {
  SearchServices.setHistoryData(this._keywords);//-------------------------------------
  Navigator.pushReplacementNamed(context, '/productList',
      arguments: {"keywords": this._keywords});//-------------------------------------
},

在这里插入图片描述

5.创建一个历史数组

List _historyListData = [];

6.创建获取数据的方法和调用

在这里插入图片描述

@override


//--------------------------------------------
void initState() {
  super.initState();
  this._getHistoryData();
}

_getHistoryData() async {
   var _historyListData = await SearchServices.getHistoryList();
  setState(() {
    this._historyListData=_historyListData;
  });

}

7.删除下面的代码代码位置在最底部

在这里插入图片描述

SizedBox(height: 10),


//下面的代码全部删除
//-------------------------------------------------------------
Container(
  child: Text("历史记录", style: Theme.of(context).textTheme.title),
),
Divider(),
Column(
  children: <Widget>[
    ListTile(
      title: Text("女装"),
    ),
    Divider(),
    ListTile(
      title: Text("女装"),
    ),
    Divider(),
    ListTile(
      title: Text("男装"),
    ),
    Divider(),
    ListTile(
      title: Text("手机"),
    ),
    Divider(),
    ListTile(
      title: Text("鞋子"),
    ),
    Divider(),
  ],
),
SizedBox(height: 100),
InkWell(
  onTap: (){

  },
  child: Container(
    width: ScreenAdaper.width(400),
    height: ScreenAdaper.height(64),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.black45, width: 1)),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[Icon(Icons.delete), Text("清空历史记录")],
    ),
  ),
)

8.然后替换为下面的代码

//历史记录
_historyListWidget()

在刚刚删除的代码下面添加
在这里插入图片描述





7.编写historyListWidget的代码
Widget _historyListWidget() {
  if (_historyListData.length > 0) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          child: Text("历史记录", style: Theme.of(context).textTheme.title),
        ),
        Divider(),
        Column(
          children: this._historyListData.map((value) {
            return Column(
              children: <Widget>[
                ListTile(
                  title: Text("${value}"),
                  onLongPress: (){
                    this._showAlertDialog("${value}");
                  },
                ),
                Divider()
              ],
            );
          }).toList(),
        ),
        SizedBox(height: 100),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            InkWell(
              onTap: () {
                SearchServices.clearHistoryList();
                this._getHistoryData();

              },
              child: Container(
                width: ScreenAdapter.width(400),
                height: ScreenAdapter.height(64),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.black45, width: 1)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[Icon(Icons.delete), Text("清空历史记录")],
                ),
              ),
            )
          ],
        )
      ],
    );
  } else {
    return Text("");
  }
}

9.现在运行一个错误

缺少一个删除历史记录方法下面创建一个删除历史记录的代码

//删除单个历史记录
 _showAlertDialog(keywords) async{
   
  var result= await showDialog(
      barrierDismissible:false,   //表示点击灰色背景的时候是否消失弹出框
      context:context,
      builder: (context){
        return AlertDialog(
          title: Text("提示信息!"),
          content:Text("您确定要删除吗?") ,
          actions: <Widget>[
            FlatButton(
              child: Text("取消"),
              onPressed: (){
                print("取消");
                Navigator.pop(context,'Cancle');
              },
            ),
            FlatButton(
              child: Text("确定"),
              onPressed: () async{            
                //注意异步      
                await SearchServices.removeHistoryData(keywords);
                this._getHistoryData();
                Navigator.pop(context,"Ok");
              },
            )
          ],

        );
      }
   );
}

10.去到下面的控制器

在这里插入图片描述
导入

import '../services/SearchServices.dart';

onTap: () {
   SearchServices.setHistoryData(this._keywords);//-----------------------------------
   this._subHeaderChange(1);
},

在这里插入图片描述

冯汉栩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Flutter-防京东商城项目-保存搜索历史记录-17

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。1.导入第三方：shared_preferences: ^0.5.3+12.导入封装好的库import 'package:shared_preferences/shared_preferences.dart';class Storage{ static Fut
复制链接

扫一扫