HarmonyOS应用开发快速入门(4)：组件/Grid组合GridItem，网格布局，组件/List，@Prop接收数据

src/main/resources/base/media/多项资源

src/main/ets/pages/Index.ets

class BannerClass {  // 横幅类
  id: string = '';  // 字符串/编号
  imageSrc: ResourceStr = '';  // 资源字符串/图片来源
  url: string = '';  // 字符串/URL

  constructor(id: string, imageSrc: ResourceStr, url: string) {
    this.id = id;
    this.imageSrc = imageSrc;
    this.url = url;
  }
}
class ArticleClass {  // 文章类
  id: string = '';
  imageSrc: ResourceStr = '';
  title: string = '';
  brief: string = '';
  webUrl: string = '';

  constructor(id: string, imageSrc: ResourceStr, title: string, brief: string, webUrl: string) {
    this.id = id;
    this.imageSrc = imageSrc;
    this.title = title;
    this.brief = brief;
    this.webUrl = webUrl;
  }
}

@Entry
@Component
struct Index {  // 结构/索引
  @State message: string = '快速入门';  // 变量/消息

  build() {
    Column() {  // 列方向铺展的对象
      Text(this.message)
        .fontSize(24)  // 字体大小
        .fontWeight(700)  // 笔画粗细
        .width('100%')  // 对象的容器的相对宽度
        .textAlign(TextAlign.Start)  // 对齐方式
        .padding({ left: 16 })  // 对象的内部的左侧的填充
        .fontFamily('HarmonyHeiTi-Bold')  // 字体
        .lineHeight(30)  // 自上向下的行高
      Scroll() {
        Column() {
          Banner()
          EnablementView()
          TutorialView()
        }
      }
      .layoutWeight(1)
      .scrollBar(BarState.Off)
      .align(Alignment.TopStart)
    }
    .height('100%')  // 对象的容器的相对高度
    .width('100%')
    .backgroundColor('#F1F3F5') // 背景色
  }
}

@Preview
@Component
struct Banner {
  @State bannerList: Array = [  // 数组/横幅类
    new BannerClass('pic0', $r('app.media.banner_pic0'),  // 类的实例化
      'https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527'),
    new BannerClass('pic1', $r('app.media.banner_pic1'),
      'https://developer.huawei.com/consumer/cn/'),
    new BannerClass('pic2', $r('app.media.banner_pic2'),
      'https://developer.huawei.com/consumer/cn/deveco-studio/'),
    new BannerClass('pic3', $r('app.media.banner_pic3'),
      'https://developer.huawei.com/consumer/cn/arkts/'),
    new BannerClass('pic4', $r('app.media.banner_pic4'),
      'https://developer.huawei.com/consumer/cn/arkui/'),
    new BannerClass('pic5', $r('app.media.banner_pic5'),
      'https://developer.h