ArkUI组件

AlphabetIndexer
可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。

接口
AlphabetIndexer(value: {arrayValue: Array, selected: number})

元服务API: 从API version 11开始,该接口支持在元服务中使用。

参数:

参数名    参数类型    必填    参数描述
arrayValue    Array    是    字母索引字符串数组,不可设置为空。
selected    number    是    初始选中项索引值,若超出索引值范围,则取默认值0。从API version 10开始,该参数支持$$双向绑定变量。
属性
width属性设置"auto"时表示自适应宽度,宽度会随索引项最大宽度变化。

除支持通用属性外,还支持以下属性:

color
color(value: ResourceColor)

设置文字颜色。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    ResourceColor    是    文字颜色。默认值:0x99182431。
selectedColor
selectedColor(value: ResourceColor)

设置选中项文字颜色。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    ResourceColor    是    选中项文字颜色。默认值:0xFF007DFF。
popupColor
popupColor(value: ResourceColor)

设置提示弹窗文字颜色。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    ResourceColor    是    提示弹窗文字颜色。默认值:0xFF007DFF。
selectedBackgroundColor
selectedBackgroundColor(value: ResourceColor)

设置选中项背景颜色。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    ResourceColor    是    选中项背景颜色。默认值:0x1A007DFF。
popupBackground
popupBackground(value: ResourceColor)

设置提示弹窗背景色。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    ResourceColor    是    提示弹窗背景色。默认值:API version 11及以前:0xFFFFFFFF。API version 12及以后:#66808080。
usingPopup
usingPopup(value: boolean)

设置是否使用提示弹窗。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    boolean    是    是否使用提示弹窗。默认值:false。
selectedFont
selectedFont(value: Font)

设置选中项文字样式。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    Font    是    选中项文字样式。默认值:API version 11及以前:{size:‘12.0fp’,style:FontStyle.Normal,weight:FontWeight.Normal,family:‘HarmonyOS Sans’}API version 12及以后:{size:‘10.0vp’,style:FontStyle.Normal,weight:FontWeight.Medium,family:‘HarmonyOS Sans’}
popupFont
popupFont(value: Font)

设置提示弹窗字体样式。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    Font    是    提示弹窗字体样式。默认值:{size:‘24.0vp’,style:FontStyle.Normal,weight:FontWeight.Normal,family:‘HarmonyOS Sans’}
font
font(value: Font)

设置字母索引条默认字体样式。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    Font    是    字母索引条默认字体样式。默认值:API version 11及以前:{size:‘12.0fp’,style:FontStyle.Normal,weight:FontWeight.Normal,family:‘HarmonyOS Sans’}API version 12及以后:{size:‘10.0vp’,style:FontStyle.Normal,weight:FontWeight.Medium,family:‘HarmonyOS Sans’}
itemSize
itemSize(value: string | number)

设置字母索引条字母区域大小。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    string | number    是    字母索引条字母区域大小,字母区域为正方形,即正方形边长。不支持设置为百分比。默认值:16.0单位:vp
alignStyle
alignStyle(value: IndexerAlign, offset?: Length)

设置字母索引条弹框的对齐样式。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    IndexerAlign    是    字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。默认值: IndexerAlign.END。
offset10+    Length    否    提示弹窗与索引条之间间距,大于等于0为有效值,在不设置或设置为小于0的情况下间距与popupPosition.x相同。与popupPosition同时设置时,水平方向上offset生效,竖直方向上popupPosition.y生效。
selected8+
selected(index: number)

设置选中项索引值。

从API version 10开始,该参数支持$$双向绑定变量。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
index    number    是    选中项索引值。默认值:0
popupPosition8+
popupPosition(value: Position)

设置弹出窗口相对于索引器条上边框中点的位置。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    Position    是    弹出窗口相对于索引器条上边框中点的位置。默认值:{x:60.0, y:48.0}
popupSelectedColor10+
popupSelectedColor(value: ResourceColor)

设置提示弹窗非字母部分选中文字色。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    ResourceColor    是    提示弹窗非字母部分选中文字色。默认值:#FF182431
popupUnselectedColor10+
popupUnselectedColor(value: ResourceColor)

设置提示弹窗非字母部分未选中文字色。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    ResourceColor    是    提示弹窗非字母部分未选中文字色。默认值:#FF182431
popupItemFont10+
popupItemFont(value: Font)

设置提示弹窗非字母部分字体样式。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    Font    是    提示弹窗非字母部分字体样式。默认值:{size:24,weight:FontWeight.Medium}
popupItemBackgroundColor10+
popupItemBackgroundColor(value: ResourceColor)

设置提示弹窗非字母部分背景色。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    ResourceColor    是    提示弹窗非字母部分背景色。默认值:API version 11及以前:#FFFFFFFF。API version 12及以后:#00000000。
autoCollapse11+
autoCollapse(value: boolean)

设置是否使用自适应折叠模式。

如果字符串首字符为“#”,除去首字符。当剩余字符数 ≤ \leq≤ 9时,选择全显示模式。当9 < 剩余字符数 ≤ \leq≤ 13时,根据索引条高度自适应选择全显示模式或者短折叠模式。当剩余字符数 > 13时,根据索引条高度自适应选择短折叠模式或者长折叠模式。

如果字符串首字符不为“#”。当所有字符数 ≤ \leq≤ 9时,选择全显示模式。当9 < 所有字符数 ≤ \leq≤ 13时,根据索引条高度自适应选择全显示模式或者短折叠模式。当所有字符数 > 13时,根据索引条高度自适应选择短折叠模式或者长折叠模式。

元服务API: 从API version 12开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    boolean    是    是否使用自适应折叠模式。默认值:false
popupItemBorderRadius12+
popupItemBorderRadius(value: number)

