ArkUI

• About This Kit
• UI Development (ArkTS-based Declarative Development Paradigm)
  • UI Development (ArkTS-based Declarative Development Paradigm) Overview
  • Basic Syntax of UI Paradigms

    • Basic Syntax Overview

    • Declarative UI Description

    • Custom Components

      • Creating a Custom Component
      • Custom Component Lifecycle
      • Custom Component Layout
      • Constraints on Access Modifiers of Custom Component Member Variables
      • Custom Component Reuse
        • Custom Component Reuse V1
        • Custom Component Reuse V2
      • Custom Component Freezing
        • Custom Component Freezing V1
        • Custom Component Freezing V2

    • UI Decorators

    • Component Extension

      • Component Extension Overview
      • @Builder Decorator: Custom Builder Function
      • @LocalBuilder Decorator: Maintaining Component Relationships
      • @BuilderParam Decorator: Referencing the @Builder Function
      • wrapBuilder: Encapsulating Global @Builder
      • @Styles Decorator: Defining Reusable Styles
      • @Extend Decorator: Defining Extended Component Styles
      • stateStyles: Applying Polymorphic Styles
      • @AnimatableExtend Decorator: Defining Animatable Properties

    • @Require Decorator: Validating Constructor Input Parameters

  • UI Paradigm State Management
    • State Management Overview
    • MVVM V1
    • MVVM V2
    • State Management V1
      • Component State Management
        • @State Decorator: State Owned by Component
        • @Prop Decorator: Implementing One-Way Synchronization from Parent to Child Components
        • @Link Decorator: Implementing Two-Way Synchronization Between Parent and Child Components
        • @Provide and @Consume Decorators: Two-Way Synchronization with Descendant Components
        • @Observed and @ObjectLink Decorators: Observing Property Changes in Nested Class Objects
        • @Watch Decorator: Getting Notified of State Variable Changes
      • Data Object State Management
        • @Track Decorator: Implementing Class Object Property-Level Updates
      • Application State Management
        • Application State Management Overview
        • LocalStorage: Storing Page-Level UI State
        • AppStorage: Storing Application-wide UI State
        • PersistentStorage: Persisting Application State
        • Environment: Querying the Device Environment
    • State Management V2
      • @ComponentV2 Decorator: Declaring a Custom Component
      • Component State Management
        • @Local Decorator: Representing the Internal State of Components
        • @Param Decorator: Inputting External Parameters to Components
        • @Once: Implementing Initialization Once
        • @Event Decorator: Standardizing Component Output
        • @Provider and @Consumer Decorators: Synchronizing Across Component Levels in a Two-Way Manner
      • Data Object State Management
        • @ObservedV2 and @Trace Decorators: Observing Class Property Changes
        • @Monitor Decorator: Listening for Value Changes of the State Variables
        • @Computed Decorator: Declaring Computed Properties
        • @Type Decorator: Marking the Types of the Class Property
      • Application State Management
        • AppStorageV2: Storing Application-wide UI State
        • PersistenceV2: Persisting Application State
    • Auxiliary APIs
      • getTarget API: Obtaining Original Objects
      • makeObserved API: Changing Unobservable Data to Observable Data
      • addMonitor and clearMonitor APIs: Dynamically Adding and Removing Listeners
    • Syntax Sugar
      • $$ Syntax: Implementing Two-Way Synchronization for Built-in Components
      • !! Syntax: Enabling Two-Way Binding
    • State Management V1 to V2 Migration
      • V1 to V2 Migration Overview
      • Migration for Component State Variables
      • Migration for Data Object State Variables
      • Migration for In-Application State Variables and Related Scenarios
      • Mixing Use of Custom Components
      • Mixing Use of State Management V1 and V2
    • Best Practices for State Management
      • Best Practices for State Management V1
      • Proper Use of State Management V1
  • UI Paradigm Rendering Control
    • Rendering Control Overview
    • if/else: Conditional Rendering
    • ForEach: Rendering Repeated Content
    • LazyForEach: Lazy Data Loading
    • Repeat: Reusing Components for Repeated Content Rendering
    • Migrating from LazyForEach to Repeat
    • ContentSlot: Enabling Hybrid Development
  • Responsive Environment Variable
    • @Env: Environment Variable
  • Component Navigation and Page Routing
    • Component Navigation and Page Routing Overview
  • Navigation (Recommended)
    • Navigation Architecture
    • Subpage
    • Page Routing
    • Transition Animation
    • Cross-Package Routing
    • Split-View Layout
    • Page Routing (@ohos.router) (Not Recommended)
    • Transition from Router to Navigation
  • Component Layouts
    • Layout Overview
    • Building a Layout
      • Linear Layout (Row/Column)
      • Stack Layout (Stack)
      • Flex Layout (Flex)
      • Relative Layout (RelativeContainer)
      • Responsive Grid Layout (GridRow/GridCol)
      • Using Tabs (Tabs)
  • Lists and Grids
    • List and Grid Overview
    • Creating a List (List)
    • Creating an Arc List (ArcList) (Recommended for Circular Screens)
    • Creating a Grid (Grid/GridItem)
    • Creating a Waterfall Flow (WaterFlow)
  • Using Text
    • Introduction to Text
    • Text Display (Text/Span)
    • Text Input (TextInput/TextArea/Search)
    • Rich Text Editing (RichEditor)
    • Symbol Glyph (SymbolGlyph/SymbolSpan)
    • Styled String (StyledString/MutableStyledString)
    • Text and Image Layout
  • Media Display
    • Image Display (Image)
    • Video Playback (Video)
    • Creating a Swiper (Swiper)
    • Creating an Arc Carousel Component (ArcSwiper) (Recommended for Circular Screens)
  • Form Selection
    • Form and Selection Component Overview
    • Button
    • Arc Button (ArcButton) (Recommended for Circular Screens)
    • Radio Button (Radio)
    • Toggle
  • Adding a Component
    • Custom Rendering (XComponent)
    • Progress Indicator (Progress)
  • Using Popup Windows
    • Popup Window Overview
    • Dialog Boxes (Dialog)
      • Dialog Box Overview
      • Global Custom Dialog Box Independent of UI Components (openCustomDialog) (Recommended)
      • Basic Custom Dialog Box (CustomDialog) (Not Recommended)
      • Fixed Style Dialog Box
      • Page-Level Dialog Box
      • Dialog Box Layer Management
      • Dialog Controller
      • Dialog Box Focus Policy
      • Popup Mask Control
    • Using Menus
      • Menu Overview
      • Menu Control (Menu)
      • Global Menu Independent of UI Components (openMenu)
    • Using Popups
      • Popup Overview
      • Popup
      • Global Popup Independent of UI Components (openPopup)
    • Binding Modal Pages
      • Modal Page Overview
      • Binding a Modal Sheet (bindSheet)
      • Binding a Full-Modal Page (bindContentCover)
    • Using Toasts (Toast)
    • Managing Overlays (OverlayManager)
  • Geometric Shapes
    • Geometric Shape Drawing Overview
    • Drawing Geometric Shapes (Shape)
    • Clipping Shapes (clipShape)
  • Implementing Interaction Responses
    • Interaction Response Overview
    • Interaction Mechanism Overview
    • Input Devices and Events
      • Handling Touchscreen Input Events
      • Handling Mouse Input Events
      • Handling Touchpad Input Events
      • Handling Keyboard Input Events
      • Handling Gamepad Input Events
      • Handling Crown Events
    • Implementing Gesture Responses
      • Gesture Binding
      • Single Gesture
      • Combined Gestures
      • Multi-level Gesture Events
      • Gesture Conflict Handling
    • Implementing Unified Drag and Drop
    • Implementing Focus Support
  • Using Animation
    • Animation Overview
    • Property Animation
      • Property Animation Overview
      • Implementing Property Animation
      • Custom Property Animation
    • Transition Animation
      • Transition Animation Overview
      • Enter/Exit Transition
      • Modal Transition
      • Shared Element Transition
      • Rotation Transition Animation
      • Page Transition Animation (Not Recommended)
    • Particle Animation
    • Component Animation
    • Animation Curve
      • Animation Curve Overview
      • Traditional Curve
      • Spring Curve
    • Animation Smoothing
    • Animation Effects
      • Blur Effect
      • Shadow Effect
      • Color Effect
    • Frame Animation (ohos.animator)
  • Using Customization Capabilities
    • Customization Capability Overview
    • Custom Composition
    • Custom Nodes
      • Custom Node Overview
      • Custom Placeholder Nodes
      • Custom Component Node (FrameNode)
      • Custom RenderNode (RenderNode)
      • Custom Declarative Node (BuilderNode)
      • Setting Custom Node Cross-Language Attributes
    • Custom Drawing
      • Drawing Custom Graphics on the Canvas (Canvas)
      • Custom Drawing Modifier (DrawModifier)
    • Modifier
      • Custom Extension Capability Overview
      • Content Modifier (ContentModifier)
      • Attribute Modifier (AttributeModifier)
      • Attribute Updater (AttributeUpdater)
  • Implementing UI Internationalization
  • Implementing Accessibility and Aging-Friendly Design
    • Supporting Accessibility
    • Supporting Aging-Friendly Design
  • Setting the Theme
    • Implementing Dark and Light Mode Adaptation
    • Configuring In-Application Theme Skinning
  • UI Scene-based Capabilities
    • Using the UI Context API for UI Operations (UIContext)
    • Using Component Snapshot (ComponentSnapshot)
    • Detecting Component Visibility
    • Inspecting Page Layouts
    • Media Query (@ohos.mediaquery)
    • Using Embedded Components
      • Atomic Service Full Screen Launch Component (FullScreenLaunchComponent)
      • In-Application Embedded Component (EmbeddedComponent)
    • Cross-Process Application Capability Extension (UIExtension, for System Applications Only)
    • Cross-Thread Embedded Component (IsolatedComponent, for System Applications Only)
