【HarmonyOS开发】超具体的ArkTS入门
安装DevEco Studio和新建项目就不多说了，可以移步官网https://i-blog.csdnimg.cn/direct/5949f32f1b2346e98ce30c6948ad6d9f.png
https://i-blog.csdnimg.cn/direct/0dadd78efda349d1958891c0e8ced323.png
就可以把他们拆成这几个部分了，如果看不懂可以临时忽略下面冒号后面的内容
[*]装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的寄义。如上述示例中@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() {
//放你写的页面代码
}
} 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
https://i-blog.csdnimg.cn/img_convert/c4cd3b7c23d2483006e7c6e971472b64.png
我们把他们加入我们写的代码中
@Entry
@Componentstruct Index {
//放你写的数据
build() {
Row() {
Column() {
//放你写的组件
}
}
}
} 如许页面布局就写好了，下面我们要开始在页面布局中写组件了
4.组件
下面我们就在我们的页面中添加组件
常见的组件有
[*]按钮
[*]单选框
[*]切换按钮
[*]进度条
[*]文本显示
[*]文本输入
[*]自定义弹窗
[*]视频播放
[*]XComponent
今天我们先来看一下按钮和文本显示
1.组件格式
组件的格式基本上都是这个样子
https://i-blog.csdnimg.cn/img_convert/cd77263d874585768a6ac8653c8888ba.png
2.文本组件利用
这个我们点右边的这个小眼睛可以预览效果
https://i-blog.csdnimg.cn/img_convert/67cc8bc005772b94302cfd40b7f000ab.png
也就是这个样子
https://i-blog.csdnimg.cn/img_convert/765e9e9ae6f2cd3f2feb04b660b2a2b3.png
同样的，我们在线性布局的下面加上修饰的东西，可以让这个笔墨显示在屏幕中心
https://i-blog.csdnimg.cn/img_convert/fff1f59536f0b6ac523948d748a1211b.png
.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%')
}
} 比方我用来演示的这个
https://i-blog.csdnimg.cn/img_convert/85c2facb7e71e5a749b8304b78fbec2c.png
点击按钮后，message的内容就会发生变革，点击按钮后的效果如下
https://i-blog.csdnimg.cn/img_convert/79db7491d4a1d7abd1cd5f8a69fc1aae.png
我们今天的内容就到这里
结尾
我们今天入门了ArkTS，开端接触了一下组件的应用，如果有什么错误盼望大家可以在评论区中指正，祝大家可以早日成为ArkTS大佬。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]