Flutter

最近更新时间:2026-01-20 14:55:18

我的收藏

组件概述

Search 是搜索组件,为用户提供搜索框、搜索结果展示、界面跳转等功能的完整组件集合。该组件支持用户搜索、群组搜索、消息搜索等功能,并提供了丰富的交互回调接口。
说明:
搜索为旗舰版或企业版功能,购买旗舰版或企业版套餐包 后可使用,详情请参见 价格说明
搜索入口
搜索结果



组件集成

Search 组件属于 TUIKit Flutter 的一部分,集成 TUIKit Flutter 即可获取并使用 Search 组件。集成方法请参考文档 TUIKit Flutter 里的集成步骤,完成登录操作。

组件构成

SearchBar 是搜索的入口 Widget,您可以将其放置在 Scaffold body 的顶部,对外仅暴露了搜索组件的初始化方法,其他逻辑均封装在 SearchBar 中。
方法名
参数
描述
SearchBar
onContactSelect: (FriendSearchInfo selectedContact) {}
点击搜索到的联系人条目时的回调,可选参数
onGroupSelect: (GroupSearchInfo selectedGroup) {}
点击搜索到的群组条目时的回调,可选参数
onConversationSelect: (MessageSearchResultItem selectedConversation) {}
点击搜索到的会话条目时的回调,可选参数
onMessageSelect: (MessageInfo selectedMessage) {}
点击搜索到的消息条目时的回调,可选参数

基础用法

SearchBar 的搜索结果路由跳转如下:
自动路由:在搜索结果界面中,点击更多More)按钮或聊天记录列表时,组件内部会通过 Navigator 自动完成页面跳转。
自定义路由:当用户点击具体的联系人、群组、会话或消息时,组件会触发相应的回调onContactSelect/onGroupSelect/onConversationSelect/onMessageSelect,需在回调中实现自定义跳转(例如跳转到您的自定义聊天界面)。
如下图所示:

SearchBar组件可直接初始化使用,示例代码如下:

SearchBar(
onContactSelect: (FriendSearchInfo selectedContact) {
// 联系人点击响应事件
},

onGroupSelect: (GroupSearchInfo selectedGroup) {
// 群组点击响应事件
},

onConversationSelect: (MessageSearchResultItem selectedConversation) {
// 会话点击响应事件
},

onMessageSelect: (MessageInfo selectedMessage) {
// 消息点击响应事件
},
),

示例项目

IM 在 GitHub 上提供开源的 示例项目,您可以参考完整的实现。