[HarmonyOS Development] Super detailed introduction to ArkTS

[HarmonyOS Development] Super detailed introduction to ArkTS (1) Original

Foreword:

This series is the most easy-to-understand for me to help everyone learn the ArkTS language.

1.Create project

Open our DevEco Studio and enter the following interface

Click Create Project to create

Here we have selected the first one by default. We can just click Next to proceed to the next step to complete the creation.

In this way, our new project is created

In this way, our project is created

2. Basic syntax overview

When we open this hello world, are we all a little confused? You don’t know where to start, do you? Never mind, let's break it down

You can split them into these parts. If you don’t understand, you can temporarily ignore the content after the colon below.

• **Decorator:** Used to decorate classes, structures, methods and variables and give them special meanings. For example, in the above example, @Entry, @Component and @State are all decorators. @Component represents a custom component, @Entry represents the custom component as an entry component, and @State represents the state variable in the component. Changes in the state variable will trigger the UI. refresh.
• **UI description:** Describe the structure of the UI in a declarative way, such as the code block in the build() method.
• **Custom component:** A reusable UI unit that can be combined with other components, such as the above struct Hello decorated with @Component.
• **System components:** The default built-in basic and container components in the ArkUI framework can be directly called by developers, such as Column, Text, Divider, and Button in the example.
• **Property methods:** Components can configure multiple properties through chain calls, such as fontSize(), width(), height(), backgroundColor(), etc.
• **Event method:** Components can set the response logic of multiple events through chain calls, such as onClick() following Button.

There are a lot of explanations for these things. For novices, it is a little difficult to understand. As long as you remember this general format, it looks like this

@Entry
@Component
struct Index {
//放你写的数据

  	build() {
  	//放你写的页面代码 
    
    }
  }1.2.3.4.5.6.7.8.9.10.

You can just fill in what you need to write directly.

3. Layout

The following content is a bit complicated. If newbies don’t understand it, they can just look at the linear layout for the time being. This is our most commonly used layout method.

1. Linear layout (Row, Column)

• **Linear layout (Row, Column):** If there are multiple sub-elements in the layout and they can be arranged linearly in some way, this layout will be given priority.

2. Stack layout (Stack)

• Cascading layout ** (Stack): **This layout is given priority when components need to have a stacking effect. The stacking effect of the cascading layout will not occupy or affect the layout space of other sub-components in the same container. For example, when a Panel pops up as a subcomponent, it is more reasonable to cover other components, so priority is given to using a stacked layout on the outer layer.

3. Flexible layout (Flex)

• Flexible layout ** (Flex): **Flexible layout is a layout method similar to linear layout. The difference is that elastic layout can compress or stretch child components by default. This layout is used first when subcomponents need to calculate the stretching or compression ratio, so that subcomponents in multiple containers can have a better visual filling effect of the container.

4. Relative layout (RelativeContainer)

• Relative layout ** (RelativeContainer):** Relative layout is a layout method in a two-dimensional space. It does not need to follow the rules of linear layout and the layout method is more free. By setting anchor rules (AlignRules) on the subcomponent, the subcomponent can align its position in the horizontal axis and vertical axis with the position of the container or other subcomponents within the container. The set anchor point rules can naturally support the compression, stretching, stacking or multi-line effect of sub-elements. It is recommended to use it when the distribution of page elements is complex or when the linear layout will make the nesting level of the container too deep.

5. Grid layout (GridRow, GridCol)

• Grid layout ** (GridRow, GridCol): **Grid is a common auxiliary positioning tool in multi-device scenarios, by dividing the space into regular grids. Grid is different from the fixed space division of grid layout. It can realize different layouts under different devices, and space division is more arbitrary, thus significantly reducing the design and development costs of adapting to different screen sizes, making the overall design and development process more orderly. and a sense of rhythm, while also ensuring the coordination and consistency of application display on multiple devices, improving user experience. Recommended for use when the content is the same but the layout is different.

6. Media Query (@ohos.mediaquery)

• Media query ** (@ohos.mediaquery): **Media query can modify the application style according to different device types or different states of the same device. For example, design different layouts based on different attribute information of the device and application, and update the application's page layout when the screen changes dynamically.

