ArkUI
- About This Kit
- UI Development (ArkTS-based Declarative Development Paradigm)
- UI Development (ArkTS-based Declarative Development Paradigm) Overview
- Basic Syntax of UI Paradigms
-
Custom Components
-
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
- 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
- Application State Management
- Component State Management
- 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
- Application State Management
- Auxiliary APIs
- Syntax Sugar
- State Management V1 to V2 Migration
- Best Practices for State Management
- UI Paradigm Rendering Control
- Responsive Environment Variable
- Component Navigation and Page Routing
- Navigation (Recommended)
- Component Layouts
- 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
- 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
- Using Popup Windows
- Popup Window Overview
- Dialog Boxes (Dialog)
- Using Menus
- Using Popups
- Binding Modal Pages
- Using Toasts (Toast)
- Managing Overlays (OverlayManager)
- Geometric Shapes
- Implementing Interaction Responses
- Using Animation
- Animation Overview
- Property Animation
- Transition Animation
- Particle Animation
- Component Animation
- Animation Curve
- Animation Smoothing
- Animation Effects
- Frame Animation (ohos.animator)
- Using Customization Capabilities
- Customization Capability Overview
- Custom Composition
- Custom Nodes
- Custom Drawing
- Modifier
- Implementing UI Internationalization
- Implementing Accessibility and Aging-Friendly Design
- Setting the Theme
- UI Scene-based Capabilities
- Using NDK APIs to Build UIs
- NDK-Based UI Development Overview
- Integrating with ArkTS Pages
- Adding Interaction Events
- Using Animations
- Building a Layout
- Using Text
- 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
- Building the UI
- Common Component Development
- Container Component Development
- Basic Component Development
- Canvas Development
- Grid Layout
- SVG Development
- Animation Development
- CSS Animation
- JavaScript Animation
- Component Animation
- Interpolator Animation
- Custom Components
- WebGL
- UI Debugging and Optimization
- UI Stability Issue Debugging
- Debugging UI Display Exceptions
- UI Context Debugging
- UI Preview
- UI Profiling
- High-Performance UI Development
- UI Development FAQs
- Window Manager
- Display Management