# Ranking

**Repository Path**: harmonyos_codelabs/Ranking

## Basic Information

- **Project Name**: Ranking
- **Description**: 本篇Codelab使用渲染控制语法和组件化基础知识，搭建一个可刷新的排行榜页面。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 7
- **Created**: 2024-06-15
- **Last Updated**: 2026-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ArkTS Basics

### Introduction

Based on the declarative syntax and component basics, learn how to build a ranking page that can be refreshed. Example:

![](screenshots/device/screenshots.en.gif)

### Concepts

#### Rendering control syntax

- Conditional rendering: Use the **if/else** statement for conditional rendering.
- Loop rendering: The development framework provides loop rendering (**ForEach**) to iterate arrays and create a component for each array item.

#### Component-based decorator @Builder

- The **@Builder** decorated method is used to define the declarative UI description of a component and quickly generate multiple layouts in a custom component. The functionality and syntax of the **@Builder** decorator are the same as those of the **build** function.

#### Component state manager

- The **@State** decorated variable is the internal state data of the component. When the state data is modified, the **build** method of the component is called to refresh the UI.
- **@Prop** and **@State** have the same semantics but different initialization modes. The **@Prop** decorated variable must be initialized using the **@State** decorated variable provided by the parent component. The **@Prop** decorated variable can be modified in the component, but the modification is not notified to the parent component; that is, **@Prop** uses one-way data binding.
- The **@Link** decorated variable can establish bidirectional data binding with the **@State** variable of the parent component. The **@Link** data has the following features:

#### Component lifecycle callbacks

- The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time at runtime. They cannot be manually invoked from applications.

### Permissions

N/A

### How to Use

1. Tap the back button on the title bar to exit the app.
2. Tap the refresh button on the title bar to refresh the list.
3. When you tap an item in the ranking list, the text color of the child component in the list changes.
4. Tap the back button in the system navigation. If the exit conditions are met, the system exits directly. Otherwise, the system prompts you to tap the button again to exit the program.

### Constraints

1. The sample is only supported on Huawei phones with standard systems.
2. HarmonyOS: HarmonyOS 5.0.5 Release or later.
3. DevEco Studio: DevEco Studio 6.0.2 Release or later.
4. HarmonyOS SDK: HarmonyOS 6.0.2 Release SDK or later.