重生之我在大学自学鸿蒙开发第一天-《基础篇》

●VON2025-10-13 12:02

目录

​编辑

一、前言

二、实践

2.1、启动helloworld

2.2、自定义文本视图

2.3、Img图片的引用

2.4、Banner位设计

2.4.1、先定义一个类

2.4.2、创建一个数组

2.4.3、完整代码展示

2.5、Item视图设计

2.5.1、EnablementItem组件

2.5.2、TutorialItem组件

2.6、文章页面设计

2.6.1、先定义文章类

2.6.2、实现赋能套件区域

成果展示

改造逻辑分析

2.6.3、列表布局

成果展示

改造逻辑分析

三、整体源码展示

一、前言

最近一直在写项目，导致博客一直没有更新，时隔近两个月再度回归，本期的专栏是开源鸿蒙，虽然去年暑假写过该系列文章，但是并没有系统的去学习，而且也忘得差不多了。所以今天重新开始学习鸿蒙，第一阶段先看文档进行学习，实现真正意义上的从零到一。如果有意向的小伙伴也可以和我进行同步学习。

二、实践

软件安装部分就不过多简述了，我这里使用的是最新版本6.0.0，直接无脑安装就可以了，比之前的简化太多了。

2.1、启动helloworld

创建一个空项目会自动生成Hello World，这里点击右侧的预览即可查看

看上述布局和我们的vue3其实也差不多，至少目前为止我感觉挺友好的页面，可以进行实时观测。

我这里的学习网页是下面这个链接，直接点击即可进行学习！！！

开发入门：Hello World-HarmonyOS应用开发快速入门-Codelabs-华为开发者联盟

2.2、自定义文本视图

这里用红色的更明显一些，其实和vue差不多。

2.3、Img图片的引用

这里图片的引用有点不同，单独将图片提取出来了，这里应该可以直接在里面定义，这里的图片是我自己在网上找的，并不是严格按照教程操作的。

2.4、Banner位设计

这里是一个类似轮播图的样式，这里用到了循环来进行渲染

接下来讲解一下设计思路

2.4.1、先定义一个类

这里定义的时候和官网保持一致了，其实传入2个参数就够了，因为url无法演示，这里类的创建和java类似。

html 复制代码 
class BannerClass{
  id : string='';
  imageSrc : ResourceStr='';
  url : string = 'https://blog.csdn.net/2302_80329073?type=blog';
  constructor(id : string,imageSrc : ResourceStr,url : string) {
    this.id = id;
    this.imageSrc = imageSrc;
    this.url = url;
  }
}

2.4.2、创建一个数组

因为foreach接收的是一个数组所以我们将创建一个BannerClass类的数组，这里展示五张图片，也都是我从网上找的图片。

html 复制代码 
 @State bannerList:Array<BannerClass> = [
    new BannerClass('img01',$r('app.media.img01'),
      ''
    ),
    new BannerClass('img02',$r('app.media.img02'),
    ''
    ),
    new BannerClass('img03',$r('app.media.img03'),
    ''
    ),
    new BannerClass('img04',$r('app.media.img04'),
    ''
    ),
    new BannerClass('img05',$r('app.media.img05'),
    ''
    )
  ]

将图片改为轮播图的形式进行展示，这里的Swiper就是轮播图组件，因为我找的图片大小不一致所以统一了一下高度方便大家观看，使得轮播图更加美观。

