第三章 UI组件介绍和实际应用(中)
本文将继续为您讲解 ArkUI 框架中的常用组件和动画功能，包括文本组件、切换组件、滑动条组件以及动画组件。通过清晰的概念讲解和实战示例，帮助初学者快速掌握这些功能的用法，并在实际开发中灵活运用。
1. 文本组件
文本组件 是用于显示一段文本的基础组件，同时支持丰富的样式和布局配置，还可以包含 Span、ImageSpan 等子组件。
1.1 文本组件的定义与属性
接口：
Text(content?: string | Resource, options?: TextOptions)属性说明：
- content：显示的文本内容。
- 样式设置：可以通过 .style() 方法为文本指定对齐方式、字体大小、边框、填充等样式。
1.2 使用示例
content：要显示的文本内容，一个简单的例子如下：
// 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('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)
// 多行文本
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('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)
// 超出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)
// 超出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组件
组件提供勾选框样式、状态按钮样式及开关样式。仅当ToggleType为Button时可包含子组件。
2.1 定义与参数
Toggle(options: { type: ToggleType, isOn?: boolean })参数说明：
- type：切换类型，如 Switch（开关）、Checkbox（复选框）、Button（按钮）。
- isOn：当前状态（true 或 false）。
2.2 使用实例
一个简单的例子如下：
// 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. 滑动条组件
滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
3.1 定义与参数
接口：
Slider(options?: SliderOptions)参数说明：
- value：当前滑动值（支持双向绑定）。
- min / max：滑动条的最小值和最大值。
- step：滑动步长。
- 样式：支持 OutSet（外置样式）和 InSet（内嵌样式）。
3.2 使用示例
// 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. 动画组件
在现代UI界面设计中，动画扮演着举足轻重的角色。它不仅能够提升界面的直观性，还能显著改善应用程序的外观和用户体验。ArkUI开发框架深知动画的重要性，为开发者提供了丰富的动画能力，如属性动画、转场动画及自定义动画等。接下来，本文将详细介绍这些动画类型，并通过实战演示如何在ArkUI中使用它们。
4.1 动画介绍
4.1.1 属性动画
属性动画允许开发者对UI元素的属性（如位置、大小、颜色等）进行动态改变，从而创建出丰富的动画效果。在ArkUI中，属性动画可以通过设置动画属性、持续时间、延迟时间等参数来定制。
4.1.2 转场动画
转场动画主要用于页面之间的切换效果。它能够使界面在切换时更加流畅，提升用户体验。ArkUI提供了多种转场动画效果，如淡入淡出、滑动等，开发者可以根据实际需求选择合适的动画效果。
4.1.3 自定义动画
除了属性动画和转场动画外，ArkUI还支持自定义动画。开发者可以通过编写代码来定义自己的动画效果，实现更加复杂和个性化的动画需求。
4.2 实战演示
接下来，我们将通过实战演示如何在ArkUI中使用这些动画能力。
4.2.1 属性动画实战
假设我们有一个按钮元素，想要在用户点击按钮时改变其颜色。我们可以使用属性动画来实现这一效果。首先，我们需要创建一个按钮元素，并为其添加点击事件监听器。然后，在点击事件触发时，我们使用属性动画来改变按钮的颜色。
// 创建按钮元素
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 转场动画实战
假设我们有两个页面，想要在用户点击按钮时切换到另一个页面，并添加淡入淡出的转场动画效果。首先，我们需要创建两个页面元素，并为其添加按钮和点击事件监听器。然后，在点击事件触发时，我们使用转场动画来实现页面切换。
// 创建两个页面元素
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 自定义动画实战
假设我们想要创建一个自定义的动画效果，如让一个元素沿着特定路径移动。首先，我们需要定义一个动画路径。然后，我们使用自定义动画来实现元素沿着该路径移动的效果。
// 创建动画路径
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); // 启动自定义动画需要注意的是，以上代码示例仅用于演示如何在ArkUI中使用动画能力，并非完整的可运行代码。在实际开发中，开发者需要根据自己的需求来创建UI元素、设置动画参数等。综上所述，ArkUI为开发者提供了丰富的动画能力，使得在UI界面中创建出各种动画效果变得更加简单和直观。通过合理使用这些动画能力，开发者可以显著提升应用程序的外观和用户体验。