04 ArkTS入门

1. 创建项目

DevEco Studio，左上角找到File->New->Create Project

或者在欢迎界面直接点击创建

由于后续我们需要把C语言操作命令行的程序通过NAPI的方式进行调用，所以下一步这里选择Native C++

注意

（注意：如果选的其他模板（Template），在"xxx\entry\src\main\ets\pages\Index.ets"下是无法链接到相关函数进行使用的！！！）

如何按图示内容进行修改

等待编译提示框提示创建完成即可

如果希望在开发板上看到画面，左上角File->Project Structure...

按上图配置好以后点击OK，它会根据你本地的电脑自动生成相关的依赖文件

提示

如果打开的是别人的工程会遇到编译错误，就需要重新配置这一步即可

等待配置完成以后，将开发板的OTG接口与电脑连接好，点击右上角运行，即可在开发板中看到初始的"Hello World"画面

以下就是模板默认生成的初始化代码，将以此为例给大家介绍一些常用的基本概念，具体的ArkTS语法请移步我们的北向开发教程，如果有Qt，LVGL等图形库开发经验的朋友熟悉起来会非常快。

布局有以下几种：

布局类型	描述
线性布局 (Row/Column)	使子元素在水平或垂直方向线性排列。
层叠布局 (Stack)	使子元素堆叠显示。
弹性布局 (Flex)	类似线性布局，但支持子组件按比例压缩或拉伸。
相对布局 (RelativeContainer)	通过锚点规则让子元素相对于容器或其他子元素进行自由二维定位。
栅格布局 (GridRow/GridCol)	通过栅格系统辅助定位，实现响应式布局。
媒体查询 (@ohos.mediaquery)	根据设备类型或状态（如屏幕方向、宽高）动态修改应用样式和布局。
列表 (List)	高效显示结构化、可滚动的数据。
网格 (Grid)	强大的均分布局能力，可精确控制子组件所占行数和列数，按比例调整。
轮播 (Swiper)	实现可循环滚动的轮播效果。

这里只介绍线性布局，分为竖直方向的线性布局Column和水平方向的线性布局Row。

水平线性布局就是把组件放在同一排的不同列上，可以理解为图中的纵坐标不变横坐标变！

同理，竖直方向的线性布局就是把组件放在同一列的不同排上，即图中的横坐标不变纵坐标变！

常见的组件有：

本教程先给大家介绍文本显示和按钮组件，已基本满足本教程的需求。

我们对代码文本做以下裁剪

代码实现的功能是放置一个文本，大小为40，样式为粗体，在开发板中运行，效果如下：

再修改代码：

.width('100%')是让垂直布局的宽度占据整个屏幕的宽度，让文本位于左右居中

.height('100%')是让水平布局的高度占据整个屏幕的高度，让文本上下居中

我们在已有的竖直方向上增加一个按键组件Button，再把常见属性的加上：

.width('60%')：设置按钮宽度为父容器的60%。使用百分比单位可以使按钮响应父容器尺寸变化。
.height(60)：设置按钮高度为60像素。固定高度使按钮在不同设备上保持一致的视觉大小。
.fontSize(30)：设置按钮文字大小为30像素。较大的字体使按钮文本更易读和突出。
.fontWeight(FontWeight.Medium)：设置字体重量为中等粗细。这使文本看起来比正常粗细更突出，但又不会过于粗重。
.backgroundColor('#28A745')：设置按钮背景颜色为绿色（#28A745）。绿色通常表示积极、成功的操作。
.borderRadius(10)：设置按钮边框圆角半径为10像素。圆角使按钮看起来更现代、友好。
.margin({ bottom: 20 })：设置按钮底部外边距为20像素。这在与下方元素之间创建视觉间隔。
.onClick(() => { this.message = 'WECOME!' })：设置按钮点击事件处理函数。当用户点击按钮时，会将message变量的值改为'WECOME!'。

点击按键前后的效果如下图所示：