Chapter 3 Introduction to UI Components and Practical Applications (Part 2)
This article will continue to introduce commonly used components and animation features in the ArkUI framework, including Text components, Switch components, Slider components, and Animation components. Through clear conceptual explanations and practical examples, it aims to help beginners quickly master the usage of these functionalities and apply them flexibly in real-world development scenarios.
1. Text Component
The Text Component is a fundamental element for displaying textual content, supporting extensive styling and layout configurations. It can also incorporate subcomponents such as Span and ImageSpan for enhanced text presentation.
1.1 Text Component: Definition and Properties
Interface:
Text(content?: string | Resource, options?: TextOptions)Property Descriptions:
content：Displayed Text Content.
Styling: You can use the .style() method to specify styles such as alignment, font size, border, padding, etc., for the text.
1.2 Example Usage
content: The text content to be displayed. 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 }) {
// Set horizontal text alignment
// 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)
// Truncate content beyond 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)
// Truncate text with 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 offers checkbox, state button, and toggle switch styles. Child components are only supported when ToggleType is set to Button.
2.1 Definition and Parameters
Toggle(options: { type: ToggleType, isOn?: boolean })Parameter Descriptions:
- type: Defines the toggle component type, such as Switch, Checkbox, or Button.
- isOn: Indicates the current state (true or false).
2.2 Usage Examples
A simple example 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 values, such as in volume control, brightness adjustment, and other similar 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 increment.
- Style: Supports OutSet (external styling) and InSet (inline styling).
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)将滑动条返回值处理为整数精度
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 // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为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
Animation Component plays a pivotal role in modern UI design. It not only enhances interface intuitiveness but also significantly improves an application's visual appeal and user experience. Recognizing the critical importance of animation, the ArkUI development framework equips developers with robust animation capabilities, including property animations, transition animations, and custom animations. This article will provide a detailed exploration of these animation types, followed by practical demonstrations of their implementation in ArkUI.
4.1 Introduction to Animations
4.1.1 Property Animation
Property Animations empower developers to dynamically modify UI element attributes (such as position, size, and color), enabling the creation of rich and engaging animations. Within ArkUI, these animations can be fully customized by configuring parameters like target properties, duration, delay, and easing curves.
4.1.2 Transition Animation
Transition Animations are primarily used for screen transitions between UI pages. They ensure smoother visual changes during navigation, significantly enhancing user experience. ArkUI offers a variety of built-in transition effects, including fade-in/fade-out and slide, allowing developers to select the most appropriate animation style based on contextual requirements.
4.1.3 Custom Animation
Beyond property and transition animations, ArkUI also supports Custom Animation. This empowers developers to implement highly specialized effects through code-level control, enabling combinations of complex property changes, non-linear timing functions, and interactive triggers to address sophisticated or brand-aligned animation requirements.
4.2 Practical Demonstration
Following this, we will provide a practical demonstration of how to leverage these animation capabilities within ArkUI.
4.2.1 Property Animation Practical Demonstration
Suppose we have a button element and want to change its color when the user clicks it. We can achieve this effect using Property Animation. First, we need to create the button element and attach a click event listener to it. Then, when the click event is triggered, we utilize Property Animation to modify the button's color attribute over a specified duration.
// 创建按钮元素
Button button = new Button();
button.setText("点击我");
// 添加点击事件监听器
button.setOnClickedListener(() -> {
// 使用属性动画改变按钮颜色
Animation animation = new Animation();
animation.setProperty("backgroundColor", Color.RED, Color.BLUE);
animation.setDuration(1000); // 设置动画持续时间
animation.start(button); // 启动动画
});4.2.2 Transition Animation Practical Demonstration
Suppose we have two pages and want to navigate between them with a fade-in/fade-out transition animation when the user clicks a button. First, we need to create both page elements, along with a button and click event listener. Then, when the button is clicked, we trigger the Transition Animation to execute the page navigation.
// 创建两个页面元素
Page page1 = new Page();
Page page2 = new Page();
// 添加按钮和点击事件监听器到page1
Button button = new Button();
button.setText("切换到页面2");
page1.add(button);
button.setOnClickedListener(() -> {
// 使用转场动画切换到page2
Transition transition = new Transition();
transition.setType(TransitionType.FADE_IN_FADE_OUT); // 设置淡入淡出效果
transition.start(page1, page2); // 启动转场动画
});4.2.3 Custom Animation Practical Demonstration
Suppose we want to create a custom animation effect, such as making an element move along a specified path. First, we need to define the animation path. Then, we apply the Custom Animation to animate the element’s movement along this path.
// 创建动画路径
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(100, 100);
// 创建自定义动画
CustomAnimation customAnimation = new CustomAnimation(path);
customAnimation.setDuration(2000); // 设置动画持续时间
// 获取要移动的元素并应用动画
Element element = ...; // 假设已经有一个元素
customAnimation.start(element); // 启动自定义动画It is important to note that the code examples provided above are for demonstration purposes only, illustrating how to utilize animation capabilities within ArkUI. They are not intended as complete, runnable code. In actual development, developers need to create UI elements and configure animation parameters according to their specific requirements. To summarize, ArkUI offers a comprehensive suite of animation capabilities that simplify the creation of diverse UI animation effects. By strategically leveraging these capabilities, developers can significantly enhance the visual appeal and user experience of their applications.