Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 fe9869f0 编写于 作者: M match
浏览文件
操作

示例文档整改 

Signed-off-by: Nmatch <zhouqingfeng2@huawei.com>
上级 586842ae
显示空白变更内容
内联 并排
Showing with 151 addition and 98 deletion
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ fe9869f0
# 背景设置
设置组件的背景色。
设置组件的背景样式。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置组件的背景色。 |
| backgroundImage | src:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>repeat?:&nbsp;[ImageRepeat](ts-appendix-enums.md#imagerepeat) | src：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。<br/>repeat：设置背景图片的重复样式，默认不重复。 |
| backgroundImageSize | {<br/>width?:&nbsp;[Length](ts-types.md#length),<br/>height?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width:&nbsp;Length,&nbsp;height:&nbsp;Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>默认值：ImageSize.Auto |
| backgroundImagePosition | {<br/>x?:&nbsp;[Length](ts-types.md#length),<br/>y?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} |
| backgroundImagePosition | [Position](ts-types.md#position8)&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>默认值：<br/>{<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} |
## 示例
......@@ -25,6 +22,7 @@
@Entry
@Component
struct BackgroundExample {
build() {
Column({ space: 5 }) {
Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
浏览文件 @ fe9869f0
......@@ -4,19 +4,14 @@ id为组件的唯一标识，在整个应用内唯一。本模块提供组件标
> **说明：**
>
> - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 属性
| 名称 | 参数说明 | 默认值 | 描述 |
| ---- | -------- | ------ | ------------------------------------ |
| id | string | '' | 组件的唯一标识，唯一性由使用者保证。 |
| 名称 | 参数说明 | 描述 |
| -----| -------- | ----------------------------- |
| id | string | 组件的唯一标识，唯一性由使用者保证。<br>默认值：'' |
## 接口
......@@ -27,106 +22,104 @@ id为组件的唯一标识，在整个应用内唯一。本模块提供组件标
getInspectorByKey(id: string): string
获取指定id的组件的所有属性，不包括子组件信息。
此接口为系统接口。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ---- | ----------- |
| id | string | 是 | - | 要获取属性的组件id。 |
**参数:**
| 参数 | 类型 | 必填 | 描述 |
| ---- | -------- | ---- | -------------|
| id | string | 是 | 要获取属性的组件id。 |
- 返回值
| 类型 | 描述 |
| ------ | --------------- |
| string | 组件属性列表的JSON字符串。 |
**返回值:**
| 类型 | 描述 |
| -------| -------------- |
| string | 组件属性列表的JSON字符串。 |
### getInspectorTree
getInspectorTree(): string
获取组件树及组件属性。
此接口为系统接口。
- 返回值
**返回值:**
| 类型 | 描述 |
| ------ | ------------------- |
| string | 组件树及组件属性列表的JSON字符串。 |
| 类型 | 描述 |
| ------ | --------------------------- |
| string | 组件树及组件属性列表的JSON字符串。 |
### sendEventByKey
sendEventByKey(id: string, action: number, params: string): boolean
给指定id的组件发送事件。
此接口为系统接口。
- 参数
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ---- | ---------------------------------------- |
| id | string | 是 | - | 要触发事件的组件的id。 |
| action | number | 是 | - | 要触发的事件类型，目前支持取值：<br/>-&nbsp;点击事件Click:&nbsp;10<br/>-&nbsp;长按事件LongClick:&nbsp;11。 |
| params | string | 是 | - | 事件参数，无参数传空字符串&nbsp;""。 |
**参数:**
| 参数 | 类型 | 必填 | 描述 |
| ------ | -------| ---- | -------------------------- |
| id | string | 是 | 要触发事件的组件的id。 |
| action | number | 是 | 要触发的事件类型，目前支持取值：<br/>-&nbsp;点击事件Click:&nbsp;10<br/>-&nbsp;长按事件LongClick:&nbsp;11。 |
| params | string | 是 | 事件参数，无参数传空字符串&nbsp;""。 |
**返回值:**
- 返回值
| 类型 | 描述 |
| ------- | ------------------------------ |
| boolean | 找不到指定id的组件时返回false，其余情况返回true。 |
| 类型 | 描述 |
| -------- | --------------------------|
| boolean | 找不到指定id的组件时返回false，其余情况返回true。 |
### sendTouchEvent
sendTouchEvent(event: TouchObject): boolean
发送触摸事件。
此接口为系统接口。
- 参数
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | ----------- | ---- | ---- | ---------------------------------------- |
| event | TouchObject | 是 | - | 触发触摸事件的位置，event参数见[TouchEvent](ts-universal-events-touch.md#touchevent对象说明)中TouchObject的介绍。 |
| 参数 | 类型 | 必填 | 描述 |
| ----- | ----------- | ---- | ------------------------------------------------------------ |
| event | [TouchObject](ts-universal-events-touch.md#touchobject对象说明) | 是 | 触发触摸事件的位置，event参数见[TouchEvent](ts-universal-events-touch.md#touchevent对象说明)中TouchObject的介绍。 |
- 返回值
**返回值:**
| 类型 | 描述 |
| ------- | -------------------------- |
| boolean | 事件发送失败时返回false，其余情况返回true。 |
| 类型 | 描述 |
| ------- | ---------------------------|
| boolean | 事件发送失败时返回false，其余情况返回true。 |
### sendKeyEvent
sendKeyEvent(event: KeyEvent): boolean
发送按键事件。
此接口为系统接口。
- 参数
**参数:**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | -------- | ---- | ---- | ---------------------------------------- |
| event | KeyEvent | 是 | - | 按键事件，event参数见[KeyEvent](ts-universal-events-key.md#keyevent对象说明)介绍。 |
| 参数 | 类型 | 必填 | 描述 |
| ----- | -------- | ---- | ------------------------------------------------------------ |
| event | [KeyEvent](ts-universal-events-key.md#keyevent对象说明) | 是 | 按键事件，event参数见[KeyEvent](ts-universal-events-key.md#keyevent对象说明)介绍。 |
- 返回值
**返回值:**
| 类型 | 描述 |
| ------- | --------------------------- |
| boolean | 事件发送失败时时返回false，其余情况返回true。 |
| 类型 | 描述 |
| ------- | ------------------------------|
| boolean | 事件发送失败时时返回false，其余情况返回true。 |
### sendMouseEvent
sendMouseEvent(event: MouseEvent): boolean
发送鼠标事件。
此接口为系统接口。
- 参数
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | ---------- | ---- | ---- | ---------------------------------------- |
| event | MouseEvent | 是 | - | 鼠标事件，event参数见[MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明)介绍。 |
| 参数 | 类型 | 必填 | 描述 |
| ----- | ---------- | ---- | --------------------------------------- |
| event | [MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明) | 是 | 鼠标事件，event参数见[MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明)介绍。 |
- 返回值
**返回值：**
| 类型 | 描述 |
| ------- | --------------------------- |
| boolean | 事件发送失败时时返回false，其余情况返回true。 |
| 类型 | 描述 |
| ------- | ---------------------------------- |
| boolean | 事件发送失败时返回false，其余情况返回true。 |
## 示例
......@@ -139,6 +132,7 @@ class Utils {
static rect_bottom;
static rect_value;
//获取组件所占矩形区域坐标
static getComponentRect(key) {
let strJson = getInspectorByKey(key);
let obj = JSON.parse(strJson);
......@@ -178,32 +172,32 @@ struct IdExample {
console.info(getInspectorTree())
this.text = "Button 'click to start' is clicked"
setTimeout(() => {
sendEventByKey("longclick", 11, "")
sendEventByKey("longClick", 11, "") // 向id为"longClick"的组件发送长按事件
}, 2000)
}).id('click')
Button() {
Text('longclick').fontSize(25).fontWeight(FontWeight.Bold)
Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)
}.margin({ top: 20 }).backgroundColor('#0D9FFB')
.gesture(
LongPressGesture().onActionEnd(() => {
console.info('long clicked')
this.text = "Button 'longclick' is longclicked"
this.text = "Button 'longClick' is longclicked"
setTimeout(() => {
let rect = Utils.getComponentRect('onTouch')
let rect = Utils.getComponentRect('onTouch') // 获取id为"onTouch"组件的矩形区域坐标
let touchPoint: TouchObject = {
id: 1,
x: rect.left + (rect.right - rect.left) / 2,
y: rect.top + (rect.bottom - rect.top) / 2,
x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
type: TouchType.Down,
screenX: rect.left + (rect.right - rect.left) / 2,
screenY: rect.left + (rect.right - rect.left) / 2,
screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
screenY: rect.left + (rect.right - rect.left) / 2, // 组件中心点y坐标
}
sendTouchEvent(touchPoint)
sendTouchEvent(touchPoint) // 发送触摸事件
touchPoint.type = TouchType.Up
sendTouchEvent(touchPoint)
sendTouchEvent(touchPoint) // 发送触摸事件
}, 2000)
})).id('longclick')
})).id('longClick')
Button() {
Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
......@@ -212,14 +206,14 @@ struct IdExample {
console.info('onTouch is clicked')
this.text = "Button 'onTouch' is clicked"
setTimeout(() => {
let rect = Utils.getComponentRect('onMouse')
let rect = Utils.getComponentRect('onMouse') // 获取id为"onMouse"组件的矩形区域坐标
let mouseEvent: MouseEvent = {
button: MouseButton.Left,
action: MouseAction.Press,
x: rect.left + (rect.right - rect.left) / 2,
y: rect.top + (rect.bottom - rect.top) / 2,
screenX: rect.left + (rect.right - rect.left) / 2,
screenY: rect.top + (rect.bottom - rect.top) / 2,
x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
screenY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
timestamp: 1,
target: {
area: {
......@@ -237,7 +231,7 @@ struct IdExample {
},
source: SourceType.Mouse
}
sendMouseEvent(mouseEvent)
sendMouseEvent(mouseEvent) // 发送鼠标事件
}, 2000)
}).id('onTouch')
......@@ -257,7 +251,7 @@ struct IdExample {
metaKey: 0,
timestamp: 0
}
sendKeyEvent(keyEvent)
sendKeyEvent(keyEvent) // 发送按键事件
}, 2000)
}).id('onMouse')
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ fe9869f0
# 颜色渐变
设置组件的颜色渐变效果。
> **说明：**
>
> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 权限列表
无
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| linearGradient | {<br/>angle?:&nbsp;number \| string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | - | 线性渐变。<br/>angle:&nbsp;线性渐变的角度。<br/>direction:&nbsp;线性渐变的方向，设置angle后不生效。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;number \| string,<br/>end?:&nbsp;number \| string,<br/>rotation?:&nbsp;number\|string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | - | 角度渐变。<br/>center：为角度渐变的中心点。<br/>start：角度渐变的起点。<br/>end：角度渐变的终点。<br/>rotation:&nbsp;角度渐变的旋转角度。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| radialGradient | {<br/>center:&nbsp;Point,<br/>radius:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | - | 径向渐变。<br/>center：径向渐变的中心点。<br/>radius：径向渐变的半径。<br/>colors:&nbsp;为渐变的颜色描述。<br/>repeating:&nbsp;为渐变的颜色重复着色。 |
| 名称 | 参数类型 | 描述 |
| -------------- | -------------------------------------------- | ----------------------------------- |
| linearGradient | {<br/>angle?:&nbsp;number \| string,<br/>direction?:&nbsp;[GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | 线性渐变。<br/>- angle:&nbsp;线性渐变的起始角度。0点方向顺时针旋转为正向角度。<br/> 默认值：180<br/>- direction:&nbsp;线性渐变的方向，设置angle后不生效。<br/> 默认值：GradientDirection.Bottom <br/>- colors:&nbsp;为渐变的颜色描述。<br/>- repeating:&nbsp;为渐变的颜色重复着色。 <br/> 默认值：false |
| sweepGradient | {<br/>center:&nbsp;Point,<br/>start?:&nbsp;number \| string,<br/>end?:&nbsp;number \| string,<br/>rotation?:&nbsp;number\|string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | 角度渐变。<br/>- center：为角度渐变的中心点，即相对于当前组件左上角的坐标。<br/>- start：角度渐变的起点。<br/> 默认值：0<br/>- end：角度渐变的终点。<br/> 默认值：0<br/>- rotation:&nbsp;角度渐变的旋转角度。<br/> 默认值：0<br/>- colors:&nbsp;为渐变的颜色描述。<br/>- repeating:&nbsp;为渐变的颜色重复着色。<br/> 默认值：false |
| radialGradient | {<br/>center:&nbsp;Point,<br/> radius:&nbsp;number \| string,<br/>colors:&nbsp;Array&lt;[ColorStop](ts-basic-components-gauge.md#colorstop)&gt;,<br/>repeating?:&nbsp;boolean<br/>} | 径向渐变。<br/>- center：径向渐变的中心点，即相对于当前组件左上角的坐标。<br/>- radius：径向渐变的半径。<br/>- colors:&nbsp;为渐变的颜色描述。<br/>- repeating:&nbsp;为渐变的颜色重复着色。<br/> 默认值：false |
## 示例
......@@ -34,8 +32,32 @@ struct ColorGradientExample {
.height(50)
.linearGradient({
angle: 90,
colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
})
Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width('90%')
.height(50)
.linearGradient({
direction: GradientDirection.Left, // 渐变方向
repeating: true, // 渐变颜色是否重复
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
})
}
.width('100%')
.padding({ top: 5 })
}
}
```
![zh-cn_image_0000001219864149](figures/gradientColor1.png)
```ts
@Entry
@Component
struct ColorGradientExample {
build() {
Column({ space: 5 }) {
Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width(100)
......@@ -44,8 +66,37 @@ struct ColorGradientExample {
center: [50, 50],
start: 0,
end: 359,
colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
})
Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width(100)
.height(100)
.sweepGradient({
center: [50, 50],
start: 0,
end: 359,
rotation: 45, // 旋转角度
repeating: true, // 渐变颜色是否重复
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
})
}
.width('100%')
.padding({ top: 5 })
}
}
```
![zh-cn_image_0000001219864149](figures/gradientColor2.png)
```ts
// xxx.ets
@Entry
@Component
struct ColorGradientExample {
build() {
Column({ space: 5 }) {
Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width(100)
......@@ -53,7 +104,17 @@ struct ColorGradientExample {
.radialGradient({
center: [50, 50],
radius: 60,
colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
})
Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
Row()
.width(100)
.height(100)
.radialGradient({
center: [50, 50],
radius: 60,
repeating: true,
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
})
}
.width('100%')
......@@ -62,4 +123,4 @@ struct ColorGradientExample {
}
```
![zh-cn_image_0000001219864149](figures/zh-cn_image_0000001219864149.png)
![zh-cn_image_0000001219864149](figures/gradientColor3.png)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或