纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）原创

鸿蒙开发之南拳北腿

发布于 2025-4-11 14:36

浏览

0收藏

1.将轮播图组件从组件库拖拽到页面排版区域：

1.1：将轮播图组件拖拽到页面排版区

和图片列表不同，轮播图组件无论图片多少，永远显示为一行。如果共有四张图片轮播，那么，手机上每次显示一张图片，分四次轮播；如果在折叠屏上展示，每次展示两张图片；平板上每次展示4张图片。
纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区

2.配置数据：

2.1：点击“配置数据”按钮，配置轮播内容和跳转的页面路由
2.2：可以添加更多轮播图
2.3：可以上下拖动排序
2.4：可以删除轮播项
纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区

3.请展开每个轮播项，分别配置实际轮播图地址和跳转页面的路由：

注意，不能使用初始化示范数据中的“/home”路由，这是不存在的页面，在生成代码时会无法通过有效性检查，从而导致生成鸿蒙代码失败。下拉列表中已展示了您已有的页面，根据需要绑定有效的页面。如果不希望用户点击轮播图时跳转页面，那么可新增轮播项，默认路由为空，仅设置轮播图，这样的轮播项也是合格的，不会导致生成代码失败。

展开每个配置项，根据您的业务需要，替换展示的轮播图地址，绑定路由页面。
纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区
生成鸿蒙代码：

  GridCol({ span: 12 }) {
              A_Swiper({
                data: [
                  { src: 'https://cdn.aigcoder.com/sample/Swiper/pic1.png', router: 'HomeHome' },
                  { src: 'https://cdn.aigcoder.com/sample/Swiper/pic2.png', router: 'HomeLife' },
                  { src: 'https://cdn.aigcoder.com/sample/Swiper/pic3.png', router: '' },
                  { src: 'https://cdn.aigcoder.com/sample/Swiper/pic4.jpeg', router: '' }
                ]
              })
            }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

以下分别为轮播图组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：
纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区

摘要：
头像组件(A_Avatar)：支持使用图片、图标或文本形成头像，可设置头像大小，可设置圆形或方形头像，可设置背景色。

调用示例一：图标式头像

提示：mdi图标库的获得方式：https://pictogrammers.com/library/mdi/
1.将头像组件拖拽到排版区
2.头像类型：图标；设置mdi图标
3.保存设置
纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区

调用示例二：图片式头像

1.将头像组件拖拽到排版区
2.头像选择类型图片，组件值设置为一个图片的地址
3.保存设置
纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区

调用示例三：文字头像。组件值仅支持一个英文字母或中文汉字。

1.将头像组件拖拽到排版区
2.头像类型：文本;组件值：输入一个字母，如：A
3.保存设置
纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区

调用示例四：样式参数。设置头像大小、方形头像、背景颜色

纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区

调用示例五：绑定动态数据

比如，在用户个人资料页面，用户的头像需要动态绑定从后端查询的字段参数上。
纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区

生成纯血鸿蒙代码：

 GridCol({ span: 4 }) {
              A_Avatar({
                color: ColorConstants.INFO,
                icon: 'mdi-account'
              })
            }

            GridCol({ span: 4 }) {
              A_Avatar({
                src: 'https://cdn.aigcoder.com/sample/Avatar/avatar3.jpeg'
              })
            }

            GridCol({ span: 4 }) {
              A_Avatar({
                color: ColorConstants.INFO,
                text: 'A'
              })
            }

            GridCol({ span: 4 }) {
              A_Avatar({
                avatarSize: 60,
                circle: false,
                color: ColorConstants.SUCCESS,
                icon: 'mdi-account'
              })
            }

            GridCol({ span: 4 }) {
              A_Avatar({
                src: this.user.avatar
              })
            }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

以下分别为头像组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：
纯血鸿蒙组件库AUI：媒体组件（轮播图组件和头像组件）-鸿蒙开发者社区

头像组件各属性字段解释如下：

/**
 * 【头像】
 * src：头像图片
 * icon：图标(可选)
 * text：文本(可选)
 * avatarSize：头像大小
 * circle：圆形
 * color：背景色
 */
@Component
export struct A_Avatar {
  @Prop src: string
  @Prop icon: string
  @Prop text: string
  @Prop avatarSize: number = 48
  @Prop circle: boolean = true
  @Prop color: ResourceStr = ColorConstants.INFO
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.