【HarmonyOS开发】超详细的ArkTS入门一 原创前言此系列为我整理出来最通俗易懂的让大家学会ArkTS语言。1.创建项目打开我们的DevEco Studio进入以下界面点击Create Project进行创建这里帮我们默认选好第一个了我们直接点Next就可以进入下一步完成创建这样我们的新的项目就创建完成了这样我们的项目就创建好了2.基本语法概述当我们打开这个hello world的时候是不是整个人都有些懵不知道从哪里下手了是不是呀不要紧咱们来把它分解开来就可以把他们拆成这几个部分了如果看不懂可以暂时忽略下面冒号后面的内容**装饰器**用于装饰类、结构、方法以及变量并赋予其特殊的含义。如上述示例中Entry、Component和State都是装饰器Component表示自定义组件Entry表示该自定义组件为入口组件State表示组件中的状态变量状态变量变化会触发UI刷新。**UI描述**以声明式的方式来描述UI的结构例如build()方法中的代码块。**自定义组件**可复用的UI单元可组合其他组件如上述被Component装饰的struct Hello。**系统组件**ArkUI框架中默认内置的基础和容器组件可直接被开发者调用比如示例中的Column、Text、Divider、Button。**属性方法**组件可以通过链式调用配置多项属性如fontSize()、width()、height()、backgroundColor()等。**事件方法**组件可以通过链式调用设置多个事件的响应逻辑如跟随在Button后面的onClick()。解释这些东西一大堆对新手来说理解有那么一点不容易只要记住这个大概的格式就像这个样子Entry Component struct Index { //放你写的数据 build() { //放你写的页面代码 } }1.2.3.4.5.6.7.8.9.10.你所需要写的东西就可以直接往里面填了3.布局下面的内容有些复杂新手看不懂可以暂时只看线性布局这个是我们最常用的一种布局方式1.线性布局Row、Column**线性布局Row、Column**如果布局内子元素为复数个且能够以某种方式线性排列时优先考虑此布局。2.层叠布局Stack层叠布局**Stack**组件需要有堆叠效果时优先考虑此布局层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理则优先考虑在外层使用堆叠布局。3.弹性布局Flex弹性布局**Flex**弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局可使得多个容器内子组件能有更好的视觉上的填充容器效果。4.相对布局RelativeContainer相对布局**RelativeContainer**相对布局是在二维空间中的布局方式不需要遵循线性布局的规则布局方式更为自由。通过在子组件上设置锚点规则AlignRules使子组件能够将自己在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以天然支持子元素压缩、拉伸堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时推荐使用。5.栅格布局GridRow、GridCol栅格布局**GridRow、GridCol**栅格是多设备场景下通用的辅助定位工具通过将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分可以实现不同设备下不同的布局空间划分更随心所欲从而显著降低适配不同屏幕尺寸的设计及开发成本使得整体设计和开发流程更有秩序和节奏感同时也保证多设备上应用显示的协调性和一致性提升用户体验。推荐内容相同但布局不同时使用。6.媒体查询ohos.mediaquery媒体查询**ohos.mediaquery**媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局以及屏幕发生动态改变时更新应用的页面布局。7.列表List列表**List**使用列表可以轻松高效地显示结构化、可滚动的信息。在ArkUI中列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集例如图片和文本。8.网格Grid网格**Grid**网格布局具有较强的页面均分能力子组件占比控制能力是一种重要自适应布局。网格布局可以控制元素所占的网格数量、设置子组件横跨几行或者几列当网格容器尺寸发生变化时所有子组件以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用例如计算器、相册、日历等。9.轮播Swiper轮播**Swiper**轮播组件通常用于实现广告轮播、图片预览、可滚动应用等。使用暂时看不懂也没关系我们暂时只看用的最多的线性布局线性布局分为两种一种是竖直方向的线性布局Column另一种是水平方向的线性布局Row我们把他们加入我们写的代码中Entry Componentstruct Index { //放你写的数据 build() { Row() { Column() { //放你写的组件 } } } }1.2.3.4.5.6.7.8.9.10.11.这样页面布局就写好了下面我们要开始在页面布局中写组件了4.组件下面我们就在我们的页面中添加组件常见的组件有按钮单选框切换按钮进度条文本显示文本输入自定义弹窗视频播放XComponent今天我们先来看一下按钮和文本显示1.组件格式组件的格式基本上都是这个样子2.文本组件使用这个我们点右边的这个小眼睛可以预览效果也就是这个样子同样的我们在线性布局的下面加上修饰的东西可以让这个文字显示在屏幕中央.width(‘100%’)是让垂直布局的宽度占据整个屏幕的宽度让文本位于左右居中同理.height(‘100%’)是让水平布局的高度占据整个屏幕的高度让文本上下居中3.按钮组件使用然后我们可以增加一个按钮Bottom组件Entry Component struct Index { State message: string Hello World‘ build() { Row() { Column() { //文本组件 Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) //按钮组件 Button(按钮中的内容) .onClick(() { //点击 //点击按钮后发生的事情 }) } .width(100%) } .height(100%) } }1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.例如我用来演示的这个点击按钮后message的内容就会发生变化点击按钮后的效果如下我们今天的内容就到这里结尾我们今天入门了ArkTS初步接触了一下组件的应用如果有什么错误希望大家可以在评论区中指正祝大家可以早日成为ArkTS大佬。这里整理了一份《鸿蒙HarmonyOS开发学习指南》希望能对那些想要学习鸿蒙但是有没有方向的人提供一点帮助。由于文档内容过多因此为了避免影响到大家的阅读体验在此只以截图展示部分内容详细完整版的看文末有免费的获取方式《鸿蒙HarmonyOS开发学习指南》第一章 快速入门1、开发准备2、构建第一个ArkTS应用Stage模型3、构建第一个ArkTS应用FA模型4、构建第一个JS应用FA模型5、…第二章 开发基础知识1、应用程序包基础知识2、应用配置文件Stage模型3、应用配置文件概述FA模型4、…第三章资源分类与访问1、 资源分类与访问2、 创建资源目录和资源文件3、 资源访问4、…第四章 学习ArkTs语言1、初识ArkTS语言2、基本语法3、状态管理4、其他状态管理5、渲染控制6、…第五章 UI开发1.方舟开发框架ArkUI概述2.基于ArkTS声明式开发范式3.兼容JS的类Web开发范式4…第六章 Web开发1.Web组件概述2.使用Web组件加载页面3.设置基本属性和事件4.在应用中使用前端页面JavaScript5.ArkTS语言基础类库概述6.并发7…11.网络与连接12.电话服务13.数据管理14.文件管理15.后台任务管理16.设备管理17…第七章 应用模型1.应用模型概述2.Stage模型开发指导3.FA模型开发指导4…扫描下方二维码免费领取《鸿蒙学习指南》