TIMUIKitGroup

组件介绍及使用场景

组件介绍：群组列表组件。

使用场景：展示群组列表时使用。

参数列表

代码示例与效果展示

onTapItem

onTapItem为群组模块点击触发的函数。

• 代码示例为使用自定义onTapItem做到点击跳转到群组聊天页面。

代码示例

  @override
  Widget build(BuildContext context) {
    _jumpToChatPage(BuildContext context, String groupId) async {
      final res = await sdkInstance
          .getConversationManager()
          .getConversation(conversationID: "group_$groupId");
      if (res.code == 0) {
        final conversation = res.data;
        if (conversation != null) {
          Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => Chat(selectedConversation: conversation),
              ));
        }
      }
    }

    final theme = Provider.of<DefaultThemeData>(context).theme;
    return Scaffold(
      appBar: AppBar(
          title: Text(
            imt("群聊"),
            style: const TextStyle(color: Colors.white, fontSize: 17),
          ),
          shadowColor: Colors.white,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                theme.lightPrimaryColor ?? CommonColor.lightPrimaryColor,
                theme.primaryColor ?? CommonColor.primaryColor
              ]),
            ),
          ),
          iconTheme: const IconThemeData(
            color: Colors.white,
          )),
      body: TIMUIKitGroup(
        onTapItem: (groupInfo) {
          final groupID = groupInfo.groupID;
          _jumpToChatPage(context, groupID);
        },
        emptyBuilder: (_) {
          return Center(
            child: Text(imt("暂无群聊")),
          );
        },
        groupCollector: (groupInfo) {
          final groupID = groupInfo?.groupID ?? "";
          return !groupID.contains("im_discuss_");
        },
      ),
    );
  }

效果展示

emptyBuilder

emptyBuilder决定了当群组列表为空时群组列表页面的样式。

• 代码示例为使用自定义emptyBuilder展示暂无群组的页面样式。

代码示例

  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<DefaultThemeData>(context).theme;
    return Scaffold(
      appBar: AppBar(
          title: Text(
            imt("群聊"),
            style: const TextStyle(color: Colors.white, fontSize: 17),
          ),
          shadowColor: Colors.white,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                theme.lightPrimaryColor ?? CommonColor.lightPrimaryColor,
                theme.primaryColor ?? CommonColor.primaryColor
              ]),
            ),
          ),
          iconTheme: const IconThemeData(
            color: Colors.white,
          )),
      body: TIMUIKitGroup(
        onTapItem: (groupInfo) {
          final groupID = groupInfo.groupID;
          _jumpToChatPage(context, groupID);
        },
        emptyBuilder: (_) {
          return Center(
            child: Text(imt("暂无群聊")),
          );
        },
        groupCollector: (groupInfo) {
          final groupID = groupInfo?.groupID ?? "";
          return !groupID.contains("im_discuss_");
        },
      ),
    );
  }

效果展示

itemBuilder

itemBuilder为用于自定义构建群组模块的构造器

• 代码示例为使用自定义itemBuilder展示群组列表信息

代码示例

  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<DefaultThemeData>(context).theme;
    _jumpToChatPage(BuildContext context, String groupId) async {
      final res = await sdkInstance
          .getConversationManager()
          .getConversation(conversationID: "group_$groupId");
      if (res.code == 0) {
        final conversation = res.data;
        if (conversation != null) {
          Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => Chat(selectedConversation: conversation),
              ));
        }
      }
    }

    Widget _itemBuilder(BuildContext context, V2TimGroupInfo groupInfo) {
      final theme = Provider.of<TUIThemeViewModel>(context).theme;
      final showName = groupInfo.groupName ?? groupInfo.groupID;
      final faceUrl = groupInfo.faceUrl ?? "";
      return Container(
        padding: const EdgeInsets.only(top: 10, left: 16),
        child: InkWell(
          onTap: (() {
            final groupID = groupInfo.groupID;
            _jumpToChatPage(context, groupID);
          }),
          child: Row(
            children: [
              Container(
                padding: const EdgeInsets.only(bottom: 12),
                margin: const EdgeInsets.only(right: 12),
                child: SizedBox(
                  height: 40,
                  width: 40,
                  child: Avatar(faceUrl: faceUrl, showName: showName),
                ),
              ),
              Expanded(
                  child: Container(
                alignment: Alignment.centerLeft,
                padding: const EdgeInsets.only(top: 10, bottom: 20),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(
                            color: theme.weakDividerColor ??
                                CommonColor.weakDividerColor))),
                child: Text(
                  showName,
                  style: const TextStyle(color: Colors.black, fontSize: 18),
                ),
              ))
            ],
          ),
        ),
      );
    }

    return Scaffold(
      appBar: AppBar(
          title: Text(
            imt("群聊"),
            style: const TextStyle(color: Colors.white, fontSize: 17),
          ),
          shadowColor: Colors.white,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                theme.lightPrimaryColor ?? CommonColor.lightPrimaryColor,
                theme.primaryColor ?? CommonColor.primaryColor
              ]),
            ),
          ),
          iconTheme: const IconThemeData(
            color: Colors.white,
          )),
      body: TIMUIKitGroup(
        itemBuilder: _itemBuilder,
        emptyBuilder: (_) {
          return Center(
            child: Text(imt("暂无群聊")),
          );
        },
        groupCollector: (groupInfo) {
          final groupID = groupInfo?.groupID ?? "";
          return !groupID.contains("im_discuss_");
        },
      ),
    );
  }

效果展示

groupCollector

groupCollector为群组列表展示的过滤器

• 代码示例为使用groupCollector做到不展示群组名称为test2的案例。

代码示例

  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<DefaultThemeData>(context).theme;
    return Scaffold(
      appBar: AppBar(
          title: Text(
            imt("群聊"),
            style: const TextStyle(color: Colors.white, fontSize: 17),
          ),
          shadowColor: Colors.white,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                theme.lightPrimaryColor ?? CommonColor.lightPrimaryColor,
                theme.primaryColor ?? CommonColor.primaryColor
              ]),
            ),
          ),
          iconTheme: const IconThemeData(
            color: Colors.white,
          )),
      body: TIMUIKitGroup(
        onTapItem: (groupInfo) {
          final groupID = groupInfo.groupID;
          _jumpToChatPage(context, groupID);
        },
        emptyBuilder: (_) {
          return Center(
            child: Text(imt("暂无群聊")),
          );
        },
        groupCollector: (V2TimGroupInfo? groupInfo) {
          final groupName = groupInfo?.groupName ?? "";
          return !groupName.contains("test2");
        },
      ),
    );
  }

效果展示