DEV Community

魔眼天王
魔眼天王

Posted on

Comprehensive Guide to ArkTS Component Properties

#harmony

I. Core Styling Property System

1. Dimension Control 

// Three unit systems comparison Text('Title') .width(120) // Absolute unit (vp) .height('50%') // Relative unit (parent percentage) .minHeight('100vp') // Minimum height // Responsive best practices Column({ space: 20 }) { Text() .width('100%') // Full width .height(44) // Fixed height .padding({ left: 16, right: 16 }) // Padding }
Enter fullscreen mode Exit fullscreen mode

​Development Recommendation:​​

  • Prefer vp units (1vp=1px@360dpi)

  • Combine percentage + adaptive layouts for complex structures

2. Color System Deep Dive 

// Triple background definition View() .backgroundColor('#FF0000') // Hex .backgroundColor(rgb(0, 125, 255)) // RGB .backgroundColor(Color.Primary) // System theme color // Gradient background Image() .backgroundImage($r('app.media.gradient')) .backgroundImageSize(ImageSize.Cover) // Cover mode
Enter fullscreen mode Exit fullscreen mode

3. Border & Corner Control 

Button('Submit') .border({ width: 2, color: '#FFFFFF', style: BorderStyle.Dashed // Dashed border }) .borderRadius(22) // Corner radius
Enter fullscreen mode Exit fullscreen mode

II. Layout Control Essentials

1. Linear Layout Parameters 

Column({ justifyContent: FlexAlign.Center, // Main axis alignment alignItems: ItemAlign.Stretch // Cross axis alignment }) { Text() .fontSize(18) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center) // Text centering }
Enter fullscreen mode Exit fullscreen mode

2. Flexbox Advanced 

Flex({ direction: FlexDirection.Row }) { Text() .layoutWeight(1) // Flex weight .fontSize(16) Image() .aspectRatio(1) // Aspect ratio lock .objectFit(ImageFit.Cover) // Cover mode }
Enter fullscreen mode Exit fullscreen mode

III. Interaction State Management

1. State Property Matrix

Property Usage Scenario Typical Values
disabled Interaction true/false
focusable Focus control true/false
opacity Transparency 0~1
visibility Display states Visible/Hidden/None

2. Focus State Handling 

@Entry @Component struct InputDemo { @State isFocused = false build() { TextInput() .isFocused(this.isFocused) .onFocus(() => this.isFocused = true) .onBlur(() => this.isFocused = false) .borderColor(this.isFocused ? Color.Blue : Color.Gray) } }
Enter fullscreen mode Exit fullscreen mode

IV. Style Reuse Best Practices

1. @styles Decorator 

@Styles commonStyle() { .width(200) .height(44) .backgroundColor(Color.Primary) .borderRadius(8) } @Component struct ButtonDemo { build() { Button('Submit') .commonStyle() // Style reuse .onClick(() => {}) } }
Enter fullscreen mode Exit fullscreen mode

2. Dynamic Styling 

@Entry @Component struct DynamicDemo { @State theme = 'dark' build() { View() .backgroundColor(theme === 'dark' ? Color.Black : Color.White) .fontColor(theme === 'dark' ? Color.White : Color.Black) } }
Enter fullscreen mode Exit fullscreen mode

V. Performance Optimization

  1. ​Overdraw Prevention​ 
 // ❌ Bad practice: Multiple background layers View() .backgroundColor(Color.Red) .backgroundImage($r('app.media.bg')) // ✅ Good practice: Single background layer View() .backgroundImage($r('app.media.bg')) .backgroundImagePosition(Alignment.Center)
Enter fullscreen mode Exit fullscreen mode
  1. ​Smart Preloading​ 
 // List preloading configuration List() { LazyForEach(data, (item) => { ListItem() }, (item) => item.id) .cachedCount(5) // Preload ±5 items }
Enter fullscreen mode Exit fullscreen mode

VI. Debugging Techniques

  1. ​Live Style Inspection​ 
 # Launch layout inspector devtools inspect --layout
Enter fullscreen mode Exit fullscreen mode
  1. ​Style Snapshot​ 
 // Add debug marker in component @Component struct DebugDemo { build() { View() .debugStyle('critical-button') // Debug tagging } }
Enter fullscreen mode Exit fullscreen mode

​Learning Roadmap:​​

  1. Master basic size/color/margin properties

  2. Proficiency in Flex layout system

  3. Master state-property interactivity

  4. Advanced style reuse techniques

  5. Performance optimization specialization

Top comments (0)