Skip to content

自定义会话列表(ConversationsView)

Jump to bottom
杜洁鹏 edited this page Jun 5, 2024 · 1 revision

会话列表提供了两种方式构造, 这两种方式都提供了对会话列表的自定义参数。

ConversationView()

  const ConversationsView({
    this.listViewItemBuilder,
    this.beforeWidgets,
    this.afterWidgets,
    this.onSearchTap,
    this.searchBarHideText,
    this.listViewBackground,
    this.onTap,
    this.onLongPressHandler,
    this.appBar,
    this.controller,
    this.enableAppBar = true,
    this.enableSearchBar = true,
    this.appBarMoreActionsBuilder,
    this.title,
    this.appBarLeading,
    this.attributes,
    this.viewObserver,
    this.appBarTrailingActionsBuilder,
    super.key,
  });

自定义列表显示

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      // 返回要显示的内容，model 为 ConversationItemModel 对象，包含了会话中的各种属性。
      listViewItemBuilder: (context, model) {
        return ListTile(
          title: Text(model.profile.showName),
        );
      },
    );
  }

自定义展示在列表前的数据

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      beforeWidgets: [
        Container(
          padding: const EdgeInsets.all(4),
          color: Colors.lightBlue,
          child: const Text('网络不佳'),
        )
      ],
    );
  }

自定义展示在列表后的数据

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      afterWidgets: [
        Container(
          padding: const EdgeInsets.all(4),
          color: Colors.lightBlue,
          child: const Text('无更多会话'),
        )
      ],
    );
  }

点击搜索框

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      // data 是当前所有的会话数据
      onSearchTap: (data) {
        debugPrint('onSearchTap');
      },
    );
  }

搜索框默认文字

  @override
  Widget build(BuildContext context) {
    return const ConversationsView(
      searchBarHideText: '搜索本地会话',
    );
  }

列表为空时的背景

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      listViewBackground: Container(
        color: Colors.red,
      ),
    );
  }

列表点击事件

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      // model: 被操作的会话数据
      onTap: (context, model) {
        debugPrint('onTap: $model');
      },
    );
  }

列表长按事件

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      // model: 被操作的会话数据
      // defaultActions: 默认的弹出菜单项
      // return: 返回调整后的弹出菜单项
      onLongPressHandler: (context, model, defaultActions) {
        return defaultActions;
      },
    );
  }

自定义 AppBar

  @override
  Widget build(BuildContext context) {
    return const ConversationsView(
      appBar: ChatUIKitAppBar(),
    );
  }

自定义控制器

  final ConversationListViewController controller = ConversationListViewController();

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      controller: controller,
    );
  }

是否显示 AppBar

  @override
  Widget build(BuildContext context) {
    return const ConversationsView(
      enableAppBar: false,
    );
  }

是否显示搜索框

  @override
  Widget build(BuildContext context) {
    return const ConversationsView(
      enableSearchBar: false,
    );
  }

默认 AppBar 更多按钮点击回调

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      // 返回 List<ChatUIKitBottomSheetItem> 类型的数据, 用于显示更多操作
      appBarMoreActionsBuilder: (context, items) {
        return items;
      },
    );
  }

默认 AppBar 标题显示

  @override
  Widget build(BuildContext context) {
    return const ConversationsView(
      title: 'Conversations',
    );
  }

默认 AppBar 左侧显示内容

  @override
  Widget build(BuildContext context) {
    return const ConversationsView(
      appBarLeading: Text('back'),
    );
  }

添加默认 AppBar 右侧按钮

  @override
  Widget build(BuildContext context) {
    return ConversationsView(
      // defaultList: List<ChatUIKitAppBarTrailingAction> 类型的数据, 默认的更多按钮点击事件列表
      // 返回 List<ChatUIKitAppBarTrailingAction> 类型的数据
      appBarTrailingActionsBuilder: (context, defaultList) {
        return defaultList;
      },
    );
  }

