search.gif
自定义searchBar 搜索本地数据库好友信息高亮显示匹配并多选发送
先看下文件分类吧
1620456343148.jpg
receive_share_intent.dart 请忽略
采用MVC实现代码分层
- logic: controller层处理逻辑
- view: UI控件
- state: 数据层
- widget:控件拆分
先看下view层
class ForwardMsgPage extends StatelessWidget {
final Message forwardMsg;
/// 注入controller 和 state
final ForwardMsgLogic logic = Get.put(ForwardMsgLogic());
final ForwardMsgState state = Get.find().state;
ForwardMsgPage({Key key, this.forwardMsg}) : super(key: key);
@override
Widget build(BuildContext context) {
return forwardBuildBg(context, backFunc: () {
Get.delete();
Navigator.pop(context);
}, children: [
ZYSearchWidget(
hintText: '搜索',
onSearch: logic.onSearch,
onCancel: () => logic.onSearchCancle(),
onClear: () => logic.onSearchClear(),
onChanged: logic.onSearchValueChange
// onEditingComplete: () =>logic.onSearchValueChange(''),
),
buildUserAndGroupList(
/// 滑动取消键盘
gesturePanDownCallback: () {
FocusScope.of(context).requestFocus(FocusNode());
},
children: [
/// 聊天列表
Obx(() => Visibility(
visible: state.searchQuery.value.isEmpty,
child: ForwardMsgRecentCon(
data: state.conList,
itemClick: (value) => showAlert(context,
determine: () =>
logic.sendMsg(forwardMsg, value, context)),
))),
/// 联系人 群组列表
Obx(() => Visibility(
visible: state.searchQuery.value.isNotEmpty,
child: ForwardMsgSearchResult(
state: state,
userItemClick: (userInfo) => logic.userItemClick(userInfo),
groupItemClick: (groupInfo) => logic.groupItemClick(groupInfo),
// itemClick: (value) => showAlert(context,
// determine: () => logic.sendMsg(forwardMsg, value, context)),
))),
]),
/// 联系人 群组列表
Obx(() => Visibility(
visible: state.showSend.value,
child: ForwardChooseResult(
state: state,
closeClick: (item)=>logic.closeBtnClick(item),
confirmSendClick:()=> logic.confirmSendClick(forwardMsg,completeHandler: (){
Get.delete();
Navigator.pop(context);
}),
)))
]);
}
}
Obx 根据响应字段 searchQuery 和 showSend 隐藏显示
state类定义了可响应字段
typedef ForwardUserItemBuilder = Widget Function(UserInfo item);
typedef ForwardGroupItemBuilder = Widget Function(GroupInfoUserList item);
typedef ForwardChooseItemBuilder = Widget Function(dynamic item);
class ForwardMsgState {
///最近会话数据源
List conList = [];
/// 联系人列表
List userList = [];
/// 群列表
List groupList = [];
/// 是否显示最近聊天
// RxBool showRecentList = true.obs;
/// 搜索内容
RxString searchQuery = ''.obs;
/// 选中的用户列表
List selectUserList = [];
/// 选中的群组列表
List selectGroupList = [];
/// 用户列表 + 群组列表
List selectTotalList = [];
/// 展示多选
RxBool showSend = false.obs;
}
controller层
class ForwardMsgLogic extends GetxController {
final state = ForwardMsgState();
int forwardTotalCount = 0;
@override
void onReady() {
// TODO: implement onReady
super.onReady();
///防DDos - 每当用户停止输入1秒时调用
debounce(state.searchQuery, (value) => loadDataFormDB(value));
updateConversationList();
}
updateConversationList() async {
List list = await RongIMClient.getConversationList(
[RCConversationType.Private, RCConversationType.Group]);
state.conList.addAll(list);
update(['conList']);
}
void recentConItemClick(Conversation conversation) {}
void onSearch(msg) {
loadDataFormDB(msg);
}
onReady方法获取最近聊天列表数据，get提供了防抖
搜索后获取本地数据库用户信息并匹配用户
void loadDataFormDB(query) async {
print('query----rebuild');
state.userList.clear();
state.groupList.clear();
List userlist =
await DbManager.instance.getUserInfoWithUserName(query);
if (userlist != null && userlist.isNotEmpty) {
List searchUserList = [];
userlist.forEach((element) {
SearchUserInfo searchUserInfo = SearchUserInfo.formUserInfo(element);
// 根据已选择的是否包含 初始化可选状态
state.selectUserList.forEach((element) {
if (element.id == searchUserInfo.id) {
searchUserInfo.checked.value = true;
}
});
searchUserList.add(searchUserInfo);
});
state.userList.assignAll(searchUserList);
}
update(['userList']);
List grouplist =
await DbManager.instance.getGroupInfoWithGroupName(query);
if (grouplist != null && grouplist.isNotEmpty) {
List searchGroupList = [];
grouplist.forEach((element) {
SearchGroupInfo searchGroupInfo =
SearchGroupInfo.formGroupInfo(element);
// 根据已选择的是否包含 初始化可选状态
state.selectGroupList.forEach((element) {
if (element.id == searchGroupInfo.id) {
searchGroupInfo.checked.value = true;
}
});
searchGroupList.add(searchGroupInfo);
});
state.groupList.assignAll(searchGroupList);
}
update(['groupList']);
}
手动调用 update(['userList']); 通过制定tag 做到指定刷新widget
///联系人搜索结果
Widget _searchUserResult({ForwardUserItemBuilder itemBuilder}) {
return GetBuilder(
id: 'userList',
builder: (controller) {
return controller.state.userList.length > 0
? ListView.builder(
padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: controller.state.userList.length,
itemBuilder: (context, index) => itemBuilder(controller.state.userList[index])
)
: Container();
});
}
/// 搜索群组结果
Widget _buildGroupList({ForwardGroupItemBuilder itemBuilder}){
return GetBuilder(
id: 'groupList',
builder: (controller) {
return controller.state.groupList.length > 0
? ListView.builder(
// padding: EdgeInsets.zero,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: controller.state.groupList.length,
itemBuilder: (context, index) => itemBuilder(controller.state.groupList[index]))
: Container();
});
}
通过 设置 GetBuilder的id对应update方法，GetBuilder 可以理解为statefulWidget
多选功能通过设置对象的checked为可观察 RxBool checked = false.obs;
class SearchUserInfo extends userdb.UserInfo {
RxBool checked = false.obs;
SearchUserInfo.formUserInfo(userdb.UserInfo userInfo) {
this.companyName = userInfo.companyName;
this.id = userInfo.id;
this.name = userInfo.name;
}
}
/// 用户列表可选框
Widget _buildUserListCheckBox(SearchUserInfo userInfo){
return Padding(
padding: const EdgeInsets.only(right: 17),
child: Obx(()=>Image.asset(
userInfo.checked.value?'assets/images/contact_info_selected.png':'assets/images/contact_info_unselected.png',height: 24,width: 24,fit:BoxFit.fill ,)),
);
}
点击后更新对象属性的响应属性
state.userList.forEach((element) {
if (element.id == item.id) {
element.checked.value = false;
}
});
通过checked.value 设置 注意 .obs 属性对应 obx控件观察。
搜索高亮匹配 代码如下
Widget _splitUserNameRichText(String userName) {
print(userName);
List spans = [];
List strs = userName?.split(state.searchQuery.value)??[];
for (int i = 0; i < strs.length; i++) {
if ((i % 2) == 1) {
spans.add(TextSpan(
text: state.searchQuery.value, style: _highlightUserNameStyle));
}
String val = strs[I];
if (val != '' && val.length > 0) {
spans.add(TextSpan(text: val, style: _normalUserNameStyle));
}
}
return RichText(text: TextSpan(children: spans));
}
界面布局防止套娃采用widget分组的方式便于定位代码
Widget build(BuildContext context) {
print('ForwardMsgSearchResult---rebuild');
return _buildBg(children: [
/// 联系人
_searchUserResult(itemBuilder: (item) {
return _buildUserItemBg([
/// 内容
_buildItemContent(children: [
/// 复选框
_buildUserListCheckBox(item),
/// 头像
WidgetUtil.buildUserPortraitWithParm(item.portraitUrl,item.name),
/// 用户名字
_buildUserItemName(item),
/// 公司名
_buildUserCompanyName(item)
]),
/// 下划线
_buildBottomLine()
],item: item);
}),
/// 分隔符
_buildSeparator(),
/// 群组结果
_buildSearchGroupBg(children: [
/// 群组标题
_buildGroupTitle(),
/// 群组item
_buildGroupList(itemBuilder: (item){
return _buildGroupItemBg(
groupInfo: item,
children: [
/// 群组内容
_buildGroupContent(children: [
/// 复选框
_buildGroupListCheckBox(item),
/// 群头像
_buildGroupItemPortrait(item),
_buildGroupNameAndUserName(children: [
/// 群名称
_buildGroupItemGroupName(item),
/// 包含的群成员
_buildGroupMember(item)
])
]),
/// 下划线
_buildBottomLine()
]);
})
]),
]);
}
难点在于三个数据源同步问题，底部展示多选列表和userList，groupList 同步
/// 联系人点击
void userItemClick(SearchUserInfo item) {
item.checked.value = !item.checked.value;
if (item.checked.value) {
bool exist = state.selectUserList.any((element) => element.id == item.id);
if (!exist) {
state.selectUserList.add(item);
state.selectTotalList.add(item);
}
} else {
state.selectUserList.removeWhere((element) => element.id == item.id);
state.selectTotalList.removeWhere((element) => element.id == item.id);
}
print('leon----selectUserList---${state.selectUserList.length}');
_showSend();
}
void _showSend() {
update(['chooseSend', 'totalCount']);
state.showSend.value = state.selectTotalList.isNotEmpty;
}
观察showSend隐藏显示底部多选框 visible: state.showSend.value,
/// 多选列表
Obx(() => Visibility(
visible: state.showSend.value,
child: ForwardChooseResult(
state: state,
closeClick: (item)=>logic.closeBtnClick(item),
confirmSendClick:()=> logic.confirmSendClick(forwardMsg,completeHandler: (){
Get.delete();
Navigator.pop(context);
}),
)))