回复
OpenHarmony应用开发-组件Stepper/StepperItem/Text/TextArea
素年锦时静待君丶
发布于 2023-4-14 15:43
浏览
0收藏
版本：v3.2 Release
Stepper
步骤导航器组件，适用于引导用户按照步骤完成任务的导航场景。
说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
仅能包含子组件StepperItem。
接口
Stepper(value?: { index?: number })
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
index | number | 否 | 设置步骤导航器当前显示StepperItem的索引值。 默认值：0 |
属性
无
事件
名称 | 描述 |
onFinish(callback: () => void) | 步骤导航器最后一个StepperItem的nextLabel被点击时，并且ItemState属性为Normal时，触发该回调 。 |
onSkip(callback: () => void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 |
onChange(callback: (prevIndex?: number, index?: number) => void) | 点击当前StepperItem的prevLabel进行步骤切换时触发该回调；或点击当前StepperItem的nextLabel，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。 - prevIndex：切换前的步骤页索引值。 - index：切换后的步骤页（前一页或者下一页）索引值。 |
onNext(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的nextLabel切换下一步骤时，当前页面不为步骤导航器最后一个StepperItem且ItemState属性为Normal时，触发该回调。 - index：当前步骤页索引值。 - pendingIndex：下一步骤页索引值。 |
onPrevious(callback: (index?: number, pendingIndex?: number) => void) | 点击StepperItem的prevLabel切换上一步骤时触发该回调。 - index：当前步骤页索引值。 - pendingIndex：上一步骤页索引值。 |
示例
// xxx.ets
@Styles function itemStyle () {
.width(336)
.height(621)
.margin({ top: 48, left: 12 })
.borderRadius(24)
.backgroundColor('#FFFFFF')
}
@Extend(Text) function itemTextStyle () {
.fontColor('#182431')
.fontSize(36)
.fontWeight(500)
.opacity(0.4)
.margin({ top: 82, bottom: 40 })
}
@Entry
@Component
struct StepperExample {
@State currentIndex: number = 0
@State firstState: ItemState = ItemState.Normal
@State secondState: ItemState = ItemState.Normal
@State thirdState: ItemState = ItemState.Normal
build() {
Stepper({
index: this.currentIndex
}) {
// 第一个步骤页
StepperItem() {
Column() {
Text('Page One')
.itemTextStyle()
Button('change status:' + this.firstState)
.backgroundColor('#007dFF')
.onClick(() => {
this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
})
}.itemStyle()
}
.nextLabel('Next')
.status(this.firstState)
// 第二个步骤页
StepperItem() {
Column() {
Text('Page Two')
.itemTextStyle()
Button('change status:' + this.secondState)
.backgroundColor('#007dFF')
.onClick(() => {
this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
})
}.itemStyle()
}
.nextLabel('Next')
.prevLabel('Previous')
.status(this.secondState)
// 第三个步骤页
StepperItem() {
Column() {
Text('Page Three')
.itemTextStyle()
Button('change status:' + this.thirdState)
.backgroundColor('#007dFF')
.onClick(() => {
this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
})
}.itemStyle()
}
.status(this.thirdState)
// 第四个步骤页
StepperItem() {
Column() {
Text('Page Four')
.itemTextStyle()
}.itemStyle()
}
}
.backgroundColor('#F1F3F5')
.onFinish(() => {
// 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
console.info('onFinish')
})
.onSkip(() => {
// 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
console.info('onSkip')
})
.onChange((prevIndex: number, index: number) => {
this.currentIndex
StepperItem
用作Stepper组件的页面子组件。
说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
支持单个子组件。
接口
StepperItem()
属性
参数名 | 参数类型 | 参数描述 |
prevLabel | string | 设置左侧文本按钮内容，第一页没有左侧文本按钮，当步骤导航器大于一页时，除第一页外默认值都为“返回”。 |
nextLabel | string | 设置右侧文本按钮内容，最后一页默认值为“开始”，其余页默认值为“下一步”。 |
status | ItemState | 步骤导航器nextLabel的显示状态。 默认值：ItemState.Normal |
ItemState枚举说明
名称 | 值 | 描述 |
Normal | 0 | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 |
Disabled | 1 | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 |
Waiting | 2 | 等待状态，右侧文本按钮不显示，显示等待进度条，不可点击进入下一个StepperItem。 |
Skip | 3 | 跳过状态，右侧文本按钮默认显示“跳过”，此时可在Stepper的onSkip回调中自定义相关逻辑。 |
示例
见Stepper。
Text
显示一段文本的组件。
说明：
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
可以包含Span子组件。
接口
Text(content?: string | Resource)
从API version 9开始，该接口支持在ArkTS卡片中使用。
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
content | string | Resource | 否 | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 默认值：’ ’ |
属性
除支持通用属性外，还支持以下属性：
名称 | 参数类型 | 描述 |
textAlign | 设置文本段落在水平方向的对齐方式 默认值：TextAlign.Start 说明： 文本段落宽度占满Text组件宽度；可通过align属性控制文本段落在垂直方向上的位置。 从API version 9开始，该接口支持在ArkTS卡片中使用。 | |
textOverflow | {overflow: TextOverflow} | 设置文本超长时的显示方式。 默认值：{overflow: TextOverflow.Clip} 说明： 文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 需配合 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
maxLines | number | 设置文本的最大行数。 默认值：Infinity 说明： 默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
lineHeight | string | number | Resource | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
decoration | { type: TextDecorationType, color?: ResourceColor} | 设置文本装饰线样式及其颜色。 默认值：{ type: TextDecorationType.None, color：Color.Black } 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
baselineOffset | number | string | 设置文本基线的偏移量，默认值0。 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： 设置该值为百分比时，按默认值显示。 |
letterSpacing | number | string | 设置文本字符间距。 从API version 9开始，该接口支持在ArkTS卡片中使用。 说明： 设置该值为百分比时，按默认值显示。 |
minFontSize | number | string | Resource | 设置文本最小显示字号。 需配合maxFontSize以及maxline或布局大小限制使用，单独设置不生效。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
maxFontSize | number | string | Resource | 设置文本最大显示字号。 需配合minFontSize以及maxline或布局大小限制使用，单独设置不生效。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
textCase | 设置文本大小写。 默认值：TextCase.Normal 从API version 9开始，该接口支持在ArkTS卡片中使用。 | |
copyOption9+ | 组件支持设置文本是否可复制粘贴。 默认值：CopyOptions.None 该接口支持在ArkTS卡片中使用。 |
说明：
不支持Text内同时存在文本内容和Span子组件。如果同时存在，只显示Span内的内容。
事件
支持通用事件。
示例
示例1
textAlign，textOverflow，maxLines，lineHeight使用示例。
// xxx.ets
@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.')
.textAlign(TextAlign.Center)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('TextAlign set to Start.')
.textAlign(TextAlign.Start)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('TextAlign set to End.')
.textAlign(TextAlign.End)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// 多行文本
Text('This is the text content with textAlign set to Center.')
.textAlign(TextAlign.Center)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with textAlign set to Start.')
.textAlign(TextAlign.Start)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with textAlign set to End.')
.textAlign(TextAlign.End)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// 文本超长时显示方式
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.None })
.maxLines(1)
.fontSize(12)
.border({ width: 1 })
.padding(10)
// 超出maxLines展示省略号
Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('')
.join('\u200B'))
.textOverflow({ overflow: TextOverflow.Ellipsis })
.maxLines(1)
.fontSize(12)
.border({ width: 1 })
.padding(10)
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.')
.fontSize(12).border({ width: 1 }).padding(10)
Text('This is the text with the line height set. This is the text with the line height set.')
.fontSize(12).border({ width: 1 }).padding(10)
.lineHeight(20)
}.height(600).width(350).padding({ left: 35, right: 35, top: 35 })
}
}
示例2
decoration，baselineOffset，letterSpacing，textCase使用示例：
@Entry
@Component
struct TextExample2 {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
Text('decoration').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with the decoration set to LineThrough and the color set to Red.')
.decoration({
type: TextDecorationType.LineThrough,
color: Color.Red
})
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with the decoration set to Overline and the color set to Red.')
.decoration({
type: TextDecorationType.Overline,
color: Color.Red
})
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with the decoration set to Underline and the color set to Red.')
.decoration({
type: TextDecorationType.Underline,
color: Color.Red
})
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// 文本基线偏移
Text('baselineOffset').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with baselineOffset 0.')
.baselineOffset(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with baselineOffset 30.')
.baselineOffset(30)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with baselineOffset -20.')
.baselineOffset(-20)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// 文本字符间距
Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with letterSpacing 3.')
.letterSpacing(3)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('This is the text content with letterSpacing -1.')
.letterSpacing(-1)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
Text('textCase').fontSize(9).fontColor(0xCCCCCC)
Text('This is the text content with textCase set to Normal.')
.textCase(TextCase.Normal)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// 文本全小写展示
Text('This is the text content with textCase set to LowerCase.')
.textCase(TextCase.LowerCase)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('100%')
// 文本全大写展示
Text('This is the text content with textCase set to UpperCase.')
.textCase(TextCase.UpperCase)
.fontSize(12).border({ width: 1 }).padding(10)
}.height(700).width(350).padding({ left: 35, right: 35, top: 35 })
}
}
TextArea
多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。
说明：
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
placeholder | 否 | 设置无输入时的提示文本。输入内容后，提示文本不显示。 | |
text | 否 | 设置输入框当前的文本内容。 当组件设置stateStyles等刷新属性时，建议通过onChange事件将状态变量与文本实时绑定， 避免组件刷新时TextArea中的文本内容异常。 | |
controller8+ | 否 | 设置TextArea控制器。 |
属性
除支持通用属性外，还支持以下属性：
名称 | 参数类型 | 描述 |
placeholderColor | 设置placeholder文本颜色。 | |
placeholderFont | Font | 设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。目前仅支持默认字体族。 |
textAlign | 设置文本在输入框中的水平对齐式。 默认值：TextAlign.Start | |
caretColor | 设置输入框光标颜色。 | |
inputFilter8+ | { value: ResourceStr, error?: (value: string) => void } | 通过正则表达式设置输入过滤器。匹配表达式的输入允许显示，不匹配的输入将被过滤。仅支持单个字符匹配，不支持字符串匹配。 - value：设置正则表达式。 - error：正则匹配失败时，返回被过滤的内容。 |
copyOption9+ | 设置输入的文本是否可复制。 设置CopyOptions.None时，当前TextArea中的文字无法被复制或剪切，仅支持粘贴。 |
说明：
通用属性padding的默认值为：
{
top: 8 vp,
right: 16 vp,
bottom: 8 vp,
left: 16 vp
}事件
除支持通用事件外，还支持以下事件：
名称 | 功能描述 |
onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。 - value：当前输入的文本内容。 |
onCopy8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。 - value：复制的文本内容。 |
onCut8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。 - value：剪切的文本内容。 |
onPaste8+(callback:(value: string) => void) | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。 - value：粘贴的文本内容。 |
TextAreaController8+
TextArea组件的控制器，目前可通过它设置TextArea组件的光标位置。
导入对象
controller: TextAreaController = new TextAreaController()caretPosition8+
caretPosition(value: number): void
设置输入光标的位置。
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
value | number | 是 | 从字符串开始到光标所在位置的字符长度。 |
示例
// xxx.ets
@Entry
@Component
struct TextAreaExample {
@State text: string = ''
controller: TextAreaController = new TextAreaController()
build() {
Column() {
TextArea({
text: this.text,
placeholder: 'The text area can hold an unlimited amount of text. input your word...',
controller: this.controller
})
.placeholderFont({ size: 16, weight: 400 })
.width(336)
.height(56)
.margin(20)
.fontSize(16)
.fontColor('#182431')
.backgroundColor('#FFFFFF')
.onChange((value: string) => {
this.text = value
})
Text(this.text)
Button('Set caretPosition 1')
.backgroundColor('#007DFF')
.margin(15)
.onClick(() => {
// 设置光标位置到第一个字符后
this.controller.caretPosition(1)
})
}.width('100%').height('100%').backgroundColor('#F1F3F5')
}
}
标签
已于2023-4-14 15:43:47修改
赞
收藏
回复
相关推荐