ConversationsView.arguments()

通过arguments的构造主要用于路由跳转时，当uikit内部进行页面跳转时，可以通过 RouteSettings 得到 arguments，你可以对它进行赋值和定义，之后将它重新放到 RouteSettings 中并返回。 这样在跳转到的新页面就会按照你设置的 arguments 就行创建。 当然，也允许直接使用 arguments 进行页面构造，下面将介绍如何直接使用 arguments 进行构造和自定义。

  ConversationsViewArguments({
    this.controller,
    this.appBar,
    this.onSearchTap,
    this.beforeWidgets,
    this.afterWidgets,
    this.listViewItemBuilder,
    this.onTap,
    this.onLongPressHandler,
    this.searchBarHideText,
    this.listViewBackground,
    this.enableAppBar = true,
    this.appBarMoreActionsBuilder,
    this.enableSearchBar = true,
    this.title,
    this.appBarLeading,
    this.viewObserver,
    this.attributes,
    this.appBarTrailingActionsBuilder,
  });

自定义列表显示

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        // 返回要显示的内容，model 为 ConversationItemModel 对象，包含了会话中的各种属性。
        listViewItemBuilder: (context, model) {
          return ListTile(
            title: Text(model.profile.showName),
          );
        },
      ),
    );
  }

自定义展示在列表前的数据

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        beforeWidgets: [
          Container(
            padding: const EdgeInsets.all(4),
            color: Colors.lightBlue,
            child: const Text('网络不佳'),
          )
        ],
      ),
    );
  }

自定义展示在列表后的数据

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        afterWidgets: [
          Container(
            padding: const EdgeInsets.all(4),
            color: Colors.lightBlue,
            child: const Text('无更多会话'),
          )
        ],
      ),
    );
  }

点击搜索框

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        // data 是当前所有的会话数据
        onSearchTap: (data) {
          debugPrint('onSearchTap');
        },
      ),
    );
  }

搜索框默认文字

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        searchBarHideText: '搜索本地会话',
      ),
    );
  }

列表为空时的背景

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        listViewBackground: Container(
          color: Colors.red,
        ),
      ),
    );
  }

列表点击事件

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        // model: 被操作的会话数据
        onTap: (context, model) {
          debugPrint('onTap: $model');
        },
      ),
    );
  }

列表长按事件

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        // model: 被操作的会话数据
        // defaultActions: 默认的弹出菜单项
        // return: 返回调整后的弹出菜单项
        onLongPressHandler: (context, model, defaultActions) {
          return defaultActions;
        },
      ),
    );
  }

自定义 AppBar

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        appBar: const ChatUIKitAppBar(),
      ),
    );
  }

自定义控制器

  final ConversationListViewController controller = ConversationListViewController();

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        controller: controller,
      ),
    );
  }

是否显示 AppBar

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        enableAppBar: false,
      ),
    );
  }

是否显示搜索框

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        enableSearchBar: false,
      ),
    );
  }

默认 AppBar 更多按钮点击回调

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        // 返回 List<ChatUIKitBottomSheetItem> 类型的数据, 用于显示更多操作
        appBarMoreActionsBuilder: (context, items) {
          return items;
        },
      ),
    );
  }

默认 AppBar 标题显示

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        title: 'Conversations',
      ),
    );
  }

默认 AppBar 左侧显示内容

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        appBarLeading: const Text('back'),
      ),
    );
  }

添加默认 AppBar 右侧按钮

  @override
  Widget build(BuildContext context) {
    return ConversationsView.arguments(
      ConversationsViewArguments(
        // defaultList: List<ChatUIKitAppBarTrailingAction> 类型的数据, 默认的更多按钮点击事件列表
        // 返回 List<ChatUIKitAppBarTrailingAction> 类型的数据
        appBarTrailingActionsBuilder: (context, defaultList) {
          return defaultList;
        },
      ),
    );
  }
Clone this wiki locally