• Using NDK APIs to Build UIs
  • NDK-Based UI Development Overview
  • Integrating with ArkTS Pages
  • Adding Interaction Events
    • Listening for Component Events
    • Binding Gesture Events
    • Drag Event
    • Listening for Component Layout and Drawing Events
  • Using Animations
  • Building a Layout
    • Implementing a List Layout
    • Implementing a Waterfall Flow Layout
  • Using Text
    • Drawing and Displaying Text in Text Components
    • Listening for Text Box Events
  • Building Dialog Boxes
  • Building Custom Components
  • Embedding ArkTS Components
  • Building a Rendering Node
  • Integrating Accessibility Through XComponent
  • Implementing Custom Drawing
  • Querying and Operating Custom Nodes
  • Launching EmbeddedUIExtensionAbility with EmbeddedComponent
  • Ensuring Multi-Instance Functionality in the NDK
  • Creating Multi-threaded Components with the NDK
• UI Development (JavaScript-compatible Web-like Development Paradigm)
  • UI Development (JavaScript-compatible Web-like Development Paradigm) Overview
  • Framework Overview
    • File Organization
    • "js" Tag
    • app.js
    • Syntax
      • HML
      • CSS
      • JavaScript
    • Lifecycle
    • Resource Limitations and Access
    • Multi-Language Capability
  • Building the UI
    • Component Overview
    • Building a Layout
      • Layout Description
      • Adding Title and Paragraph Text
      • Adding an Image
      • Adding a Comment Area
      • Adding a Container
    • Adding Interactions
    • Developing Animations
    • Defining Gesture Events
    • Defining Page Routes
  • Common Component Development
    • Container Component Development
      • list Development
      • dialog Development
      • form Development
      • stepper Development
      • tabs Development
      • swiper Development
    • Basic Component Development
      • text Development
      • input Development
      • button Development
      • picker Development
      • image Development
      • image-animator Development
      • rating Development
      • slider Development
      • chart Development
      • switch Development
      • toolbar Development
      • menu Development
      • marquee Development
      • qrcode Development
      • search Development
    • Canvas Development
      • Canvas
      • CanvasRenderingContext2D
      • Path2D
      • OffscreenCanvasRenderingContext2D
    • Grid Layout
    • SVG Development
      • Basics
      • Graph Drawing
      • Path Drawing
      • Text Drawing
  • Animation Development
    • CSS Animation
      • Attribute Style Animation
      • Animation with the transform Attribute
      • Animation with the background-position Attribute
      • Animation for SVG Components
    • JavaScript Animation
      • Component Animation
      • Interpolator Animation
        • Animation Effect
        • Animation Frame
  • Custom Components
  • WebGL
• UI Debugging and Optimization
  • UI Stability Issue Debugging
    • UI Stability Issue Analysis Overview
    • Common UI-Related Application Crash Issues
    • Common UI Application Freezing Issues
  • Debugging UI Display Exceptions
  • UI Context Debugging
  • UI Preview
  • UI Profiling
  • High-Performance UI Development
  • UI Development FAQs
    • FAQs About Navigation Animation
    • FAQs About Text Components
• Window Manager
• Display Management