diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/gradientColor1.png b/zh-cn/application-dev/reference/arkui-ts/figures/gradientColor1.png new file mode 100644 index 0000000000000000000000000000000000000000..b82f81358cd03243b99ac23b6eb190238bf22f0b Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/gradientColor1.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/gradientColor2.png b/zh-cn/application-dev/reference/arkui-ts/figures/gradientColor2.png new file mode 100644 index 0000000000000000000000000000000000000000..c50424c9fd41bdda195affb5170cac38bd3df0e5 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/gradientColor2.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/gradientColor3.png b/zh-cn/application-dev/reference/arkui-ts/figures/gradientColor3.png new file mode 100644 index 0000000000000000000000000000000000000000..84d9674c5b43486a260ca9e1c9b1017b9022583c Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/gradientColor3.png differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864149.png b/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864149.png deleted file mode 100644 index 2c20e6d28a0636b8122f6377052933c33cfcffaf..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/zh-cn_image_0000001219864149.png and /dev/null differ diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md index 123a5f48d8d9ba221c339b662e0b71861edd0d89..7213e77d845a93e31e123014b397b814d6b897e5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md @@ -1,22 +1,19 @@ # 背景设置 -设置组件的背景色。 +设置组件的背景样式。 > **说明：** > > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - ## 属性 - | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 设置组件的背景色。 | | backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),
repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | src：图片地址，支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。
repeat：设置背景图片的重复样式，默认不重复。 | | backgroundImageSize | {
width?: [Length](ts-types.md#length),
height?: [Length](ts-types.md#length)
} \| [ImageSize](ts-appendix-enums.md#imagesize) | 设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。
默认值：ImageSize.Auto | -| backgroundImagePosition | {
x?: [Length](ts-types.md#length),
y?: [Length](ts-types.md#length)
} \| [Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。
{
x: 0,
y: 0
} | - +| backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。
默认值：
{
x: 0,
y: 0
} | ## 示例 @@ -25,6 +22,7 @@ @Entry @Component struct BackgroundExample { + build() { Column({ space: 5 }) { Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md index 79249387f496311a31decc0f1312452b35d12a7a..badf1cfc7a9e15490b672cef05c2cc7f46cafaad 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md @@ -4,19 +4,14 @@ id为组件的唯一标识，在整个应用内唯一。本模块提供组件标 > **说明：** > -> - 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - -## 权限列表 - -无 +> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 ## 属性 -| 名称 | 参数说明 | 默认值 | 描述 | -| ---- | -------- | ------ | ------------------------------------ | -| id | string | '' | 组件的唯一标识，唯一性由使用者保证。 | +| 名称 | 参数说明 | 描述 | +| -----| -------- | ----------------------------- | +| id | string | 组件的唯一标识，唯一性由使用者保证。
默认值：'' | ## 接口 @@ -29,15 +24,17 @@ getInspectorByKey(id: string): string 获取指定id的组件的所有属性，不包括子组件信息。 此接口为系统接口。 -- 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ---- | ------ | ---- | ---- | ----------- | - | id | string | 是 | - | 要获取属性的组件id。 | +**参数:** + +| 参数 | 类型 | 必填 | 描述 | +| ---- | -------- | ---- | -------------| +| id | string | 是 | 要获取属性的组件id。 | -- 返回值 - | 类型 | 描述 | - | ------ | --------------- | - | string | 组件属性列表的JSON字符串。 | +**返回值:** + +| 类型 | 描述 | +| -------| -------------- | +| string | 组件属性列表的JSON字符串。 | ### getInspectorTree @@ -46,11 +43,11 @@ getInspectorTree(): string 获取组件树及组件属性。 此接口为系统接口。 -- 返回值 +**返回值:** - | 类型 | 描述 | - | ------ | ------------------- | - | string | 组件树及组件属性列表的JSON字符串。 | +| 类型 | 描述 | +| ------ | --------------------------- | +| string | 组件树及组件属性列表的JSON字符串。 | ### sendEventByKey @@ -59,17 +56,19 @@ sendEventByKey(id: string, action: number, params: string): boolean 给指定id的组件发送事件。 此接口为系统接口。 -- 参数 - | 参数 | 类型 | 必填 | 默认值 | 描述 | - | ------ | ------ | ---- | ---- | ---------------------------------------- | - | id | string | 是 | - | 要触发事件的组件的id。 | - | action | number | 是 | - | 要触发的事件类型，目前支持取值：
- 点击事件Click: 10
- 长按事件LongClick: 11。 | - | params | string | 是 | - | 事件参数，无参数传空字符串 ""。 | +**参数:** + +| 参数 | 类型 | 必填 | 描述 | +| ------ | -------| ---- | -------------------------- | +| id | string | 是 | 要触发事件的组件的id。 | +| action | number | 是 | 要触发的事件类型，目前支持取值：
- 点击事件Click: 10
- 长按事件LongClick: 11。 | +| params | string | 是 | 事件参数，无参数传空字符串 ""。 | + +**返回值:** -- 返回值 - | 类型 | 描述 | - | ------- | ------------------------------ | - | boolean | 找不到指定id的组件时返回false，其余情况返回true。 | +| 类型 | 描述 | +| -------- | --------------------------| +| boolean | 找不到指定id的组件时返回false，其余情况返回true。 | ### sendTouchEvent @@ -78,17 +77,17 @@ 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 @@ -97,17 +96,17 @@ 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 @@ -116,17 +115,17 @@ 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 +138,7 @@ class Utils { static rect_bottom; static rect_value; + //获取组件所占矩形区域坐标 static getComponentRect(key) { let strJson = getInspectorByKey(key); let obj = JSON.parse(strJson); @@ -178,32 +178,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 +212,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 +237,7 @@ struct IdExample { }, source: SourceType.Mouse } - sendMouseEvent(mouseEvent) + sendMouseEvent(mouseEvent) // 发送鼠标事件 }, 2000) }).id('onTouch') @@ -257,7 +257,7 @@ struct IdExample { metaKey: 0, timestamp: 0 } - sendKeyEvent(keyEvent) + sendKeyEvent(keyEvent) // 发送按键事件 }, 2000) }).id('onMouse') diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index 756f1d9e0fbac50724aeecf2c8f916b939327939..0a14af72b6503b0b69acffe09f82e866c0c1e6b8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -1,22 +1,20 @@ # 颜色渐变 +设置组件的颜色渐变效果。 + > **说明：** +> > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 -## 权限列表 - -无 - - ## 属性 -| 名称 | 参数类型 | 默认值 | 描述 | -| -------- | -------- | -------- | -------- | -| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | - | 线性渐变。
angle: 线性渐变的角度。
direction: 线性渐变的方向，设置angle后不生效。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | -| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | - | 角度渐变。
center：为角度渐变的中心点。
start：角度渐变的起点。
end：角度渐变的终点。
rotation: 角度渐变的旋转角度。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | -| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | - | 径向渐变。
center：径向渐变的中心点。
radius：径向渐变的半径。
colors: 为渐变的颜色描述。
repeating: 为渐变的颜色重复着色。 | +| 名称 | 参数类型 | 描述 | +| -------------- | -------------------------------------------- | ----------------------------------- | +| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | 线性渐变。
- angle: 线性渐变的起始角度。0点方向顺时针旋转为正向角度。
默认值：180
- direction: 线性渐变的方向，设置angle后不生效。
默认值：GradientDirection.Bottom
- colors: 为渐变的颜色描述。
- repeating: 为渐变的颜色重复着色。
默认值：false | +| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | 角度渐变。
- center：为角度渐变的中心点，即相对于当前组件左上角的坐标。
- start：角度渐变的起点。
默认值：0
- end：角度渐变的终点。
默认值：0
- rotation: 角度渐变的旋转角度。
默认值：0
- colors: 为渐变的颜色描述。
- repeating: 为渐变的颜色重复着色。
默认值：false | +| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | 径向渐变。
- center：径向渐变的中心点，即相对于当前组件左上角的坐标。
- radius：径向渐变的半径。
- colors: 为渐变的颜色描述。
- repeating: 为渐变的颜色重复着色。
默认值：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)