纯血鸿蒙组件库AUI：图片列表 原创

摘要：
图片列表(A_ImageList)：关键属性为图片数据(支持远程图片和本地资源)，可选板块标题。手机每行显示一张图片，折叠屏每行2图，平板一行显示4图。

1.将图片列表组件拖拽到页面排版区域，如下图所示，是PC模式下的预览效果，一行显示4张图片，如有更多图片，会自动换行展示：

将图片列表组件拖拽到页面排版区

将页面设计预览器切换到手机模式，可以看到图片列表在手机模式下每行显示一张图片：

折叠屏模式下，每行显示两张图片：

平板模式和车机模式下，每行显示四张图片，如果图片列表有更多图片，则自动换行显示：

切换到深色模式，以车机为例，效果如下：

2.图片列表的数据源由后端接口提供，所以需要指定后端API接口，在右侧“属性设置”面板中，点击图片列表组件中“绑定接口”后面的绑定图标，如下图所示：

选择为图片列表提供数据源的列表接口，然后点击“确认”按钮。

3.保存设置。如果该图片列表不需要标题(如，热图精选)，那么清空“板块标题”属性中的文字即可，如下图所示：

1.1清空文字即可隐藏标题
1.2保存数据

生成鸿蒙代码：

为了便于演示，现在直接使用Json数据模拟从后端获得的数据源，正式项目中，后端人员需要按照下面给出的数据结构提供图片列表需要的数据：

  GridCol({ span: 12 }) {
              A_ImageList({
                data: [
                  { src: 'https://cdn.aigcoder.com/sample/ImageList/pic1.jpeg', router: 'AccountPage' },
                  { src: 'https://cdn.aigcoder.com/sample/ImageList/pic2.jpeg', router: 'OrderDetail/2' },
                  { src: 'https://cdn.aigcoder.com/sample/ImageList/pic3.png', router: '' },
                  { src: 'https://cdn.aigcoder.com/sample/ImageList/pic4.jpeg', router: '' }
                ]
              })
            }

以下分别为图片列表组件在平板、折叠屏、手机，以及在浅色模式和深色模式下的表现：


图片列表组件各属性字段解释如下：

/**
 * 【图片列表】
 * data：图片数据(支持远程图片和本地资源)
 * title：板块标题
 * 图片尺寸建议：825 * 354
 */
@Component
export struct A_ImageList {
  @Prop data: Array<ImageModel>
  @Prop title?: string