I. Core Features of ArkUI Framework
- Declarative Syntax ○ Replaces imperative code with natural and intuitive UI description syntax, allowing developers to focus on UI presentation logic rather than interface updates.
- 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.
- 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
- 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.
- Layout Container Components
● Linear Layout
○ Row: Horizontally arranges child components, sets spacing via
space
, and controls alignment withalignItems
. ○ 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 viarowsTemplate
andcolumnsTemplate
, 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. - 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.
- 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.
- 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
- Relative Layout (RelativeContainer) Flexibly controls the relative positions of child components via anchor rules (AlignRules), avoiding excessive nesting.
- Media Query (@ohos.mediaquery) Dynamically adjusts layouts based on device attributes (screen size, orientation) to achieve responsive design.
- 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
- Enhanced One-Many Components ○ Column components support multi-terminal adaptation, and lists gain sticky top/bottom capabilities.
- 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.