The Core Component System of HarmonyOS and Its Characteristics

I. Core Features of ArkUI Framework

1. Declarative Syntax
   ○ Replaces imperative code with natural and intuitive UI description syntax, allowing developers to focus on UI presentation logic rather than interface updates.
2. Cross-Platform Collaboration and Efficient Rendering
   ○ Supports one-time development for multi-terminal deployment (e.g., phones, tablets, vehicle systems). Fine-grained UI update binding via compile-time optimization enhances layout rendering performance.
3. Multi-Dimensional State Management
   ○ Provides a flexible state management mechanism, supporting state sharing and responsive updates between components.

II. Classification and Typical Examples of ArkUI Components

1. Basic Interactive Components
   ● Button
   Triggers operations, supporting custom text, types (normal/capsule), click effects, and event binding (e.g., form submission, link navigation). ● TextInput
   Receives user text input, supporting placeholders, input types (password/email), and input content validation. ● Slider
   Slider component, allowing configuration of minimum/maximum values, step sizes, and sliding callbacks.
2. Layout Container Components
   ● Linear Layout
   ○ Row: Horizontally arranges child components, sets spacing via space, and controls alignment with alignItems.
   ○ Column: Vertically arranges child components, supporting scrolling for超长 content (adaptive extension). ● Flex Layout
   Child components can be compressed/stretched to dynamically adapt to container space, suitable for complex adaptive interfaces. ● Grid Layout (GridRow/GridCol)
   Defines row and column ratios via rowsTemplate and columnsTemplate, supporting cell layouts that span rows and columns. ● Stack Layout (Stack)
   Child components are stacked in sequence, often used for pop-ups, floating buttons, and other overlay effects.
3. Data Display Components
   ● List
   High-performance list container supporting vertical/horizontal scrolling, displaying structured data via ListItem or grouping (ListItemGroup). ● Grid
   Grid layout suitable for interfaces requiring uniform space allocation, such as calculators and photo albums. ● Swiper
   Carousel component supporting loop playback of advertisements or image preview scenarios.
4. Media and Graphics Components
   ● Image
   Supports various image sources (local, network, Base64), configurable scaling modes (objectFit), rounded corners, and loading events (onComplete/onError). ● Video
   Video playback component integrating decoding and playback control functions. ● Canvas
   Provides 2D drawing capabilities, supporting custom graphics, text, and animations.
5. Auxiliary Function Components
   ● Popup
   Pop-up component supporting custom content (e.g., confirmation boxes, menus) with configurable animation effects. ● Divider
   Divider component for distinguishing content blocks. ● Badge
   Badge component supporting top-right/left/right markers for unread messages or status indicators.

III. Advanced Layout Capabilities of ArkUI

1. Relative Layout (RelativeContainer)
   Flexibly controls the relative positions of child components via anchor rules (AlignRules), avoiding excessive nesting.
2. Media Query (@ohos.mediaquery)
   Dynamically adjusts layouts based on device attributes (screen size, orientation) to achieve responsive design.
3. Adaptive Scaling and Extension
   ○ Uses percentage or fr units to proportionally adjust component sizes.
   ○ Handles content overflow in conjunction with scroll containers (e.g., Scroll).

IV. New Capabilities and Cross-Platform Support

1. Enhanced One-Many Components
   ○ Column components support multi-terminal adaptation, and lists gain sticky top/bottom capabilities.
2. ArkUI-X Extension
   Reuses code across platforms like Android/iOS, maintaining UI consistency and reducing multi-terminal development costs.

Summary

ArkUI covers full-scenario requirements from basic interactions to complex data display through its rich component library and flexible layout system. Developers can efficiently build high-performance, cross-device HarmonyOS applications by combining declarative syntax with state management.