网站备案管理办法,海口模板建站哪家好,site 危险网站,网站怎样做收录会更好文章目录 前言一、Select下拉菜单1.1 子组件1.2 接口参数 1.3 属性1.4 事件1.5 示例代码 二、Slider2.1 子组件2.2 接口参数#xff1a;SliderStyle枚举说明 2.3 属性2.4 事件SliderChangeMode枚举说明 2.5 示例代码 总结 前言
Select组件#xff1a;提供下拉选择菜单#… 文章目录 前言一、Select下拉菜单1.1 子组件1.2 接口参数 1.3 属性1.4 事件1.5 示例代码 二、Slider2.1 子组件2.2 接口参数SliderStyle枚举说明 2.3 属性2.4 事件SliderChangeMode枚举说明 2.5 示例代码 总结 前言
Select组件提供下拉选择菜单可以让用户在多个选项之间选择。 Slider组件滑动条组件通常用于快速调节设置值如音量调节、亮度调节等应用场景。 一、Select下拉菜单
提供下拉选择菜单可以让用户在多个选项之间选择。
说明 该组件从API Version 8开始支持。后续版本如有新增内容则采用上角标单独标记该内容的起始版本。
1.1 子组件
无
1.2 接口
Select(options: ArraySelectOption)参数为SelectOption的数组
参数
SelectOption对象说明 参数value参数类型ResourceStr是否必填是 功能描述下拉选项内容。 参数icon参数类型ResourceStr是否必填否 功能描述下拉选项图片。
1.3 属性
除支持通用属性外还支持以下属性 属性名称selected属性类型number属性描述设置下拉菜单初始选项的索引第一项的索引为0。 当不设置selected属性时默认选择值为-1菜单项不选中。
属性名称value属性类型string属性描述设置下拉按钮本身的文本内容。 当菜单选中时默认会替换为菜单项文本内容。
如下所示
// xxx.ets
Entry
Component
struct SelectExample {build() {Column() {Select([{ value: aaa, icon: /common/public_icon.svg },{ value: bbb, icon: /common/public_icon.svg },{ value: ccc, icon: /common/public_icon.svg },{ value: ddd, icon: /common/public_icon.svg }]).selected(2).value(TTTTT).font({ size: 16, weight: 500 }).fontColor(#182431).selectedOptionFont({ size: 16, weight: 400 }).optionFont({ size: 16, weight: 400 }).onSelect((index: number) {console.info(Select: index)})}.width(100%)}
}在上面的代码中value为’TTTTT’值 手机显示如下 未选择时 选择后
属性名称font属性类型Font属性描述设置下拉按钮本身的文本样式。
默认值
{
size: 16fp,
weight: FontWeight.Medium
}属性名称fontColor属性类型ResourceColor属性描述设置下拉按钮本身的文本颜色。 默认值‘#E6FFFFFF’
属性名称selectedOptionBgColor属性类型ResourceColor属性描述设置下拉菜单选中项的背景色。 默认值‘#33007DFF’
属性名称selectedOptionFont属性类型Font属性描述设置下拉菜单选中项的文本样式。 默认值
{
size: 16fp,
weight: FontWeight.Regular
}属性名称selectedOptionFontColor属性类型ResourceColor属性描述设置下拉菜单选中项的文本颜色。 默认值‘#ff007dff’
属性名称optionBgColor属性类型ResourceColor属性描述设置下拉菜单项的背景色。 默认值‘#ffffffff’
属性名称optionFont属性类型Font属性描述设置下拉菜单项的文本样式。 默认值
{
size: 16fp,
weight: FontWeight.Regular
}属性名称optionFontColor属性类型ResourceColor属性描述设置下拉菜单项的文本颜色。 默认值‘#ff182431’
1.4 事件
onSelect(callback: (index: number, value?: string) void)下拉菜单选中某一项的回调。 index选中项的索引。 value选中项的值。
1.5 示例代码
// xxx.ets
Entry
Component
struct SelectExample {build() {Column() {Select([{ value: aaa, icon: /common/public_icon.svg },{ value: bbb, icon: /common/public_icon.svg },{ value: ccc, icon: /common/public_icon.svg },{ value: ddd, icon: /common/public_icon.svg }]).selected(2).value(TTTTT).font({ size: 16, weight: 500 }).fontColor(#182431).selectedOptionFont({ size: 16, weight: 400 }).optionFont({ size: 16, weight: 400 }).onSelect((index: number) {console.info(Select: index)})}.width(100%)}
}二、Slider
滑动条组件通常用于快速调节设置值如音量调节、亮度调节等应用场景。
说明 该组件从API Version 7开始支持。后续版本如有新增内容则采用上角标单独标记该内容的起始版本。
2.1 子组件
无
2.2 接口
创建Slider的函数原型如下
Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})从API version 9开始该接口支持在ArkTS卡片中使用。
参数
value 类型: number 描述: 当前进度值。默认值为参数min。
min 类型: number 描述: 设置最小值。默认值为0。
max 类型: number 描述: 设置最大值。 默认值为100。 说明: 如果min大于等于max会引发异常情况min将取默认值0max将取默认值100。如果value不在[min, max]范围之内将取min或max的值取决于离哪个更近。
step 类型: number 描述: 设置Slider滑动步长。默认值为1。 取值范围: [0.01, max] 说明: 当设置小于0或百分比的值时将按默认值显示。
style 类型: SliderStyle 描述: 设置Slider的滑块与滑轨显示样式。默认值为SliderStyle.OutSet。
direction 类型: Axis 描述: 设置滑动条滑动方向为水平或竖直方向。默认值为Axis.Horizontal。
reverse 类型: boolean 描述: 设置滑动条取值范围是否反向。横向Slider默认为从左往右滑动竖向Slider默认为从上往下滑动。默认值为false。
SliderStyle枚举说明
从API version 9开始该接口支持在ArkTS卡片中使用。
SliderStyle.OutSet 滑块在滑轨上。
SliderStyle.InSet 滑块在滑轨内。
2.3 属性
支持除触摸热区以外的通用属性设置。
blockColor 类型: ResourceColor 描述: 设置滑块的颜色。从API version 9开始该接口支持在ArkTS卡片中使用。
trackColor 类型: ResourceColor 描述: 设置滑轨的背景颜色。从API version 9开始该接口支持在ArkTS卡片中使用。
selectedColor 类型: ResourceColor 描述: 设置滑轨的已滑动部分颜色。从API version 9开始该接口支持在ArkTS卡片中使用.
showSteps 类型: boolean 描述: 设置当前是否显示步长刻度值。默认值为false。从API version 9开始该接口支持在ArkTS卡片中使用
showTips 类型: boolean 描述: 设置滑动时是否显示百分比气泡提示。默认值为false。 说明: 当direction的属性值为Axis.Horizontal时tip显示在滑块正上方。当direction的属性值为Axis.Vertical时tip显示在滑块正左边。tip的绘制区域为Slider自身节点的overlay。如果Slider没有设置边距或者边距较小tip可能会被截断。
trackThickness 类型: Length 描述: 设置滑轨的粗细。 默认值: 当参数style的值设置为SliderStyle.OutSet时为4.0vp当style的值设置为SliderStyle.InSet时为20.0vp。 说明: 如果设置为小于0的值时将按默认值显示。从API version 9开始该接口支持在ArkTS卡片中使用。
2.4 事件
注意通用事件仅支持挂载卸载事件OnAppearOnDisAppear。
onChange(callback: (value: number, mode: SliderChangeMode) void)Slider滑动时触发事件回调。 value当前滑动进度值。若返回值有小数可使用number.toFixed()方法将数据处理为预期的精度。 mode拖动状态。
从API version 9开始该接口支持在ArkTS卡片中使用。 说明Begin和End状态当手势点击时都会触发Moving和Click状态当value值发生变换时触发。 当连贯动作为拖动动作时不触发Click状态。 value值的变化范围为对应步长steps数组。
SliderChangeMode枚举说明
从API version 9开始该接口支持在ArkTS卡片中使用。
Begin 值: 0 描述: 手势/鼠标接触或者按下滑块。
Moving 值: 1 描述: 正在拖动滑块过程中。
End 值: 2 描述: 手势/鼠标离开滑块。
Click 值: 3 描述: 点击滑动条使滑块位置移动。
2.5 示例代码
// xxx.ets
Entry
Component
struct SliderExample {State outSetValueOne: number 40State inSetValueOne: number 40State outSetValueTwo: number 40State inSetValueTwo: number 40State vOutSetValueOne: number 40State vInSetValueOne: number 40State vOutSetValueTwo: number 40State vInSetValueTwo: number 40build() {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 valueconsole.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 valueconsole.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 valueconsole.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 valueconsole.info(value: value mode: mode.toString())})Text(this.inSetValueTwo.toFixed(0)).fontSize(12)}.width(80%)Row() {Column() {Text(vertical outset slider).fontSize(9).fontColor(0xCCCCCC).width(50%).margin(15)Row() {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 valueconsole.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 valueconsole.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 valueconsole.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 valueconsole.info(value: value mode: mode.toString())})}}.width(50%).height(300)}}.width(100%)}
}总结
Select组件提供下拉选择菜单可以让用户在多个选项之间选择。 Slider组件滑动条组件通常用于快速调节设置值如音量调节、亮度调节等应用场景。