设置提示弹窗索引项背板圆角半径。

元服务API: 从API version 12开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    number    是    设置提示弹窗索引项背板圆角半径。默认值:24vp。不支持百分比,小于0时按照0设置。提示弹窗背板圆角自适应变化(索引项圆角半径+4vp)。
itemBorderRadius12+
itemBorderRadius(value: number)

设置索引项背板圆角半径。

元服务API: 从API version 12开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    number    是    设置索引项背板圆角半径。默认值:8vp不支持百分比,小于0时按照0设置。索引条背板圆角自适应变化(索引项圆角半径+4vp)。
popupBackgroundBlurStyle12+
popupBackgroundBlurStyle(value: BlurStyle)

设置提示弹窗的背景模糊材质。

元服务API: 从API version 12开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    BlurStyle    是    设置提示弹窗的背景模糊材质。默认值:COMPONENT_REGULAR。
popupTitleBackground12+
popupTitleBackground(value: ResourceColor)

设置提示弹窗首个索引项背板颜色。

元服务API: 从API version 12开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
value    ResourceColor    是    设置提示弹窗首个索引项背板颜色。默认值:提示弹窗只有一个索引项:#00FFFFFF。提示弹窗有多个索引项:#0c182431。
enableHapticFeedback12+
enableHapticFeedback(enable: boolean)

参数名    类型    必填    说明
enable    boolean    否    支持触控反馈。默认值:true。
IndexerAlign枚举说明
元服务API: 从API version 11开始,该接口支持在元服务中使用。

名称    描述
Left    弹框显示在索引条右侧。
Right    弹框显示在索引条左侧。
START12+    在LTR场景下,弹框显示在索引条右侧的位置。在RTL场景下,弹框显示在索引条左侧的位置。
END12+    在LTR场景下,弹框显示在索引条左侧的位置。在RTL场景下,弹框显示在索引条右侧的位置。
事件
除支持通用事件外,还支持以下事件:

onSelected(deprecated)
onSelected(callback: (index: number) => void)

索引条选中回调,返回值为当前选中索引。

从API Version 8开始废弃,建议使用onSelect代替。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
index    number    是    当前选中的索引。
onSelect8+
onSelect(callback: (index: number) => void)

索引条选中回调,返回值为当前选中索引。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
index    number    是    当前选中的索引。
onRequestPopupData8+
onRequestPopupData(callback: (index: number) => Array)

选中字母索引后,请求索引提示弹窗显示内容回调。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
index    number    是    当前选中的索引
返回值:

类型    说明
Array    索引对应的字符串数组,此字符串数组在弹窗中竖排显示,字符串列表最多显示5个,超出部分可以滑动显示。
onPopupSelect8+
onPopupSelect(callback: (index: number) => void)

字母索引提示弹窗字符串列表选中回调。

元服务API: 从API version 11开始,该接口支持在元服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名    类型    必填    说明
index    number    是    当前选中的索引。
示例
————————————————

                            版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
                        
原文链接:https://blog.youkuaiyun.com/MX0625/article/details/144568015

### ArkUI 组件布局方法概述 ArkUI 是一种专为 ArkTS 框架设计的 UI 组件库,它提供了一系列强大的布局工具,使开发者能够轻松构建复杂而美观的应用程序界面。以下是几种常见的 ArkUI 布局方式及其示例代码。 #### 1. **StackContainer 堆叠布局** `StackContainer` 提供了一种堆叠式的布局方案,允许多个子元素在同一区域内重叠显示。通过调整 `zIndex` 属性可以控制各层之间的顺序[^2]。 ```typescript import { StackContainer, StackItem } from '@arkui/core'; @Entry @Component struct Example { build() { Column({ space: 5 }) { Text('Stack Container').fontSize(16).fontColor('#ffffff') .width('90%').height(40).backgroundColor(0xAABBCC) StackContainer({ width: '100%', height: '100%' }) { StackItem().zIndex(1) { Rectangle() .fillColor(Color.Red) .size({ width: 100, height: 100 }) } StackItem().zIndex(2) { Rectangle() .fillColor(Color.Blue) .size({ width: 80, height: 80 }) } StackItem().zIndex(3) { Rectangle() .fillColor(Color.Green) .size({ width: 60, height: 60 }) } }.height('auto') }.padding({ top: 20 }).width('100%').height('100%') } } ``` 上述代码展示了如何利用 `StackContainer` 创建一个具有三层叠加效果的容器,并设置了不同颜色和大小的矩形作为子项。 #### 2. **Panel 布局** `Panel` 可以用来实现更复杂的交互式面板结构,通常适用于对话框或者抽屉菜单等场景[^3]。 ```typescript import { Panel } from '@arkui/core'; @Entry @Component struct Example { @State visible: boolean = false; build() { Row() { Button("Open Panel").onClick(() => this.visible = true); Panel({ showMask: true, position: Position.LEFT, onDismiss: () => (this.visible = false), visible: this.visible }) { Column() { Text('This is a panel content.') .fontSize(18) .fontWeight(FontWeight.Bold); Button("Close Panel").margin({top: 20}).onClick(() => this.visible = false); } .width('80%') .height('100%') .backgroundColor(new Color("#FFFFFF")) } } .width('100%') .height('100%'); } } ``` 这段代码演示了一个左侧滑入的 `Panel` 面板,点击按钮即可打开或关闭该面板。 --- ### 总结 以上介绍了两种主要的 ArkUI 布局方式——`StackContainer` 和 `Panel` 的基本用法以及对应的实例教程。这些布局可以帮助开发者更好地管理页面上的组件排列问题并提升用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值