OpenHarmony应用开发-基础组件PluginComponent/Progress/Radio
版本:v3.2 Release
PluginComponent
提供外部应用组件嵌入式显示功能,即外部应用提供的UI可在本应用内显示。如需通过跨进程通信实现更新,请参考@ohos.pluginComponent。
说明:
- 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
PluginComponent(value: { template: PluginComponentTemplate, data: KVObject})
创建插件组件,用于显示外部应用提供的UI。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
value | { template: PluginComponentTemplate, data: KVObject} | 是 | template: 组件模板,用于跟提供者定义的组件绑定。 data: 传给插件组件提供者使用的数据。 |
PluginComponentTemplate类型说明
参数 | 类型 | 描述 |
source | string | 组件模板名。 |
bundleName | string | 提供者Ability的bundleName。 |
属性
除支持通用属性size,且必须设置size。
事件
仅支持手势事件分发给提供方页面,并在提供方页面内部处理。
除支持通用事件,还支持以下事件:
名称 | 功能描述 |
onComplete(callback: () => void) | 组件加载完成回调。 |
onError(callback: (info: { errcode: number, msg: string }) => void) | 组件加载错误回调。 errcode: 错误码。 msg: 错误信息。 |
示例
组件使用方
//PluginUserExample.ets
import plugin from "./plugin_component.js"
@Entry
@Component
struct PluginUserExample {
@StorageLink("plugincount") plugincount: Object[] = [
{ source: 'plugincomponent1', bundleName: 'com.example.plugin' },
{ source: 'plugintemplate', bundleName: 'com.example.myapplication' },
{ source: 'plugintemplate', bundleName: 'com.example.myapplication' }]
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Hello World')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button('Register Request Listener')
.fontSize(30)
.width(400)
.height(100)
.margin({top:20})
.onClick(()=>{
plugin.onListener()
console.log("Button('Register Request Listener')")
})
Button('Request')
.fontSize(50)
.width(400)
.height(100)
.margin({ top: 20 })
.onClick(() => {
plugin.Request()
console.log("Button('Request')")
})
ForEach(this.plugincount, item => {
PluginComponent({
template: { source: 'PluginProviderExample', bundleName: 'com.example.plugin' },
data: { 'countDownStartValue': 'new countDownStartValue' }
}).size({ width: 500, height: 100 })
.onComplete(() => {
console.log("onComplete")
})
.onError(({errcode, msg}) => {
console.log("onComplete" + errcode + ":" + msg)
})
})
}
.width('100%')
.height('100%')
}
}
组件提供方
//PluginProviderExample.ets
import plugin from "./plugin_component.js"
@Entry
@Component
struct PluginProviderExample {
@State message: string = 'no click!'
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('Register Push Listener')
.fontSize(30)
.width(400)
.height(100)
.margin({top:20})
.onClick(()=>{
plugin.onListener()
console.log("Button('Register Push Listener')")
})
Button('Push')
.fontSize(30)
.width(400)
.height(100)
.margin({top:20})
.onClick(()=>{
plugin.Push()
this.message = "Button('Push')"
console.log("Button('Push')")
})
Text(this.message)
.height(150)
.fontSize(30)
.padding(5)
.margin(5)
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
Plugin组件工具
FA模型
//plugin_component.js
import pluginComponentManager from '@ohos.pluginComponent'
function onPushListener(source, template, data, extraData) {
console.log("onPushListener template.source=" + template.source)
var jsonObject = JSON.parse(data.componentTemplate.source)
console.log("request_callback1:source json object" + jsonObject)
var jsonArry = jsonObject.ExternalComponent
for (var i in jsonArry) {
console.log(jsonArry[i])
}
console.log("onPushListener:source json object" + jsonObject)
console.log("onPushListener:source json string" + JSON.stringify(jsonObject))
console.log("onPushListener template.ability=" + template.ability)
console.log("onPushListener data=" + JSON.stringify(data))
console.log("onPushListener extraData=" + JSON.stringify(extraData))
}
function onRequestListener(source, name, data)
{
console.log("onRequestListener name=" + name);
console.log("onRequestListener data=" + JSON.stringify(data));
return {template:"plugintemplate", data:data};
}
export default {
//register listener
onListener() {
pluginComponentManager.on("push", onPushListener)
pluginComponentManager.on("request", onRequestListener)
},
Push() {
// 组件提供方主动发送事件
pluginComponentManager.push(
{
want: {
bundleName: "com.example.plugin",
abilityName: "com.example.myapplication.PluginProviderExample",
},
name: "PluginProviderExample",
data: {
"key_1": "plugin component test",
"key_2": 34234
},
extraData: {
"extra_str": "this is push event"
},
jsonPath: "",
},
(err, data) => {
console.log("push_callback: push ok!");
}
)
},
Request() {
// 组件使用方主动发送事件
pluginComponentManager.request({
want: {
bundleName: "com.example.plugin",
abilityName: "com.example.myapplication.PluginProviderExample",
},
name: "PluginProviderExample",
data: {
"key_1": "plugin component test",
"key_2": 34234
},
jsonPath: "",
},
(err, data) => {
console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability)
console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source)
var jsonObject = JSON.parse(data.componentTemplate.source)
console.log("request_callback:source json object" + jsonObject)
var jsonArry = jsonObject.ExternalComponent
for (var i in jsonArry) {
console.log(jsonArry[i])
}
console.log("request_callback:source json string" + JSON.stringify(jsonObject))
console.log("request_callback: data=" + JSON.stringify(data.data))
console.log("request_callback: extraData=" + JSON.stringify(data.extraData))
}
)
}
}
Stage模型
//plugin_component.js
import pluginComponentManager from '@ohos.pluginComponent'
function onPushListener(source, template, data, extraData) {
console.log("onPushListener template.source=" + template.source)
var jsonObject = JSON.parse(data.componentTemplate.source)
console.log("request_callback1:source json object" + jsonObject)
var jsonArry = jsonObject.ExternalComponent
for (var i in jsonArry) {
console.log(jsonArry[i])
}
console.log("onPushListener:source json object" + jsonObject)
console.log("onPushListener:source json string" + JSON.stringify(jsonObject))
console.log("onPushListener template.ability=" + template.ability)
console.log("onPushListener data=" + JSON.stringify(data))
console.log("onPushListener extraData=" + JSON.stringify(extraData))
}
function onRequestListener(source, name, data)
{
console.log("onRequestListener name=" + name);
console.log("onRequestListener data=" + JSON.stringify(data));
return {template:"plugintemplate", data:data};
}
export default {
//register listener
onListener() {
pluginComponentManager.on("push", onPushListener)
pluginComponentManager.on("request", onRequestListener)
},
Push() {
// 组件提供方主动发送事件
pluginComponentManager.push(
{
owner: {
bundleName: "com.example.myapplication",
abilityName: "com.example.myapplication.MainAbility",
},
target: {
bundleName: "com.example.plugin",
abilityName: "com.example.myapplication.PluginProviderExample",
},
name: "PluginProviderExample",
data: {
"key_1": "plugin component test",
"key_2": 34234
},
extraData: {
"extra_str": "this is push event"
},
jsonPath: "",
},
(err, data) => {
console.log("push_callback: push ok!");
}
)
},
Request() {
// 组件使用方主动发送事件
pluginComponentManager.request({
owner: {
bundleName: "com.example.myapplication",
abilityName: "com.example.myapplication.MainAbility",
},
target: {
bundleName: "com.example.plugin",
abilityName: "com.example.myapplication.PluginProviderExample",
},
name: "PluginProviderExample",
data: {
"key_1": "plugin component test",
"key_2": 34234
},
jsonPath: "",
},
(err, data) => {
console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability)
console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source)
var jsonObject = JSON.parse(data.componentTemplate.source)
console.log("request_callback:source json object" + jsonObject)
var jsonArry = jsonObject.ExternalComponent
for (var i in jsonArry) {
console.log(jsonArry[i])
}
console.log("request_callback:source json string" + JSON.stringify(jsonObject))
console.log("request_callback: data=" + JSON.stringify(data.data))
console.log("request_callback: extraData=" + JSON.stringify(data.extraData))
}
)
}
}
Progress
进度条组件,用于显示内容加载或操作处理等进度。
说明:
该组件从API version7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
Progress(options: {value: number, total?: number, type?: ProgressType})
创建进度组件,用于显示内容加载或操作处理进度。
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
value | number | 是 | 指定当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
total | number | 否 | 指定进度总长。 默认值:100 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
type8+ | 否 | 指定进度条类型。 默认值:ProgressType.Linear 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
styledeprecated | 否 | 指定进度条样式。 该参数从API version8开始废弃,建议使用type替代。 默认值:ProgressStyle.Linear |
ProgressType枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
名称 | 描述 |
Linear | 线性样式。从API version9开始,高度大于宽度的时候自适应垂直显示。 |
Ring8+ | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。 |
Eclipse8+ | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。 |
ScaleRing8+ | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。从API version9开始,刻度外圈出现重叠的时候自动转换为环形无刻度进度条。 |
Capsule8+ | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。 |
ProgressStyle枚举说明
从API version 9开始,该接口支持在ArkTS卡片中使用。
名称 | 描述 |
Linear | 线性样式。 |
Ring | 环形无刻度样式,环形圆环逐渐显示至完全填充效果。 |
Eclipse | 圆形样式,显示类似月圆月缺的进度展示效果,从月牙逐渐变化至满月。 |
ScaleRing | 环形有刻度样式,显示类似时钟刻度形式的进度展示效果。 |
Capsule | 胶囊样式,头尾两端圆弧处的进度展示效果与Eclipse相同;中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。 |
属性
名称 | 参数类型 | 描述 |
value | number | 设置当前进度值。设置小于0的数值时置为0,设置大于total的数值时置为total。非法数值不生效。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
color | 设置进度条前景色。 默认值:‘#ff007dff’ 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
backgroundColor | 设置进度条底色。 默认值:‘#19182431’ 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
style8+ | { strokeWidth?: Length, scaleCount?: number, scaleWidth?: Length} | 定义组件的样式。 - strokeWidth: 设置进度条宽度(不支持百分比设置)。从API version9开始,环形进度条设置宽度大于等于半径时,默认修改宽度至半径值的二分之一。 默认值:4.0Vp - scaleCount: 设置环形进度条总刻度数。 默认值:120 - scaleWidth: 设置环形进度条刻度粗细(不支持百分比设置),刻度粗细大于进度条宽度时,为系统默认粗细。 默认值:2.0Vp 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
事件
支持通用事件。
示例
// xxx.ets
@Entry
@Component
struct ProgressExample {
build() {
Column({ space: 15 }) {
Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Progress({ value: 10, type: ProgressType.Linear }).width(200)
Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)
Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100)
}
Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, type: ProgressType.ScaleRing }).width(100)
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
.color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
}
// scaleCount和scaleWidth效果对比
Row({ space: 40 }) {
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
.color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 })
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
.color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 })
}
Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, type: ProgressType.Ring }).width(100)
Progress({ value: 20, total: 150, type: ProgressType.Ring })
.color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 })
}
Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
Progress({ value: 20, total: 150, type: ProgressType.Capsule })
.color(Color.Grey)
.value(50)
.width(100)
.height(50)
}
}.width('100%').margin({ top: 30 })
}
}
QRCode
用于显示单个二维码的组件。
说明:
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
QRCode(value: string)
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
value | string | 是 | 二维码内容字符串。 |
属性
除支持通用属性外,还支持以下属性。
名称 | 参数类型 | 描述 |
color | 设置二维码颜色。 默认值:Color.Black 从API version 9开始,该接口支持在ArkTS卡片中使用。 | |
backgroundColor | 设置二维码背景颜色。 默认值:Color.White 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
事件
通用事件支持点击事件、触摸事件、挂载卸载事件。
示例
// xxx.ets
@Entry
@Component
struct QRCodeExample {
private value: string = 'hello world'
build() {
Column({ space: 5 }) {
Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
QRCode(this.value).width(200).height(200)
// 设置二维码颜色
Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
QRCode(this.value).color(0xF7CE00).width(200).height(200)
// 设置二维码背景色
Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)
}.width('100%').margin({ top: 5 })
}
}
Radio
单选框,提供相应的用户交互选择项。
说明:
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
无
接口
Radio(options: {value: string, group: string})
从API version 9开始,该接口支持在ArkTS卡片中使用。
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
value | string | 是 | 当前单选框的值。 |
group | string | 是 | 当前单选框的所属群组名称,相同group的Radio只能有一个被选中。 |
属性
除支持通用属性外,还支持以下属性:
名称 | 参数类型 | 描述 |
checked | boolean | 设置单选框的选中状态。 默认值:false 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
事件
除支持通用事件外,还支持以下事件:
名称 | 功能描述 |
onChange(callback: (isChecked: boolean) => void) | 单选框选中状态改变时触发回调。 - isChecked为true时,表示从未选中变为选中。 - isChecked为false时,表示从选中变为未选中。 从API version 9开始,该接口支持在ArkTS卡片中使用。 |
示例
// xxx.ets
@Entry
@Component
struct RadioExample {
build() {
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
Column() {
Text('Radio1')
Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
console.log('Radio1 status is ' + isChecked)
})
}
Column() {
Text('Radio2')
Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
console.log('Radio2 status is ' + isChecked)
})
}
Column() {
Text('Radio3')
Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
.height(50)
.width(50)
.onChange((isChecked: boolean) => {
console.log('Radio3 status is ' + isChecked)
})
}
}.padding({ top: 30 })
}
}