快速入门页面布局

entry/src/main/ets/pages/Index.ets

@@ -1,3 +1,31 @@
+class BannerClass {
+  id: string = '';
+  imageSrc: ResourceStr = '';
+  url: string = '';
+
+  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 QuickStartPage {
@@ -11,7 +39,19 @@ struct QuickStartPage {
         .width('100%')
         .textAlign(TextAlign.Start)
         .margin({left: 16})
-      Banner()
+      Scroll() {
+        Column() {
+          Banner()
+          EnablementView()
+          TutorialView()
+        }
+      }
+      .layoutWeight(1)
+      .scrollBar(BarState.Off)
+      .align(Alignment.TopStart)
+      .layoutWeight(1)
+      .scrollBar(BarState.Off)
+      .align(Alignment.TopStart)
     }
     .height('100%')
     .width('100%')
@@ -22,8 +62,210 @@ struct QuickStartPage {
 @Preview
 @Component
 struct Banner {
+  @State bannerList: Array<BannerClass> = [
+    new BannerClass('pic0', $r('app.media.banner'),
+      'https://developer.huawei.com/consumer/cn/training/course/video/C101718352529709527'),
+    new BannerClass('pic1', $r('app.media.banner'),
+      'https://developer.huawei.com/consumer/cn/'),
+    new BannerClass('pic2', $r('app.media.banner'),
+      'https://developer.huawei.com/consumer/cn/deveco-studio/'),
+    new BannerClass('pic3', $r('app.media.banner'),
+      'https://developer.huawei.com/consumer/cn/arkts/'),
+  ];
+
+  build() {
+    Swiper() {
+      ForEach(this.bannerList, (item: BannerClass, index: number) => {
+        Image(item.imageSrc)
+          .objectFit(ImageFit.Contain)
+          .width('100%')
+          .padding({ top: 11, left: 16, right: 16 })
+          .borderRadius(16)
+      }, (item: BannerClass, index: number) => item.id)
+    }
+    .autoPlay(true)
+    .loop(true)
+    .indicator(
+      new DotIndicator()
+        .color('#1a000000')
+        .selectedColor('#0A59F7'))
+  }
+}
+
+@Preview
+@Component
+struct EnablementItem {
+  @Prop enablementItem: ArticleClass;
+
+  build() {
+    Column() {
+      Image(this.enablementItem.imageSrc)
+        .width('100%')
+        .objectFit(ImageFit.Cover)
+        .height(96)
+        .borderRadius({
+          topLeft: 16,
+          topRight: 16
+        })
+      Text(this.enablementItem.title)
+        .height(19)
+        .width('100%')
+        .fontSize(14)
+        .textAlign(TextAlign.Start)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+        .maxLines(1)
+        .fontWeight(400)
+        .padding({ left: 12, right: 12 })
+        .margin({ top: 8 })
+      Text(this.enablementItem.brief)
+        .height(32)
+        .width('100%')
+        .fontSize(12)
+        .textAlign(TextAlign.Start)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+        .maxLines(2)
+        .fontWeight(400)
+        .fontColor('rgba(0, 0, 0, 0.6)')
+        .padding({ left: 12, right: 12 })
+        .margin({ top: 2 })
+    }
+    .width(160)
+    .height(169)
+    .borderRadius(16)
+    .backgroundColor(Color.White)
+
+  }
+}
+
+@Preview
+@Component
+struct TutorialItem {
+  @Prop tutorialItem: ArticleClass;
+
   build() {
-    Image($r('app.media.banner'))
-      .objectFit(ImageFit.Contain)
+    Row() {
+      Column() {
+        Text(this.tutorialItem.title)
+          .height(19)
+          .width('100%')
+          .fontSize(14)
+          .textAlign(TextAlign.Start)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .maxLines(1)
+          .fontWeight(400)
+          .margin({ top: 4 })
+        Text(this.tutorialItem.brief)
+          .height(32)
+          .width('100%')
+          .fontSize(12)
+          .textAlign(TextAlign.Start)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .maxLines(2)
+          .fontWeight(400)
+          .fontColor('rgba(0, 0, 0, 0.6)')
+          .margin({ top: 5 })
+      }
+      .height('100%')
+      .layoutWeight(1)
+      .alignItems(HorizontalAlign.Start)
+      .margin({ right: 12 })
+
+      Image(this.tutorialItem.imageSrc)
+        .objectFit(ImageFit.Cover)
+        .height(64)
+        .width(108)
+        .borderRadius(16)
+    }
+    .width('100%')
+    .height(88)
+    .borderRadius(16)
+    .backgroundColor(Color.White)
+    .padding(12)
+    .alignItems(VerticalAlign.Top)
   }
-}
+}
+
+@Component
+struct EnablementView {
+  @State enablementList: Array<ArticleClass> = [
+    new ArticleClass('1', $r('app.media.banner'), 'HarmonyOS第一课',
+      '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。',
+      'https://developer.huawei.com/consumer/cn/doc/harmonyos-video-courses/video-tutorials-0000001443535745'),
+    new ArticleClass('2', $r('app.media.banner'), '开发指南',
+      '提供系统能力概述、快速入门，用于指导开发者进行场景化的开发。指南涉及到的知识点包括必要的背景知识、符合开发者实际开发场景的操作任务流（开发流程、开发步骤、调测验证）以及常见问题等。',
+      'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guide-0000001630265101'),
+    new ArticleClass('3', $r('app.media.banner'), '最佳实践',
+      '针对新发布特性及热点特性提供详细的技术解析和开发最佳实践。',
+      'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/topic-architecture-0000001678045510'),
+    new ArticleClass('4', $r('app.media.banner'), 'Codelabs',
+      '以教学为目的的代码样例及详细的开发指导，帮助开发者一步步地完成指定场景的应用开发并掌握相关知识。Codelabs将最新的鸿蒙生态应用开发技术与典型场景结合，让开发者快速地掌握开发高质量应用的方法。同时支持互动式操作，通过文字、代码和效果联动为开发者带来更佳的学习体验。',
+      'https://developer.huawei.com/consumer/cn/doc/harmonyos-codelabs/codelabs-0000001443855957'),
+  ];
+
+  build() {
+    Column() {
+      Text('赋能套件')
+        .fontColor('#182431')
+        .fontSize(16)
+        .fontWeight(500)
+        .fontFamily('HarmonyHeiTi-medium')
+        .textAlign(TextAlign.Start)
+        .padding({ left: 16 })
+        .margin({ top: 12,bottom: 8.5 })
+        .alignSelf(ItemAlign.Start)
+      Grid() {
+        ForEach(this.enablementList, (item: ArticleClass) => {
+          GridItem() {
+            EnablementItem({ enablementItem: item })
+          }
+        }, (item: ArticleClass) => item.id)
+      }
+      .rowsTemplate('1fr')
+      .columnsGap(8)
+      .scrollBar(BarState.Off)
+      .height(169)
+      .padding({ top: 2, left: 16, right: 16 })
+    }
+  }
+}
+
+@Component
+struct TutorialView  {
+  @State tutorialList: Array<ArticleClass> = [
+    new ArticleClass('1', $r('app.media.banner'), 'HarmonyOS第一课',
+      '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。',
+      'https://developer.huawei.com/consumer/cn/doc/harmonyos-video-courses/video-tutorials-0000001443535745'),
+    new ArticleClass('2', $r('app.media.banner'), '开发指南',
+      '提供系统能力概述、快速入门，用于指导开发者进行场景化的开发。指南涉及到的知识点包括必要的背景知识、符合开发者实际开发场景的操作任务流（开发流程、开发步骤、调测验证）以及常见问题等。',
+      'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guide-0000001630265101'),
+    new ArticleClass('3', $r('app.media.banner'), '最佳实践',
+      '针对新发布特性及热点特性提供详细的技术解析和开发最佳实践。',
+      'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/topic-architecture-0000001678045510'),
+    new ArticleClass('4', $r('app.media.banner'), 'Codelabs',
+      '以教学为目的的代码样例及详细的开发指导，帮助开发者一步步地完成指定场景的应用开发并掌握相关知识。Codelabs将最新的鸿蒙生态应用开发技术与典型场景结合，让开发者快速地掌握开发高质量应用的方法。同时支持互动式操作，通过文字、代码和效果联动为开发者带来更佳的学习体验。',
+      'https://developer.huawei.com/consumer/cn/doc/harmonyos-codelabs/codelabs-0000001443855957'),
+  ];
+
+  build() {
+    Column() {
+      Text('入门教程')
+        .fontColor('#182431')
+        .fontSize(16)
+        .fontWeight(500)
+        .fontFamily('HarmonyHeiTi-medium')
+        .textAlign(TextAlign.Start)
+        .padding({ left: 16 })
+        .margin({ top: 12,bottom: 8.5 })
+        .alignSelf(ItemAlign.Start)
+      List({ space: 12 }) {
+        ForEach(this.tutorialList, (item: ArticleClass) => {
+          ListItem() {
+            TutorialItem({ tutorialItem: item })
+          }
+        }, (item: ArticleClass) => item.id)
+      }
+      .scrollBar(BarState.Off)
+      .padding({ left: 16, right: 16 })
+    }
+  }
+}