1 Stepper 与 StepperItem 组件
Stepper组件是鸿蒙系统中用于实现步骤导航或分步操作的UI组件。它提供了一种清晰的方式来引导用户完成一系列相关的任务，如多步骤的表单填写、安装向导等。Stepper组件仅能包含子组件StepperItem，每个StepperItem代表一个步骤，通过Stepper和StepperItem组件的组合，可以定义出复杂的多步骤导航流程。
1.1 Stepper组件的主要功能
- 布局方向设置：Stepper组件支持水平（Horizontal）和垂直（Vertical）两种布局方向，开发者可以根据实际需求选择合适的布局方式。
- 活动步骤追踪：通过Stepper组件的index属性，可以设置或获取当前处于活动状态的StepperItem的索引。这有助于开发者追踪用户的进度，并在必要时提供相应的引导或反馈。
- 事件回调：Stepper组件提供了多个事件回调，如onChange、onNext、onPrevious等，这些回调可以在步骤切换时触发相应的逻辑处理，如数据验证、页面跳转等。
1.2 StepperItem组件概述
StepperItem组件是Stepper组件的子组件，用于定义每个步骤的具体内容。每个StepperItem通常包含与该步骤相关的标题、描述、输入框、按钮等元素。StepperItem组件支持丰富的属性设置，以满足不同应用场景的需求。
1.3 StepperItem组件的主要属性
- 左侧文本按钮（prevLabel）：设置左侧文本按钮的内容，通常用于返回上一步骤。第一页没有左侧文本按钮，其余页默认值为“返回”。
- 右侧文本按钮（nextLabel）：设置右侧文本按钮的内容，通常用于进入下一步骤。最后一页默认值为“开始”，其余页默认值为“下一步”。
- 状态（status）：设置步骤导航器nextLabel的显示状态，如normal、disabled、waiting、skip等。这有助于开发者根据步骤的完成情况或用户权限来动态调整按钮的可用性。
1.4 Stepper和StepperItem组件的应用场景
- 多步骤表单填写：在注册或信息提交页面，使用Stepper和StepperItem组件可以将复杂的表单拆分为多个简单的步骤，如基本信息填写、联系方式填写、确认信息等步骤，从而提高用户体验。
- 安装向导：对于软件或设备的安装过程，通过Stepper组件展示如安装前准备、安装中步骤、安装后配置等多个阶段，可以引导用户顺利完成安装。
- 购物流程引导：在电商应用中，购物流程可能包括选择商品、填写收货信息、选择支付方式等步骤。使用Stepper和StepperItem组件可以清晰地引导用户完成整个购物流程。
1.5 示例代码
// 引入系统提示模块
import prompt from '@system.prompt';
@Entry
@Component
struct StepperExample {
// 定义一个状态变量，用于跟踪当前步骤的索引
@State currentIndex: number = 0;
// 定义一个状态变量，用于控制Page 2的按钮是否可用
@State enablePage2: boolean = false;
// 定义一个状态变量，用于指示Page 3是否正在加载
@State page3isLoading: boolean = true;
build() {
// 创建一个Stepper组件，并绑定当前步骤索引
Stepper({
index: this.currentIndex
}) {
// 第一个步骤项
StepperItem() {
Column() {
// 显示步骤标题
Text('Page 1')
// 添加空白空间
Blank(10)
// 创建“Next”按钮，点击后切换到下一个步骤
Button('Next').backgroundColor('#007dFF').onClick(() => {
// 处理按钮点击逻辑
this.currentIndex = 1;
})
}
}.nextLabel('Next').status(ItemState.Normal) // 设置下一步按钮的标签和状态
// 第二个步骤项
StepperItem() {
Column() {
// 显示步骤标题
Text('Page 2')
// 添加空白空间
Blank(10)
// 创建按钮，根据enablePage2状态显示“Next”或“enable”
Button(this.enablePage2 ? 'Next' : "enable").backgroundColor('#007dFF').onClick(() => {
if (this.enablePage2) {
// 如果按钮可用，切换到下一个步骤
this.currentIndex = 2;
} else {
// 否则，将按钮状态设置为可用
this.enablePage2 = true;
}
})
}
}.nextLabel('Next').prevLabel('Previous').status(this.enablePage2 ? ItemState.Normal : ItemState.Disabled) // 设置按钮的标签和状态
// 第三个步骤项
StepperItem() {
Column() {
// 显示步骤标题
Text('Page 3')
// 添加空白空间
Blank(10)
// 创建按钮，根据page3isLoading状态显示“Load finish”或“Next”
Button(this.page3isLoading ? 'Load finish' : 'Next').backgroundColor('#007dFF').onClick(() => {
if (this.page3isLoading) {
// 如果正在加载，设置加载完成状态
this.page3isLoading = false;
} else {
// 否则，切换到下一个步骤
this.currentIndex = 3;
}
})
}
}.nextLabel('Next').prevLabel('Previous').status(this.page3isLoading ? ItemState.Waiting : ItemState.Normal) // 设置按钮的标签和状态
// 第四个步骤项
StepperItem() {
Column() {
// 显示步骤标题
Text('Page 4')
// 添加空白空间
Blank(10)
// 创建“Next”按钮，点击后切换到下一个步骤
Button('Next').backgroundColor('#007dFF').onClick(() => {
this.currentIndex = 4;
})
}
}.nextLabel('Next').prevLabel('Previous').status(ItemState.Skip) // 设置按钮的标签，并标记为可跳过
// 第五个步骤项
StepperItem() {
Column() {
// 显示步骤标题
Text('Page 5')
// 添加空白空间
Blank(10)
// 创建“Go First”按钮，点击后返回到第一个步骤
Button('Go First').backgroundColor('#007dFF').onClick(() => {
this.currentIndex = 0;
})
}
}.nextLabel('Finish').prevLabel('Previous') // 设置完成按钮的标签
// 可以继续添加更多的StepperItem
}.backgroundColor('#F1F3F5') // 设置Stepper组件的背景颜色
.onSkip(() => {
// 当用户跳过步骤时触发的回调
prompt.showToast({
"message": "你跳过了我" // 显示提示信息
});
this.currentIndex += 1; // 跳过当前步骤
})
.onChange((prevIndex: number, index: number) => {
// 当步骤改变时触发的回调
this.currentIndex = index; // 更新当前步骤索引
prompt.showToast({
"message": "number -> " + index // 显示当前步骤索引
});
})
.onFinish(() => {
// 当所有步骤完成时触发的回调
prompt.showToast({
"message": "Finish" // 显示完成提示信息
});
});
}
}
2 TextArea 多行文本输入框组件
在鸿蒙系统开发中，TextArea组件是一个强大的多行文本输入框，它不仅支持丰富的样式设置，还允许开发者处理多种用户交互事件。本示例将展示如何使用TextArea组件实现文本输入，并通过事件处理函数响应用户的提交和文本变化操作。
@Entry // 装饰器，标记该组件为应用的入口点
@Component // 声明一个组件
struct Index {
@State text: string = '' // 声明一个状态变量，用于存储输入框的文本内容
build() {
// 构建UI界面的方法
Scroll() {
// 创建一个滚动容器，允许内容在屏幕上滚动显示
TextArea({
placeholder: "蝴蝶在哪里，蝴蝶在这里！", // 设置输入框的占位符文本
text: this.text // 绑定输入框的文本内容到状态变量
})
.placeholderColor(Color.Gray) // 设置占位符文本的颜色为灰色
.placeholderFont({ size: 50, weight: 200 }) // 设置占位符文本的字体大小和粗细
.fontSize(20) // 设置输入框中文本的字体大小为20
.fontColor(Color.Orange) // 设置输入框中文本的颜色为橙色
.margin(20) // 设置输入框的外边距为20像素
.copyOption(CopyOptions.LocalDevice) // 设置复制选项，允许在本地设备内复制文本
.caretColor(Color.Blue) // 设置输入框光标颜色为蓝色
.type(TextAreaType.NORMAL) // 设置输入框类型为普通文本输入
.enterKeyType(EnterKeyType.Send) // 设置软键盘的回车键类型为“发送”
.onSubmit((enterKey: EnterKeyType) => {
// 当用户点击回车键提交时触发的事件处理函数
this.text = "" // 清空输入框的文本内容
})
.onChange((value: string, previewText?: PreviewText) => {
// 当输入框的文本内容发生变化时触发的事件处理函数
this.text = value // 更新状态变量，以同步输入框的文本内容
})
}
}
}
TextArea组件
TextArea组件创建了一个多行文本输入框。placeholder属性设置了输入框的占位符文本，当输入框为空时显示。text属性绑定了输入框的文本内容到状态变量this.text，实现了双向数据绑定。placeholderColor、placeholderFont、fontSize、fontColor等属性用于设置输入框的样式，包括占位符文本的颜色、字体大小和粗细，以及输入框中文本的颜色和字体大小。margin属性设置了输入框的外边距，使其与周围的元素保持一定的距离。copyOption属性允许在本地设备内复制输入框中的文本内容。caretColor属性设置了输入框光标颜色为蓝色。
事件处理
type(TextAreaType.NORMAL)设置了输入框类型为普通文本输入。enterKeyType(EnterKeyType.Send)将软键盘的回车键设置为“发送”类型。onSubmit事件处理函数在用户点击回车键提交时触发。在这个示例中，我们简单地将输入框的文本内容清空。onChange事件处理函数在输入框的文本内容发生变化时触发。我们将新的文本内容赋值给状态变量this.text，以实现输入框与状态变量的同步更新。
3 TextInput 单行文本输入框组件
@Entry
@Component
struct Index {
@State text:string = ''
build() {
Column() {
TextClock().margin(20).format('yyyy年MM月dd日 hh:mm:ss')
TextInput({ placeholder: "请输入密码", text: this.text })
.placeholderColor(Color.Gray)
.placeholderFont({ size: 50, weight: 200 })
.fontSize(20)
.fontColor(Color.Orange)
.margin(20)
.copyOption(CopyOptions.LocalDevice)
.caretColor(Color.Blue)
.type(InputType.Password)
.enterKeyType(EnterKeyType.Send)
.showPasswordIcon(true)
.onSubmit((enterKey:EnterKeyType) => {
this.text = ""
})
.onChange((value: string, previewText?: PreviewText) => {
this.text = value
})
}
}
}
