Working with Image Elements

The Image component handles visual asset rendering within the interface. ArkUI supports three primary initialization sources:

• Network URLs (String): Suitable for remote resources. Requires the ohos.permission.INTERNET declaration in the module configuration.
• PixelMap Objects: Ideal for programmatically decoded bitmaps or image processing workflows.
• Resource References (Recommended): Points to local assets bundled with the application. Supports both media resources and raw files.

// Remote asset loading
Image('https://example.com/assets/banner.jpg')
  .width('100%')
  .height(220)
  .borderRadius(16)
  .interpolation(ImageInterpolation.High);

// Local resource loading
Image($r('app.media.profile_avatar'))
  .width(100)
  .height(100)
  .objectFit(ImageFit.Contain);

Rendering Text Content

Text components display readable strings. Content can be passed as a literal or resolved from localized string resources.

// Direct string assignment
Text('System Status: Active')
  .fontSize(16)
  .lineHeight(22)
  .fontColor('#FF333333')
  .fontWeight(FontWeight.Bold)
  .onClick(() => {
    console.info('Label tapped');
  });

// Resource-based assignment
Text($r('app.string.welcome_note'))
  .fontColor('#FF121212')
  .fontSize(20);

Capturing Input with TextInput

The TextInput component collects user data. Initialization accepts optional parameters for default content and placeholder hints. Styling and event binding follow the standard declarative pattern.

// Initializing with placeholder and default value
TextInput({
  placeholder: 'Enter your email address',
  text: 'demo@provider.com'
})
  .width('85%')
  .height(48)
  .backgroundColor('#F8F9FA')
  .type(InputType.Text)
  .onChange((inputValue: string) => {
    console.info(`Current value: ${inputValue}`);
  });

Interactive Button Controls

Buttons trigger actions and can display simple labels or composite layouts. The visual shape is controlled via the .type() modifier, supporting standard rectangles, capsules, and circles.

// Simple text button
Button('Confirm Selection')
  .width(180)
  .height(44)
  .type(ButtonType.Capsule)
  .onClick(() => {
    // Execute confirmation logic
  });

// Composite button with nested elements
Button() {
  Row() {
    Image($r('app.media.icon_check')).width(18)
    Text('Approve').margin({ left: 6 })
  }
  .alignItems(VerticalAlign.Center)
  .justifyContent(FlexAlign.Center)
}
  .width(130)
  .height(40)
  .backgroundColor('#007AFF')
  .type(ButtonType.Normal);

Range Selection with Slider

The Slider component enables value selection within a defined range. Configuration includes minimum/maximum bounds, increment steps, visual style, orientation, and directional behavior.

Slider({
  value: 320,
  min: 200,
  max: 400,
  step: 10,
  style: SliderStyle.OutSet,
  direction: Axis.Horizontal,
  reverse: false
})
  .width('90%')
  .trackThickness(6)
  .showTips(true)
  .blockColor('#E91E63')
  .onChange((selectedValue: number) => {
    console.info(`Slider position: ${selectedValue}`);
  });