7. List

• List : Use lists to display structured, scrollable information easily and efficiently. In ArkUI, lists have vertical and horizontal layout capabilities and the ability to adaptively arrange the number of items in the cross-axis direction. They can be scrolled when they exceed the screen. Lists are suitable for presenting homogeneous data types or sets of data types, such as images and text.

8.Grid

• Grid ** (Grid): **Grid layout has strong page equalization capabilities and the ability to control the proportion of sub-components. It is an important adaptive layout. Grid layout can control the number of grids occupied by elements, set subcomponents to span several rows or columns, and adjust all subcomponents and spacing proportionally when the size of the grid container changes. It is recommended to use it in layout scenarios that require fixed proportions or even distribution of space, such as calculators, photo albums, calendars, etc.

9. Swiper

• Carousel (Swiper): Carousel components are usually used to implement advertising carousels, image previews, scrollable applications, etc.

use

It doesn’t matter if you don’t understand it yet. We will only look at the most commonly used linear layout for the time being.

There are two types of linear layouts,

One is a vertical linear layout Column

The other is a horizontal linear layout Row

We add them to the code we write

@Entry
@Componentstruct Index {
//放你写的数据
  build() {
  	Row() {      
  		Column() {     
  			//放你写的组件     
 			 }   
 		 }  
 	}
  }1.2.3.4.5.6.7.8.9.10.11.

In this way, the page layout is written. Now we will start writing components in the page layout.

4.Components

Next we will add components to our page

Common components are

• button
• Single box
• toggle button
• progress bar
• text display
• Text input
• Custom pop-up window
• video playback
• XComponent

Today let’s take a look at buttons and text display first

1.Component format

The format of components is basically like this

2. Use of text components

Let's click on the little eye on the right to preview the effect.

That's what it looks like

Similarly, we add modifications below the linear layout to make the text appear in the center of the screen.

.width('100%') is to make the width of the vertical layout occupy the entire width of the screen, so that the text is centered on the left and right

In the same way, .height('100%') is to make the height of the horizontal layout occupy the height of the entire screen and center the text up and down.

3.Using button components

Then we can add a button Bottom component

@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.

For example, this is what I used to demonstrate

After clicking the button, the content of the message will change. The effect after clicking the button is as follows

That’s all our content today

end

We got started with ArkTS today and had some preliminary contact with the application of components. If there are any mistakes, I hope you can correct them in the comment area. I hope you can become an ArkTS master as soon as possible.

Here is a "Hongmeng (HarmonyOS) Development Learning Guide", hoping to provide some help to those who want to learn Hongmeng but have no direction. (Due to the excessive content of the document, in order to avoid affecting everyone’s reading experience, only part of the content is shown in screenshots. There is a free way to obtain the detailed full version at the end of the article!)

"HarmonyOS Development Study Guide"

Chapter 1 Quick Start

1. Development preparation

2. Build the first ArkTS application (Stage model)

3. Build the first ArkTS application (FA model)

4. Build the first JS application (FA model)

5、…

Chapter 2 Development Basics

1. Basic knowledge of application packages

2. Application configuration file (Stage model)

3. Application configuration file overview (FA model)

4、…

Chapter 3 Resource Classification and Access

1. Resource classification and access

2. Create resource directories and resource files

3. Resource access

4、…

Chapter 4 Learning ArkTs Language

1. First introduction to ArkTS language

2. Basic grammar

3. Status management

4. Other status management

5. Rendering control

6、…

Chapter 5 UI Development

1. Overview of Ark Development Framework (ArkUI)

2. Based on ArkTS declarative development paradigm

3. Web-like development paradigm compatible with JS

4…

Chapter 6 Web Development

1. Overview of Web Components

2. Load the page using web components

3. Set basic properties and events

4. Use front-end page JavaScript in your application

5. Overview of ArkTS language basic class library

6. Concurrency

7…

11. Network and connections

12. Telephone service

13.Data management

14.File management

15.Background task management

16.Device management

17…

Chapter 7 Application Model

1. Overview of application model

2.Stage model development guidance

3.FA model development guidance

4…

Scan the QR code below to receive the "Hongmeng Study Guide" for free

|