Chapter 3 UI Component Introduction and Practical Applications (Part 2)
This article will continue to explain the 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, this guide helps beginners quickly master the usage of these features and apply them flexibly in actual development.
1. Text Component
The Text component is a basic component used to display text content, supporting rich style and layout configurations, and can also contain sub-components such as Span and ImageSpan.
1.1 Text Component Definition and Properties
Interface:
Text(content?: string | Resource, options?: TextOptions)Property 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 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 overflow display method
Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)
// Display truncated content when exceeding maxLines
Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. 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)
// Display ellipsis when exceeding maxLines
Text('This is set textOverflow to Ellipsis text content 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. This is the text with the line height set.')
.style(TextAlign.Start)
Text('This is the text with the line height set. 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: The toggle type, such as Switch, Checkbox, or Button.
- isOn: The 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 commonly used for quickly adjusting settings, such as volume control, brightness adjustment, and other application scenarios.
3.1 Definition and Parameters
Interface:
Slider(options?: SliderOptions)Parameter Description:
- value: The current slider value (supports two-way binding).
- min / max: The minimum and maximum values of the slider.
- step: The 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
@State vOutSetValueOne: number = 40
@State vInSetValueOne: number = 40
@State vOutSetValueTwo: number = 40
@State vInSetValueTwo: 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())
})
// toFixed(0) processes the slider return value to integer precision
Text(this.outSetValueOne.toFixed(0)).fontSize(12)
}
.width('80%')
Row() {
Slider({
value: this.outSetValueTwo,
step: 10,
style: SliderStyle.OutSet
})
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.outSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString())
})
Text(this.outSetValueTwo.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%')
Row() {
Slider({
value: this.inSetValueTwo,
step: 10,
style: SliderStyle.InSet
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.inSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString())
})
Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
}
.width('80%')
Text('none slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
Row() {
Slider({
value: this.noneValueOne,
min: 0,
max: 100,
style: SliderStyle.NONE
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.noneValueOne = value
console.info('value:' + value + 'mode:' + mode.toString())
})
Text(this.noneValueOne.toFixed(0)).fontSize(12)
}
.width('80%')
Row() {
Column() {
Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
Row() {
Text().width('10%')
Slider({
value: this.vOutSetValueOne,
style: SliderStyle.OutSet,
direction: Axis.Vertical
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString())
})
Slider({
value: this.vOutSetValueTwo,
step: 10,
style: SliderStyle.OutSet,
direction: Axis.Vertical
})
.blockColor('#191970')
.trackColor('#ADD8E6')
.selectedColor('#4169E1')
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vOutSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString())
})
}
}.width('50%').height(300)
Column() {
Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
Row() {
Slider({
value: this.vInSetValueOne,
style: SliderStyle.InSet,
direction: Axis.Vertical,
reverse: true // Vertical Slider defaults to min at top and max at bottom, so to slide from bottom to top, set reverse to true
})
.showTips(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueOne = value
console.info('value:' + value + 'mode:' + mode.toString())
})
Slider({
value: this.vInSetValueTwo,
step: 10,
style: SliderStyle.InSet,
direction: Axis.Vertical,
reverse: true
})
.showSteps(true)
.onChange((value: number, mode: SliderChangeMode) => {
this.vInSetValueTwo = value
console.info('value:' + value + 'mode:' + mode.toString())
})
}
}.width('50%').height(300)
}
}.width('100%')
}
}4. Animation Component
In modern UI interface design, animation plays a crucial role. It not only improves the intuitiveness of the interface but also significantly enhances the appearance of the application and user experience. 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. Next, this article will provide a detailed introduction to these animation types and demonstrate how to use them in ArkUI through practical examples.
4.1 Animation Introduction
4.1.1 Property Animation
Property animation allows developers to dynamically change the properties of UI elements (such as position, size, color, etc.), thereby creating rich animation effects. In ArkUI, property animation can be customized by setting animation properties, duration, delay time, and other parameters.
4.1.2 Transition Animation
Transition animation is mainly used for effects when switching between pages. It can make the interface transition more smoothly and improve user experience. ArkUI provides various transition animation effects, such as fade-in/out, sliding, etc., and developers can choose the appropriate animation effect based on actual needs.
4.1.3 Custom Animation
In addition to property animation and transition animation, ArkUI also supports custom animation. Developers can define their own animation effects by writing code to achieve more complex and personalized animation requirements.
4.2 Practical Demonstration
Next, we will demonstrate how to use these animation capabilities in ArkUI through practical examples.
4.2.1 Property Animation Practice
Suppose we have a button element and want to change its color when the user clicks the button. We can use property animation to achieve this effect. First, we need to create a button element and add a click event listener to it. Then, when the click event is triggered, we use property animation to change the button's color.
// Create button element
Button button = new Button();
button.setText("Click Me");
// Add click event listener
button.setOnClickedListener(() -> {
// Use property animation to change button color
Animation animation = new Animation();
animation.setProperty("backgroundColor", Color.RED, Color.BLUE);
animation.setDuration(1000); // Set animation duration
animation.start(button); // Start animation
});4.2.2 Transition Animation Practice
Suppose we have two pages and want to switch to another page when the user clicks a button, adding a fade-in/fade-out transition animation effect. First, we need to create two page elements and add buttons and click event listeners to them. Then, when the click event is triggered, we use transition animation to achieve page switching.
// Create two page elements
Page page1 = new Page();
Page page2 = new Page();
// Add button and click event listener to page1
Button button = new Button();
button.setText("Switch to Page 2");
page1.add(button);
button.setOnClickedListener(() -> {
// Use transition animation to switch to page2
Transition transition = new Transition();
transition.setType(TransitionType.FADE_IN_FADE_OUT); // Set fade-in/fade-out effect
transition.start(page1, page2); // Start transition animation
});4.2.3 Custom Animation Practice
Suppose we want to create a custom animation effect, such as moving an element along a specific path. First, we need to define an animation path. Then, we use custom animation to achieve the effect of the element moving along that path.
// Create animation path
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(100, 100);
// Create custom animation
CustomAnimation customAnimation = new CustomAnimation(path);
customAnimation.setDuration(2000); // Set animation duration
// Get the element to move and apply animation
Element element = ...; // Assume we already have an element
customAnimation.start(element); // Start custom animationIt should be noted that the above code examples are only for demonstrating how to use animation capabilities in ArkUI and are not complete runnable code. In actual development, developers need to create UI elements and set animation parameters according to their needs. In summary, ArkUI provides developers with rich animation capabilities, making it simpler and more intuitive to create various animation effects in UI interfaces. By reasonably using these animation capabilities, developers can significantly improve the appearance of their applications and user experience.