Chapter 3 UI Component Introduction and Practical Applications (Part 2)

This article continues to explain common components and animation functions in the ArkUI framework, including Text components, Toggle components, Slider components, and Animation components. Through clear concept explanations and practical examples, it helps beginners quickly master the usage of these functions and flexibly apply them in actual development.

1. Text Component

The Text component is a basic component used to display a piece of text. It also supports rich style and layout configurations and can contain sub-components such as Span and ImageSpan.

1.1 Text Component Definition and Attributes

Interface:

Text(content?: string | Resource, options?: TextOptions)

Attribute description:

content: The text content to display.
Style settings: You can use the .style() method to specify alignment, font size, border, padding, and other styles for the text.

1.2 Usage Example

content: The text content to display. A simple example is as follows:

// xxx.ets
@Extend(Text)
function style(TextAlign: TextAlign) {
.textAlign(TextAlign)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
}

@Entry
@Component
struct TextExample1 {
build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
    // Text horizontal direction alignment setting
    // Single line text
    Text('textAlign').fontSize(9).fontColor(0xCCCCCC)
    Text('TextAlign set to Center.')
        .style(TextAlign.Center)
    Text('TextAlign set to Start.')
        .style(TextAlign.Start)
    Text('TextAlign set to End.')
        .style(TextAlign.End)

    // Multi-line text
    Text('This is the text content with textAlign set to Center.')
        .style(TextAlign.Center)
    Text('This is the text content with textAlign set to Start.')
        .style(TextAlign.Start)
    Text('This is the text content with textAlign set to End.')
        .style(TextAlign.End)

    // Text display method when text is too long
    Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)
    Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
        .textOverflow({ overflow: TextOverflow.Clip })
        .maxLines(1)
        .style(TextAlign.Start)

    Text('This is set textOverflow to Ellipsis text content.')
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(1)
        .style(TextAlign.Start)

    Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
    Text('This is the text with the line height set.')
        .style(TextAlign.Start)
    Text('This is the text with the line height set.')
        .style(TextAlign.Start)
        .lineHeight(20)
        }.height(600).width(340).padding({ left: 35, right: 35, top: 35 })
    }
}

2. Toggle Component

The component provides checkbox style, toggle button style, and switch style. Sub-components can only be included when ToggleType is Button.

2.1 Definition and Parameters

Toggle(options: { type: ToggleType, isOn?: boolean })

Parameter description:

type: Toggle type, such as Switch, Checkbox, Button.
isOn: Current state (true or false).

2.2 Usage Example

A simple example is as follows:

// xxx.ets
@Entry
@Component
struct ToggleExample {
build() {
    Column({ space: 10 }) {
    Text('type: Switch').fontSize(12).fontColor(0xcccccc).width('90%')
    Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Switch, isOn: false })
        .selectedColor('#007DFF')
        .switchPointColor('#FFFFFF')
        .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
        })

        Toggle({ type: ToggleType.Switch, isOn: true })
        .selectedColor('#007DFF')
        .switchPointColor('#FFFFFF')
        .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
        })
    }

    Text('type: Checkbox').fontSize(12).fontColor(0xcccccc).width('90%')
    Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Checkbox, isOn: false })
        .size({ width: 20, height: 20 })
        .selectedColor('#007DFF')
        .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
        })

        Toggle({ type: ToggleType.Checkbox, isOn: true })
        .size({ width: 20, height: 20 })
        .selectedColor('#007DFF')
        .onChange((isOn: boolean) => {
            console.info('Component status:' + isOn)
        })
    }

    Text('type: Button').fontSize(12).fontColor(0xcccccc).width('90%')
    Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) {
        Toggle({ type: ToggleType.Button, isOn: false }) {
        Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) => {
        console.info('Component status:' + isOn)
        })

        Toggle({ type: ToggleType.Button, isOn: true }) {
        Text('status button').fontColor('#182431').fontSize(12)
        }.width(106)
        .selectedColor('rgba(0,125,255,0.20)')
        .onChange((isOn: boolean) => {
        console.info('Component status:' + isOn)
        })
      }
    }.width('100%').padding(24)
 }
}

3. Slider Component

The Slider component is usually used to quickly adjust settings, such as volume adjustment, brightness adjustment, and other application scenarios.

3.1 Definition and Parameters

Interface:

Slider(options?: SliderOptions)

Parameter description:

value: Current slider value (supports two-way binding).
min / max: Minimum and maximum values of the slider.
step: Slider step.
Style: Supports OutSet (external style) and InSet (internal style).

3.2 Usage Example

// xxx.ets
@Entry
@Component
struct SliderExample {
@State outSetValueOne: number = 40
@State inSetValueOne: number = 40
@State noneValueOne: number = 40
@State outSetValueTwo: number = 40
@State inSetValueTwo: number = 40

build() {
    Column({ space: 8 }) {
    Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
    Row() {
        Slider({
        value: this.outSetValueOne,
        min: 0,
        max: 100,
        style: SliderStyle.OutSet
        })
        .showTips(true)
        .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
        })
        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
    }
    .width('80%')

    Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
    Row() {
        Slider({
        value: this.inSetValueOne,
        min: 0,
        max: 100,
        style: SliderStyle.InSet
        })
        .blockColor('#191970')
        .trackColor('#ADD8E6')
        .selectedColor('#4169E1')
        .showTips(true)
        .onChange((value: number, mode: SliderChangeMode) => {
            this.inSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
        })
        Text(this.inSetValueOne.toFixed(0)).fontSize(12)
    }
    .width('80%)
    }
}

4. Animation Component

In modern UI interface design, animation plays an important role. It can not only improve the intuitiveness of the interface but also significantly enhance the appearance and user experience of the application. The ArkUI development framework understands the importance of animation and provides developers with rich animation capabilities, such as property animations, transition animations, and custom animations.