重生之我在大学自学鸿蒙开发第一天-《基础篇》
- 个人主页：VON
- 文章所属专栏：从0开始的开源鸿蒙6.0.0
- 个人抖音：清洒
目录
编辑
一、前言
二、实践
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类似。
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类的数组，这里展示五张图片，也都是我从网上找的图片。
@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就是轮播图组件，因为我找的图片大小不一致所以统一了一下高度方便大家观看，使得轮播图更加美观。
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代码如下👇
@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组件
组件大致组成如下👇
废话不多说直接开始。
这里的位置没有调整，可以将卡片放到适当的位置进行展示。这段代码没有什么技术含量，可以将它当成基础的前端代码分析
@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
@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、先定义文章类
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;}
}不知道为什么他给了这两个方法，但是好像并没有应用，估计后面会进行应用，等会再回来进行补充说明。
补充说明：这里是便于后面进行改造
@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容器的简介，就是一个滚动容器
这里也没什么可说的了，也是引用对象。
三、整体源码展示
图片结构如下：
可以直接复制代码进行测试，代码参考官方文档！！！
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)}
}