--- title: 添加以下内容：关注者列表功能 slug: world-sdk-guide-ch/tpBEE2nziCENeh1c4TRQy docTags: createdAt: 2024-09-02T08:34:13.135Z --- 使用ZEPETO.Module的社交API，世界创作者可以加载用户的好友列表。 世界创作者还可以关注新用户或取消关注他们之前关注的用户。 ## 如何安装 请首先安装窗口 → 包管理器 → ZEPETO.World包版本1.21.0或更高版本。 然后，安装ZEPETO.Module包。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Wz2C2dqGFGqCbVVSSIPMd-20240904-102425.png) ## 使用弹出好友列表预制件 ZEPETO.Module包提供UI预制件，方便您轻松创建关注/粉丝列表。 1\) 在项目面板中，转到包 > ZEPETO.Module > 社交 > 运行时 > UI > \_资源 > 预制件文件夹。 2\) 从文件夹中的预制件中，将FollowScrollView\.prefab拖放到场景中。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-O4iKxlFAR1PnhIB3tihQo-20240904-102425.png) :::hint{type="danger"} **❗️ 注意** 当场景中不存在EventSystem对象时，此功能可能无法正常运行。通过转到GameObject > UI > EventSystem添加该对象。 ::: 3\) 点击播放按钮以查看好友列表弹出窗口出现在屏幕上。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-wuTuSReoqVNrJL8dKL9Be-20240904-102424.png) - FollowScrollView\.prefab，创建好友列表弹出窗口，使用FollowScrollView组件加载并显示屏幕上的好友列表和总用户数。 - 在FollowScrollView组件中配置的信息如下。 ### 跟随滚动视图组件 | 1 | 高度 | 滚动视图中用户信息单元格之间的垂直距离的值 | | - | ------- | ------------------------------------------------ | | 2 | 加载计数 | 单元格加载计数：当滚动视图滚动时加载的单元格数据的数量。为此值配置较高的数字可能会影响加载速度。 | | 3 | 用户信息预制件 | 用于显示用户信息的单个单元格的UI预制件 | | 4 | 总计数预制件 | 显示总用户计数的预制件。文本可以自动翻译并以多种语言显示。 | | 5 | 画布缩放器 | 可以选择好友列表UI的画布外观。可以使用预制的画布。 | | 6 | 垂直 | 注册垂直屏幕UI预制件，包括关注视图控制器。 | | 7 | 水平 | 注册水平屏幕UI预制件，包括关注视图控制器。 | | 8 | 背景 | 当好友列表UI显示时出现的半透明黑屏 | ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Rs2UaG2rdrjme7GvMZ7Ci-20240904-102424.png) 当通过 FollowScrollView 生成好友列表时，如果世界屏幕处于横向模式，则应用 FollowScrollView\_Landscape。 - 当屏幕处于纵向模式时，应用 FollowScrollView\_Portrait。 - 应用于 FollowScrollView\_Landscape 和 FollowScrollView\_Portrait 的 FollowView Controller 组件中配置的信息如下。 ### 跟随视图组件 | 1 | 关注者标签 | 关注者标签组 | | -- | ------ | ----------------------- | | 2 | 正在关注标签 | 正在关注标签组 | | 3 | 滚动条 | 好友列表滚动视图 | | 4 | 空图像 | 好友列表为空时显示的图像 | | 5 | 加载旋转器 | 好友列表加载时显示的图像 | | 6 | 关闭按钮 | 关闭好友列表弹出窗口的按钮 | | 7 | 标题 | 好友列表弹出窗口的标题 | | 8 | 关注者 | 用于显示关注者面板的活动/隐藏状态的按钮文本 | | 9 | 正在关注 | 用于显示正在关注面板的活动/隐藏状态的按钮文本 | | 10 | 空文本 | 好友列表为空时显示的文本。 | | 11 | 面板 | 整个用户界面面板 | ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-f_av14jLQGwf9i4eoDQKa-20240904-102425.png) 如下所示，显示朋友信息的单元格应用了关注单元格视图和用户信息单元格视图组件。每个组件中的信息如下。 ### 用户信息单元视图组件 | 1 | 视图名称 | 用户名文本 | | - | ------ | -------- | | 2 | 查看个人资料 | 用户头像 | | 3 | 关注按钮 | 关注用户按钮 | | 4 | 取消关注按钮 | 取消关注用户按钮 | | 5 | 查看徽章 | 徽章图标图像 | | 6 | 查看迎宾徽章 | 迎宾图标图像 | | 7 | 查看关注 | 关注按钮文本 | | 8 | 查看正在关注 | 取消关注按钮文本 | ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-wgpc9WgekaAgCz8nEB1NY-20240904-102425.png) :::hint{type="success"} 👍 **提示** - ZEPETO 文本继承自 UnityEngine\_UI.Text，并为世界中的 UI 便利性提供了一些附加功能。文本可以在 FollowScrollView Prefab 编辑模式中轻松编辑。 - 显示在用户名旁边的徽章图标用于标记特殊用户，例如 ZEPETO 创作者和迎宾员。 ::: ## 修改好友列表弹出窗口预制 UI 您可以通过修改 UI 元素来自定义好友列表。 在 Packages 中选择一个预制件，并将其拖放到 Assets 文件夹中以复制该预制件。 ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-ld8TafVCthzl4LCNJOgBE-20240904-102425.png) :::hint{type="success"} **👍 提示** 预制件在 Packages 文件夹中无法修改，但一旦复制到 Assets 文件夹的子文件夹中，就可以进行修改。 :::