一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。
说明一下:保存历史数据需要用到第三方的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);
},