html 复制代码 
build() {
    Swiper(){
      ForEach(this.bannerList,(item:BannerClass,index:number)=>{
        Image(item.imageSrc)
          .objectFit(ImageFit.Contain)
          .width('100%')
          .height(260)
          .padding({top:11,left:16,right:16})
          .borderRadius(16)
      },(item:BannerClass,index:number)=>item.id)
    }
    .autoPlay(true)
    .loop(true)
    .indicator(
      new DotIndicator()
        .color('#f1f1f1')
        .selectedColor('red')
    )

autoPlay控制是否自动轮播子组件，loop属性控制是否循环播放，indicator属性自定义导航点的位置和样式。

2.4.3、完整代码展示

完整的Banner代码如下👇

html 复制代码 
@Preview
@Component
struct Banner{
  @State bannerList:Array<BannerClass> = [
    new BannerClass('img01',$r('app.media.img01'),
      ''
    ),
    new BannerClass('img02',$r('app.media.img02'),
    ''
    ),
    new BannerClass('img03',$r('app.media.img03'),
    ''
    ),
    new BannerClass('img04',$r('app.media.img04'),
    ''
    ),
    new BannerClass('img05',$r('app.media.img05'),
    ''
    )
  ]
  build() {
    Swiper(){
      ForEach(this.bannerList,(item:BannerClass,index:number)=>{
        Image(item.imageSrc)
          .objectFit(ImageFit.Contain)
          .width('100%')
          .height(260)
          .padding({top:11,left:16,right:16})
          .borderRadius(16)
      },(item:BannerClass,index:number)=>item.id)
    }
    .autoPlay(true)
    .loop(true)
    .indicator(
      new DotIndicator()
        .color('#f1f1f1')
        .selectedColor('red')
    )
  }
}

2.5、Item视图设计

整体的设计是这样的，类似一个卡片组件，我这里就为了大家的观赏性直接安排美女卡片。这里和官网保持一致，将常用的Item组件给大家展示下，为了方便我这里直接套用官方的样式了。

2.5.1、EnablementItem组件

组件大致组成如下👇

废话不多说直接开始。

这里的位置没有调整，可以将卡片放到适当的位置进行展示。这段代码没有什么技术含量，可以将它当成基础的前端代码分析

html 复制代码 
@Preview
@Component
struct EnablementItem{
  private title : string = 'VON的女朋友';
  private brief : string = '她垂眸整理发梢时，耳后碎发随呼吸轻轻晃动，眼底盛着的柔光像浸了温水的棉絮，连说话时尾音的弧度都透着软乎乎的暖意。';
  build() {
    Column(){
      Image($r('app.media.Item_img01'))
        .width('100%')
        .objectFit(ImageFit.Cover)
        .height(96)
        .borderRadius({
          topLeft:16,
          topRight:16
        })
      Text(this.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.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)
  }
}

就是简单的变量的调用以及修饰

2.5.2、TutorialItem组件

这里的代码逻辑差不多，主要是样式的选择，这里可以看一下简化版本的排版大概就是这样子的排布，文本Column，文本整体和图片间是Row

html 复制代码 
@Preview
@Component
struct TutorialItem {
  private title : string = 'VON的女朋友';
  private brief : string = '阳光落在她眼尾的碎钻耳钉上，折射出的光点刚好缀在她笑起时的梨涡里，抬眼时眼波流转，像把盛夏的星光都揉进了眼底。';
  build() {
    Row(){
      Column() {
        Text(this.title)
          .height(19)
          .width('100%')
          .fontSize(14)
          .textAlign(TextAlign.Start)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .maxLines(1)
          .fontWeight(400)
          .margin({ top: 4 })
        Text(this.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($r('app.media.Item_img02'))
        .objectFit(ImageFit.Cover)
        .height(64)
        .width(108)
        .borderRadius(16)
    }
    .width('100%')
    .height(88)
    .borderRadius(16)
    .backgroundColor(Color.White)
    .padding(12)
    .alignItems(VerticalAlign.Top)
    .margin({top: 20})
  }
}

2.6、文章页面设计

2.6.1、先定义文章类

html 复制代码 
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;
  }
}

不知道为什么他给了这两个方法，但是好像并没有应用，估计后面会进行应用，等会再回来进行补充说明。

补充说明：这里是便于后面进行改造

html 复制代码 
@Component
struct EnablementView {
  @State enablementList: Array<ArticleClass> = [
    new ArticleClass('1', $r('app.media.Item_img01'), 'HarmonyOS第一课',
      '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-video-courses/video-tutorials-0000001443535745'),
    new ArticleClass('2', $r('app.media.Item_img01'), '开发指南',
      '提供系统能力概述、快速入门，用于指导开发者进行场景化的开发。指南涉及到的知识点包括必要的背景知识、符合开发者实际开发场景的操作任务流（开发流程、开发步骤、调测验证）以及常见问题等。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guide-0000001630265101'),
    new ArticleClass('3', $r('app.media.Item_img01'), '最佳实践',
      '针对新发布特性及热点特性提供详细的技术解析和开发最佳实践。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/topic-architecture-0000001678045510'),
    new ArticleClass('4', $r('app.media.Item_img01'), 'Codelabs',
      '以教学为目的的代码样例及详细的开发指导，帮助开发者一步步地完成指定场景的应用开发并掌握相关知识。Codelabs将最新的鸿蒙生态应用开发技术与典型场景结合，让开发者快速地掌握开发高质量应用的方法。同时支持互动式操作，通过文字、代码和效果联动为开发者带来更佳的学习体验。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-codelabs/codelabs-0000001443855957'),
    new ArticleClass('5', $r('app.media.Item_img01'), 'Sample',
      '面向不同类型的开发者提供的鸿蒙生态应用开发优秀实践，每个Sample Code都是一个可运行的工程，为开发者提供实例化的代码参考。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-samples/samples-0000001162414961'),
    new ArticleClass('6', $r('app.media.Item_img01'), 'API参考',
      '面向开发者提供鸿蒙系统开放接口的全集，供开发者了解具体接口使用方法。API参考详细地描述了每个接口的功能、使用限制、参数名、参数类型、参数含义、取值范围、权限、注意事项、错误码及返回值等。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-references/development-intro-0000001580026066'),
    new ArticleClass('7', $r('app.media.Item_img01'), 'FAQ',
      '开发者常见问题的总结，开发者可以通过FAQ更高效地解决常见问题。FAQ会持续刷新，及时呈现最新的常见问题。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-development-0000001753952202'),
    new ArticleClass('8', $r('app.media.Item_img01'), '开发者论坛', '和其他应用开发者交流技术、共同进步。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
  ];

  build() {
    // ...
  }
}

@Component
struct TutorialView {
  @State tutorialList: Array<ArticleClass> = [
    new ArticleClass('1', $r('app.media.Item_img02'), 'Step1 环境的搭建',
      '本篇教程实现了快速入门------一个用于了解和学习HarmonyOS的应用程序。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('2', $r('app.media.Item_img02'), 'Step2 使用Swiper构建运营广告位',
      'Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('3', $r('app.media.Item_img02'), 'Step3 创建和组合视图',
      'Item定义子组件相关特征。相关组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('4', $r('app.media.Item_img02'), 'Step4 网格和列表组建的使用',
      '网格和列表组件中，当Item达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能，适合用于呈现同类数据类型或数据类型集',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('5', $r('app.media.Item_img02'), 'Step5 应用架构设计基础------MVVM模式',
      'ArkUI采取MVVM = Model + View + ViewModel模式，将数据与视图绑定在一起，更新数据的时候直接更新视图。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('6', $r('app.media.Item_img02'), 'Step6 应用架构设计基础------三层架构',
      '为了更好地适配复杂应用的开发，建议采用三层架构的方式对整个应用的功能进行模块化，实现高内聚、低耦合开发。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('7', $r('app.media.Item_img02'), 'Step7 ArkWeb页面适配',
      'ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('8', $r('app.media.Item_img02'), 'Step8 数据驱动UI更新', '数据更新的同时会直接驱动UI的改变',
      'xxx'),
    new ArticleClass('9', $r('app.media.Item_img02'), 'Step9 设置组件导航',
      'Navigation组件适用于模块内页面切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('10', $r('app.media.Item_img02'), 'Step10 原生智能：AI语音朗读',
      '文本转语音服务提供将文本信息转换为语音并进行播报的能力，便于用户与设备进行互动，实现实时语音交互，文本播报。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('11', $r('app.media.Item_img02'), 'Step11 分布式流转',
      '流转能力打破设备界限，多设备联动，使用户应用程序可分可合、可流转，实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('12', $r('app.media.Item_img02'), 'Step12 一次开发，多端部署',
      '一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
  ];

  build() {
    // ...
  }
}

2.6.2、实现赋能套件区域

这里的赋能套件区域可以进行滑动，入门教程部分用到的是list列表进行的展示

成果展示
改造逻辑分析

这里就分析一下逻辑并不对源码进行拆解

**官方解释：**Scroll作为外层容器，是由于其内部内容很有可能会超过屏幕高度，为保证内容显示，可以采用Scroll组件来进行滚动显示。scrollBar设置为BarState.Off，表示关闭滚动时的滚动条显示。注意，此处的Sroll组件要替换原本的Banner组件。

简单来说就是内容可能会很多用Scroll容器可以进行滑动操作，滚动条就是最右边的灰色的条，这里可以关闭，也可以自行开启

官方解释：使用Grid组件作为外层容器，包裹之后的GridItem。rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列宽度。scrollBar用于关闭滚动条。

这里的Grid容器就相当于一个用于将卡片排版的一个工具，具体逻辑见下图👇

注意看这里加入了这一行代码".rowsTemplate('1fr')" 证明只展示一行，如果想要展示多行直接修改即可

接下来看EnablementItem，上述提到了将参数传递给子组件，子组件用@Prop直接进行接收然后渲染。

注意下这里的类我们已经提前定义好了，所以直接用就行了。

2.6.3、列表布局

成果展示
改造逻辑分析

List 是常用的滚动列表容器，用于展示一系列具有相同布局风格的数据项，支持垂直 / 水平滚动、数据动态加载、item 交互等功能，是构建列表类界面（如商品列表、消息列表）的核心组件。

这里找到了List容器的简介，就是一个滚动容器

这里也没什么可说的了，也是引用对象。

三、整体源码展示

图片结构如下：

可以直接复制代码进行测试，代码参考官方文档！！！

html 复制代码 
class BannerClass{
  id : string='';
  imageSrc : ResourceStr='';
  url : string = 'https://blog.csdn.net/2302_80329073?type=blog';
  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 = 'VON';

  build() {
    Column(){
      Text(this.message)
        .fontSize(24)
        .fontWeight(700)
        .width('100%')
        .padding({left:16})
        .lineHeight(33)
        .textAlign(TextAlign.Start)
      Scroll(){
        Column(){
          Banner()
          EnablementView()
          TutorialView()
        }
      }
      .layoutWeight(1)
      .scrollBar(BarState.Off)
      .align(Alignment.TopStart)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#f1f1f1')
    .padding({top:11,left:16,right:16});
  }
}
// Banner组件
@Preview
@Component
struct Banner{
  @State bannerList:Array<BannerClass> = [
    new BannerClass('Banner_img01',$r('app.media.Banner_img01'),
      ''
    ),
    new BannerClass('Banner_img02',$r('app.media.Banner_img02'),
    ''
    ),
    new BannerClass('Banner_img03',$r('app.media.Banner_img03'),
    ''
    ),
    new BannerClass('Banner_img04',$r('app.media.Banner_img04'),
    ''
    ),
    new BannerClass('Banner_img05',$r('app.media.Banner_img05'),
    ''
    )
  ]
  build() {
    Swiper(){
      ForEach(this.bannerList,(item:BannerClass,index:number)=>{
        Image(item.imageSrc)
          .objectFit(ImageFit.Contain)
          .width('100%')
          .height(260)
          .borderRadius(16)
      },(item:BannerClass,index:number)=>item.id)
    }
    .autoPlay(true)
    .loop(true)
    .indicator(
      new DotIndicator()
        .color('#f1f1f1')
        .selectedColor('red')
    )
  }
}

// Item设计
@Component
export 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(169)
    .height(169)
    .borderRadius(16)
    .backgroundColor(Color.White)
  }
}

@Component
struct TutorialItem {
  @Prop tutorialItem :ArticleClass;
  build() {
    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)
    .margin({top: 20})
  }
}


@Component
struct EnablementView {
  @State enablementList: Array<ArticleClass> = [
    new ArticleClass('1', $r('app.media.Item_img01'), 'HarmonyOS第一课',
      '基于真实的开发场景，提供向导式学习，多维度融合课程等内容，给开发者提供全新的学习体验。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-video-courses/video-tutorials-0000001443535745'),
    new ArticleClass('2', $r('app.media.Item_img01'), '开发指南',
      '提供系统能力概述、快速入门，用于指导开发者进行场景化的开发。指南涉及到的知识点包括必要的背景知识、符合开发者实际开发场景的操作任务流（开发流程、开发步骤、调测验证）以及常见问题等。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guide-0000001630265101'),
    new ArticleClass('3', $r('app.media.Item_img01'), '最佳实践',
      '针对新发布特性及热点特性提供详细的技术解析和开发最佳实践。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/topic-architecture-0000001678045510'),
    new ArticleClass('4', $r('app.media.Item_img01'), 'Codelabs',
      '以教学为目的的代码样例及详细的开发指导，帮助开发者一步步地完成指定场景的应用开发并掌握相关知识。Codelabs将最新的鸿蒙生态应用开发技术与典型场景结合，让开发者快速地掌握开发高质量应用的方法。同时支持互动式操作，通过文字、代码和效果联动为开发者带来更佳的学习体验。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-codelabs/codelabs-0000001443855957'),
    new ArticleClass('5', $r('app.media.Item_img01'), 'Sample',
      '面向不同类型的开发者提供的鸿蒙生态应用开发优秀实践，每个Sample Code都是一个可运行的工程，为开发者提供实例化的代码参考。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-samples/samples-0000001162414961'),
    new ArticleClass('6', $r('app.media.Item_img01'), 'API参考',
      '面向开发者提供鸿蒙系统开放接口的全集，供开发者了解具体接口使用方法。API参考详细地描述了每个接口的功能、使用限制、参数名、参数类型、参数含义、取值范围、权限、注意事项、错误码及返回值等。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-references/development-intro-0000001580026066'),
    new ArticleClass('7', $r('app.media.Item_img01'), 'FAQ',
      '开发者常见问题的总结，开发者可以通过FAQ更高效地解决常见问题。FAQ会持续刷新，及时呈现最新的常见问题。',
      'https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-development-0000001753952202'),
    new ArticleClass('8', $r('app.media.Item_img01'), '开发者论坛', '和其他应用开发者交流技术、共同进步。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
  ];

  build() {
    Column(){
      Text('赋能套件')
        .fontColor('#182431')
        .fontSize(16)
        .fontWeight(500)
        .fontFamily('HarmonyHeiTi-medium')
        .textAlign(TextAlign.Start)
        .padding({ left: 16 })
        .margin({ bottom: 8.5 })
      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 })
    }
    .margin({top:18})
    .alignItems(HorizontalAlign.Start)
    .width('100%')
  }
}

@Component
struct TutorialView {
  @State tutorialList: Array<ArticleClass> = [
    new ArticleClass('1', $r('app.media.Item_img02'), 'Step1 环境的搭建',
      '本篇教程实现了快速入门------一个用于了解和学习HarmonyOS的应用程序。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('2', $r('app.media.Item_img02'), 'Step2 使用Swiper构建运营广告位',
      'Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('3', $r('app.media.Item_img02'), 'Step3 创建和组合视图',
      'Item定义子组件相关特征。相关组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('4', $r('app.media.Item_img02'), 'Step4 网格和列表组建的使用',
      '网格和列表组件中，当Item达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能，适合用于呈现同类数据类型或数据类型集',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('5', $r('app.media.Item_img02'), 'Step5 应用架构设计基础------MVVM模式',
      'ArkUI采取MVVM = Model + View + ViewModel模式，将数据与视图绑定在一起，更新数据的时候直接更新视图。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('6', $r('app.media.Item_img02'), 'Step6 应用架构设计基础------三层架构',
      '为了更好地适配复杂应用的开发，建议采用三层架构的方式对整个应用的功能进行模块化，实现高内聚、低耦合开发。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('7', $r('app.media.Item_img02'), 'Step7 ArkWeb页面适配',
      'ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('8', $r('app.media.Item_img02'), 'Step8 数据驱动UI更新', '数据更新的同时会直接驱动UI的改变',
      'xxx'),
    new ArticleClass('9', $r('app.media.Item_img02'), 'Step9 设置组件导航',
      'Navigation组件适用于模块内页面切换，一次开发，多端部署场景。通过组件级路由能力实现更加自然流畅的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('10', $r('app.media.Item_img02'), 'Step10 原生智能：AI语音朗读',
      '文本转语音服务提供将文本信息转换为语音并进行播报的能力，便于用户与设备进行互动，实现实时语音交互，文本播报。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('11', $r('app.media.Item_img02'), 'Step11 分布式流转',
      '流转能力打破设备界限，多设备联动，使用户应用程序可分可合、可流转，实现如邮件跨设备编辑、多设备协同健身、多屏游戏等分布式业务。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
    new ArticleClass('12', $r('app.media.Item_img02'), 'Step12 一次开发，多端部署',
      '一套代码工程，一次开发上架，多端按需部署。支撑开发者快速高效的开发支持多种终端设备形态的应用，实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。',
      'https://developer.huawei.com/consumer/cn/forum/home?all=1'),
  ];

  build() {
    Column() {
      Text('入门教程')
        .fontColor('#182431')
        .fontSize(16)
        .fontWeight(500)
        .fontFamily('HarmonyHeiTi-medium')
        .textAlign(TextAlign.Start)
        .padding({ left: 16 })
        .margin({ bottom: 8.5 })
      List({ space: 12 }) {
        ForEach(this.tutorialList, (item: ArticleClass) => {
          ListItem() {
            TutorialItem({ tutorialItem: item })
          }
        }, (item: ArticleClass) => item.id)
      }
      .scrollBar(BarState.Off)
      .padding({ left: 16, right: 16 })
    }
    .margin({ top: 18 })
    .alignItems(HorizontalAlign.Start)
  }
}
相关推荐
时光慢煮2 小时前
【Flutter × OpenHarmony】跨端开发实现全局Toast提示卡片
flutter·华为·开源·openharmony
IT陈图图3 小时前
Flutter × OpenHarmony 混合布局实战：在一个容器中优雅组合列表与网格
flutter·鸿蒙·openharmony
讯方洋哥3 小时前
HarmonyOS App开发——鸿蒙音乐播放机应用App开发
华为·harmonyos
小雨青年4 小时前
【鸿蒙原生开发会议随记 Pro】 会议随记 Pro v1.1 发布 详解 HarmonyOS NEXT 原生国际化（i18n）架构与最佳实践
华为·harmonyos
云边散步5 小时前
godot2D游戏教程系列二（4）
笔记·学习·游戏开发
木斯佳5 小时前
HarmonyOS 6实战（源码教学篇）— Speech Kit TextReader：【仿某云音乐接入语音朗读控件】
华为·harmonyos
jrlong5 小时前
DataWhale大模型基础与量化微调task4学习笔记（第 2 章：高级微调技术_RLHF 技术详解）
笔记·学习
Darkershadow5 小时前
蓝牙学习之Time Set
python·学习·蓝牙·ble·mesh
好奇龙猫6 小时前
【日语学习-日语知识点小记-日本語体系構造-JLPT-N２前期阶段-第一阶段（９）：単語文法】
学习
南村群童欺我老无力.6 小时前
Flutter 框架跨平台鸿蒙开发 - 校园生活一站式：打造智慧校园服务平台
flutter·华为·harmonyos
热门推荐
01GitHub 镜像站点02OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)03Clawdbot 中文汉化版 接入微信、飞书04一种新的LCA算法05【网络安全测试】Burp Suite工具使用说明、配置及常见问题（有关必回）06Claude Code Skills 实用使用手册07在Trae中使用Pencil MCP08零门槛部署本地 AI 助手：Clawdbot/Meltbot 部署深度保姆级教程09UV安装并设置国内源10struts2 XML外部实体注入漏洞复现（CVE-2025-68493）