ArkTS Introduction
1. Create a Project
In DevEco Studio, find File -> New -> Create Project in the upper-left corner.
Or click Create directly on the welcome interface.
Because we will subsequently call C-language command-line programs through NAPI, select Native C++ in the next step.
Note
(Note: If you select another template, you will not be able to link to the relevant functions for use under "xxx\entry\src\main\ets\pages\Index.ets"!)
Modify it as shown in the figure.
Wait for the compile prompt box to indicate that creation is complete.
If you want to see the display on the development board, File -> Project Structure... in the upper-left corner.
After configuring as above, click OK; it will automatically generate the relevant dependency files based on your local computer.
Tip
If you open someone else's project and encounter a compile error, just re-configure this step.
After configuration is complete, connect the development board's OTG port to the PC and click Run in the upper-right corner. You will see the initial "Hello World" screen on the development board.
2 Basic Syntax Introduction
The following is the default initialization code generated by the template. We will use this as an example to introduce some commonly-used basic concepts. For specific ArkTS syntax, please go to our northbound development tutorial. Friends with development experience in graphics libraries such as Qt and LVGL will get up to speed very quickly.
2-1 Layout
There are several layouts:
| Layout Type | Description |
|---|---|
| Linear Layout (Row/Column) | Makes child elements arrange linearly in the horizontal or vertical direction. |
| Stack Layout (Stack) | Makes child elements stack on top of each other. |
| Flex Layout (Flex) | Similar to a linear layout, but supports compressing or stretching child components proportionally. |
| Relative Layout (RelativeContainer) | Allows child elements to be freely positioned in 2D relative to the container or other child elements through anchor rules. |
| Grid Layout (GridRow/GridCol) | Assists positioning through a grid system to implement a responsive layout. |
| Media Query (@ohos.mediaquery) | Dynamically modifies application style and layout according to device type or state (such as screen orientation, width/height). |
| List (List) | Efficiently displays structured, scrollable data. |
| Grid (Grid) | Powerful even-distribution layout capability; can precisely control the number of rows and columns occupied by child components, and adjusts proportionally. |
| Swiper (Swiper) | Implements a cyclically-scrollable carousel effect. |
Here we only introduce the linear layout, divided into Column for the vertical linear layout and Row for the horizontal linear layout.
A horizontal linear layout places components on different columns in the same row; you can understand it as the vertical coordinate staying unchanged while the horizontal coordinate changes!
Similarly, a vertical linear layout places components on different rows in the same column, that is, the horizontal coordinate in the figure stays unchanged while the vertical coordinate changes!
2-3 Components & Demo
Common components include:
- Button
- Radio
- Toggle button
- Progress bar
- Text display
- Text input
- Custom popup
- Video playback
- XComponent
This tutorial first introduces the text-display and button components, which are basically enough to meet the needs of this tutorial.
We make the following trimming to the code text:
The function implemented by the code is to place a text with a size of 40 and a bold style. Run it on the development board; the effect is as follows:
Then modify the code:
.width('100%') makes the vertical layout take up the full width of the screen, centering the text left-and-right.
.height('100%') makes the horizontal layout take up the full height of the screen, centering the text top-and-bottom.
We add a Button component on the existing vertical direction, and add the common properties:
.width('60%'): sets the button width to 60% of the parent container. Using a percentage unit makes the button responsive to parent-container size changes..height(60): sets the button height to 60 pixels. A fixed height keeps the button visually consistent across different devices..fontSize(30): sets the button text size to 30 pixels. A larger font makes the button text more readable and prominent..fontWeight(FontWeight.Medium): sets the font weight to medium. This makes the text appear more prominent than normal weight, but not too heavy..backgroundColor('#28A745'): sets the button background color to green (#28A745). Green usually indicates a positive, successful action..borderRadius(10): sets the button border-corner radius to 10 pixels. Rounded corners make the button look more modern and friendly..margin({ bottom: 20 }): sets the button's bottom margin to 20 pixels. This creates a visual gap with the element below..onClick(() => { this.message = 'WECOME!' }): sets the button's click-event handler. When the user clicks the button, the value of the message variable is changed to 'WECOME!'.
The effects before and after clicking the button are shown in the figure below:
