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<ForwardMsgLogic>().state;

  ForwardMsgPage({Key key, this.forwardMsg}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return forwardBuildBg(context, backFunc: () {
      Get.delete<ForwardMsgLogic>();
      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<ForwardMsgLogic>();
              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<SearchUserInfo> userList = [];
  /// 群列表
  List<SearchGroupInfo> 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<userdb.UserInfo> userlist =
        await DbManager.instance.getUserInfoWithUserName(query);
    if (userlist != null && userlist.isNotEmpty) {
      List<SearchUserInfo> 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<GroupInfoUserList> grouplist =
        await DbManager.instance.getGroupInfoWithGroupName(query);
    if (grouplist != null && grouplist.isNotEmpty) {
      List<SearchGroupInfo> 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<ForwardMsgLogic>(
        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<ForwardMsgLogic>(
        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<TextSpan> spans = [];
    List<String> 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<ForwardMsgLogic>();
              Navigator.pop(context);
            }),
          )))