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/ts-universal-attributes-background.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md index 7e13c03f21973de1f5d3efeeb4d321f3109ff430..3e7c936017b6261468ac600c72ca89da39579ee4 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 @@ -10,10 +10,10 @@ | 名称 | 参数类型 | 描述 | | -------- | -------- | -------- | -| backgroundColor | [ResourceColor](ts-types.md) | 设置组件的背景色。 | +| 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 | [Position](ts-types.md#position8) \| [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} | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md index f41094b9cdbd4e67ced835979abdda515cc245b2..10ab112d4763b7a22d9822245d1aa44c87afbe8c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md @@ -10,7 +10,7 @@ | 名称 | 参数类型 | 描述 | | ---------- | ---------------------------------------- | --------------------------------------- | -| borderImage | BorderImageOption | 图片边框或者渐变色边框设置接口。 | +| borderImage | [BorderImageOption](#borderimageoption对象说明) | 图片边框或者渐变色边框设置接口。 | ## BorderImageOption对象说明 @@ -45,7 +45,7 @@ struct Index { build() { Row() { Column() { - Text('This is\nborderImage.').textAlign(TextAlign.Center) + Text('This is borderImage.').textAlign(TextAlign.Center) .borderImage({ source: "borderOrigin.png", slice: {top:"31%", bottom:"31%", left:"31%", right:"31%"}, @@ -53,7 +53,7 @@ struct Index { outset: {top:"5px", bottom:"5px", left:"5px", right:"5px"}, repeat: RepeatMode.Repeat, fill: false - }); + }) } .width('100%') } @@ -70,20 +70,21 @@ struct Index { @Entry @Component struct Index { - build() { Row() { Column() { - Text('This is\ngradient color.').textAlign(TextAlign.Center) + Text('This is gradient color.').textAlign(TextAlign.Center) .borderImage({ - source: {angle:90, + source: { + angle: 90, direction: GradientDirection.Left, - colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]}, - slice: {top:10, bottom:10, left:10, right:10}, - width: {top:"10px", bottom:"10px", left: "10px", right:"10px"}, + colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] + }, + slice: { top: 10, bottom: 10, left: 10, right: 10 }, + width: { top: "10px", bottom: "10px", left: "10px", right: "10px" }, repeat: RepeatMode.Stretch, fill: false - }); + }) } .width('100%') } diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md index 217c45b29fbc6cf69244a48441473a163808aa4a..50f39d873d28939f1bc9da5b1d19f66ebdbb7b5d 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md @@ -13,11 +13,11 @@ | 名称 | 参数类型 | 描述 | | ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -| border | {
width?: [Length](ts-types.md#length) \| EdgeWidths9+,
color?:  [ResourceColor](ts-types.md#resourcecolor) \| EdgeColors9+,
radius?:  [Length](ts-types.md#length) \| BorderRadiuses9+,
style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles9+
} | 统一边框样式设置接口。
- width：设置边框宽度。
- color：设置边框颜色。
- radius：设置边框圆角半径。
- style：设置边框样式。 | -| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles9+ | 设置元素的边框样式。
默认值：BorderStyle.Solid | -| borderWidth | [Length](ts-types.md#length) \| EdgeWidths9+ | 设置元素的边框宽度，不支持百分比。 | -| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| EdgeColors9+ | 设置元素的边框颜色。 | -| borderRadius | [Length](ts-types.md#length) \| BorderRadiuses9+ | 设置元素的边框圆角半径，不支持百分比。 | +| border | {
width?: [Length](ts-types.md#length) \| [EdgeWidths9+](#edgewidths9对象说明),
color?:  [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors9+](#edgecolors9对象说明),
radius?:  [Length](ts-types.md#length) \| [BorderRadiuses9+](#borderradiuses9对象说明),
style?: [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles9+](#edgestyles9对象说明)
} | 统一边框样式设置接口。
- width：设置边框宽度。
- color：设置边框颜色。
- radius：设置边框圆角半径。
- style：设置边框样式。 | +| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles9+](#edgestyles9对象说明) | 设置元素的边框样式。
默认值：BorderStyle.Solid | +| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths9+](#edgewidths9对象说明) | 设置元素的边框宽度，不支持百分比。 | +| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors9+](#edgecolors9对象说明) | 设置元素的边框颜色。 | +| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses9+](#borderradiuses9对象说明) | 设置元素的边框圆角半径，不支持百分比。 | ## EdgeWidths9+对象说明 @@ -70,19 +70,19 @@ @Entry @Component struct BorderExample { - build() { Column() { Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { // 线段 Text('dashed') - .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) + .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) // 点线 Text('dotted') .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) }.width('100%').height(150) + Text('.border') .fontSize(50) .width(300) @@ -92,12 +92,12 @@ struct BorderExample { color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, style: { - left: BorderStyle.Dotted, - right: BorderStyle.Dotted, - top: BorderStyle.Solid, - bottom: BorderStyle.Dashed + left: BorderStyle.Dotted, + right: BorderStyle.Dotted, + top: BorderStyle.Solid, + bottom: BorderStyle.Dashed } - }).textAlign(TextAlign.Center) + }).textAlign(TextAlign.Center) } } } 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 74c6d1bce40e91a4f1f11c38fa35fc0d5a833b8c..3fc2bcba5f40cddc6a199645f8f25cdd519371f5 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 @@ -77,7 +77,7 @@ 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的介绍。 | **返回值:** @@ -95,7 +95,7 @@ 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对象说明)介绍。 | **返回值:** @@ -113,7 +113,7 @@ 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对象说明)介绍。 | **返回值：** @@ -132,6 +132,7 @@ class Utils { static rect_bottom; static rect_value; + //获取组件所占矩形区域坐标 static getComponentRect(key) { let strJson = getInspectorByKey(key); let obj = JSON.parse(strJson); @@ -171,7 +172,7 @@ 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') @@ -183,18 +184,18 @@ struct IdExample { console.info('long clicked') 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') @@ -205,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: { @@ -230,7 +231,7 @@ struct IdExample { }, source: SourceType.Mouse } - sendMouseEvent(mouseEvent) + sendMouseEvent(mouseEvent) //发送鼠标事件 }, 2000) }).id('onTouch') @@ -250,7 +251,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-focus.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md index 3a3971109708914bc0e494b496cdb0ecc9a4afdb..f417b1f8d1e02e97998dda9da036f7d9931d966c 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md @@ -12,7 +12,7 @@ | **名称** | **参数类型** | **描述** | | -------------------- | -------- | ---------------------------------------- | | focusable | boolean | 设置当前组件是否可以获焦。
**说明：**
存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件则默认状态为不可获焦。 | -| tabIndex9+ | number | 自定义组件tab键走焦能力，走焦顺序为：tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。
- tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素，按照tabIndex的数值递增而先后获焦。如果多个元素拥有相同的tabIndex，按照元素在当前组件树中的先后顺序获焦
- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素。
默认值：0 | +| tabIndex9+ | number | 自定义组件tab键走焦能力，走焦顺序为：tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。
- tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素，tabIndex值越小，则优先获焦；反之，则后获焦。如果多个元素拥有相同的tabIndex，按照元素在当前组件树中的先后顺序获焦
- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素。
默认值：0 | | defaultFocus9+ | boolean | 设置当前组件是否为当前页面上的默认焦点，仅在初次创建的页面第一次进入时生效。
默认值：false | | groupDefaultFocus9+ | boolean | 设置当前组件是否为当前组件所在容器获焦时的默认焦点，仅在初次创建容器节点第一次获焦时生效。
默认值：false
**说明：** 必须与tabIndex联合使用，当某个容器设置了tabIndex，且容器内某子组件设置了groupDefaultFocus，当该容器首次获焦时，会自动将焦点转移至该组件上。
| | focusOnTouch9+ | boolean | 设置当前组件是否支持点击获焦能力。
默认值：false
**说明：** 仅在组件可点击时才能正常获取焦点。 | 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 781487c39a78c0808e6f2f635063754f425797f0..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 @@ -12,9 +12,9 @@ | 名称 | 参数类型 | 描述 | | -------------- | -------------------------------------------- | ----------------------------------- | -| 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 | ## 示例 @@ -24,7 +24,6 @@ @Entry @Component struct ColorGradientExample { - build() { Column({ space: 5 }) { Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) @@ -33,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) @@ -43,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) @@ -52,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%') @@ -61,4 +123,4 @@ struct ColorGradientExample { } ``` -![zh-cn_image_0000001219864149](figures/zh-cn_image_0000001219864149.png) +![zh-cn_image_0000001219864149](figures/gradientColor3.png) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md index 2dd7f7856641f8870af73dd0a333f79044a94a8f..e379e647fab1bec6c1c2f0c9eeef8033a7bc2037 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md @@ -1,6 +1,6 @@ # 触摸测试控制 -设置组件的触摸测试类型。ArkUI开发框架在处理触屏事件时，会在触屏事件触发前，进行按压点和组件区域的触摸测试来收集需要响应触屏事件的组件，然后基于触摸测试结果分发相应的触屏事件。hitTestBehavior属性可以设置不同的触摸测试响应模式，影响组件的触摸测试收集结果，最终影响后续的触屏事件分发，具体影响参考HitTestMode枚举说明。 +设置组件的触摸测试类型。ArkUI开发框架在处理触屏事件时，会在触屏事件触发前，进行按压点和组件区域的触摸测试来收集需要响应触屏事件的组件，然后基于触摸测试结果分发相应的触屏事件。hitTestBehavior属性可以设置不同的触摸测试响应模式，影响组件的触摸测试收集结果，最终影响后续的触屏事件分发，具体影响参考[HitTestMode](#hittestmode 枚举说明)枚举说明。 > **说明：** > - 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 @@ -11,7 +11,7 @@ | **名称** | **参数类型** | **描述** | | -------------------- | -------- | ---------------------------------------- | -| hitTestBehavior | HitTestMode | 设置当前组件的触摸测试类型。
默认值： HitTestMode.Default | +| hitTestBehavior | [HitTestMode](#hittestmode 枚举说明) | 设置当前组件的触摸测试类型。
默认值： HitTestMode.Default | ## HitTestMode 枚举说明