Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 afe0dd99 编写于 作者: M match
浏览文件
操作

arkui文档部分修正 

Signed-off-by: Nmatch <zhouqingfeng2@huawei.com>
上级 90fedb69
隐藏空白更改
内联 并排
Showing with 117 addition and 53 deletion
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
浏览文件 @ afe0dd99
......@@ -10,10 +10,10 @@
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| backgroundColor | [ResourceColor](ts-types.md) | 设置组件的背景色。 |
| 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 | [Position](ts-types.md#position8)&nbsp;\|&nbsp;[Alignment](ts-appendix-enums.md#alignment) | 设置背景图在组件中显示位置。<br/>默认值：<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/>默认值：{x:&nbsp;0,y:&nbsp;0} |
## 示例
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @ afe0dd99
......@@ -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%')
}
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ afe0dd99
......@@ -13,11 +13,11 @@
| 名称 | 参数类型 | 描述 |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| border | {<br/>width?:&nbsp;[Length](ts-types.md#length)&nbsp;\|&nbsp;EdgeWidths<sup>9+</sup>,<br/>color?: &nbsp;[ResourceColor](ts-types.md#resourcecolor)&nbsp;\|&nbsp;EdgeColors<sup>9+</sup>,<br/>radius?: &nbsp;[Length](ts-types.md#length)&nbsp;\|&nbsp;BorderRadiuses<sup>9+</sup>,<br/>style?:&nbsp;[BorderStyle](ts-appendix-enums.md#borderstyle)&nbsp;\|&nbsp;EdgeStyles<sup>9+</sup><br/>} | 统一边框样式设置接口。<br/>-&nbsp;width：设置边框宽度。<br/>-&nbsp;color：设置边框颜色。<br/>-&nbsp;radius：设置边框圆角半径。<br/>-&nbsp;style：设置边框样式。 |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | 设置元素的边框样式。<br/>默认值：BorderStyle.Solid |
| borderWidth | [Length](ts-types.md#length) \| EdgeWidths<sup>9+</sup> | 设置元素的边框宽度，不支持百分比。 |
| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| EdgeColors<sup>9+</sup> | 设置元素的边框颜色。 |
| borderRadius | [Length](ts-types.md#length) \| BorderRadiuses<sup>9+</sup> | 设置元素的边框圆角半径，不支持百分比。 |
| border | {<br/>width?:&nbsp;[Length](ts-types.md#length)&nbsp;\|&nbsp;[EdgeWidths<sup>9+</sup>](#edgewidths9对象说明),<br/>color?: &nbsp;[ResourceColor](ts-types.md#resourcecolor)&nbsp;\|&nbsp;[EdgeColors<sup>9+</sup>](#edgecolors9对象说明),<br/>radius?: &nbsp;[Length](ts-types.md#length)&nbsp;\|&nbsp;[BorderRadiuses<sup>9+</sup>](#borderradiuses9对象说明),<br/>style?:&nbsp;[BorderStyle](ts-appendix-enums.md#borderstyle)&nbsp;\|&nbsp;[EdgeStyles<sup>9+</sup>](#edgestyles9对象说明)<br/>} | 统一边框样式设置接口。<br/>-&nbsp;width：设置边框宽度。<br/>-&nbsp;color：设置边框颜色。<br/>-&nbsp;radius：设置边框圆角半径。<br/>-&nbsp;style：设置边框样式。 |
| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles<sup>9+</sup>](#edgestyles9对象说明) | 设置元素的边框样式。<br/>默认值：BorderStyle.Solid |
| borderWidth | [Length](ts-types.md#length) \| [EdgeWidths<sup>9+</sup>](#edgewidths9对象说明) | 设置元素的边框宽度，不支持百分比。 |
| borderColor | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors<sup>9+</sup>](#edgecolors9对象说明) | 设置元素的边框颜色。 |
| borderRadius | [Length](ts-types.md#length) \| [BorderRadiuses<sup>9+</sup>](#borderradiuses9对象说明) | 设置元素的边框圆角半径，不支持百分比。 |
## EdgeWidths<sup>9+</sup>对象说明
......@@ -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)
}
}
}
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
浏览文件 @ afe0dd99
......@@ -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')
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
浏览文件 @ afe0dd99
......@@ -12,7 +12,7 @@
| **名称** | **参数类型** | **描述** |
| -------------------- | -------- | ---------------------------------------- |
| focusable | boolean | 设置当前组件是否可以获焦。<br/>**说明：**<br/>存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件则默认状态为不可获焦。 |
| tabIndex<sup>9+<sup> | number | 自定义组件tab键走焦能力，走焦顺序为：tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。<br />- tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素，按照tabIndex的数值递增而先后获焦。如果多个元素拥有相同的tabIndex，按照元素在当前组件树中的先后顺序获焦<br />- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素。<br/>默认值：0 |
| tabIndex<sup>9+<sup> | number | 自定义组件tab键走焦能力，走焦顺序为：tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。<br />- tabIndex >= 0：表示元素是可聚焦的，并且可以通过tab键走焦来访问到该元素，tabIndex值越小，则优先获焦；反之，则后获焦。如果多个元素拥有相同的tabIndex，按照元素在当前组件树中的先后顺序获焦<br />- tabIndex < 0（通常是tabIndex = -1）：表示元素是可聚焦的，但是不能通过tab键走焦来访问到该元素。<br/>默认值：0 |
| defaultFocus<sup>9+<sup> | boolean | 设置当前组件是否为当前页面上的默认焦点，仅在初次创建的页面第一次进入时生效。<br/>默认值：false |
| groupDefaultFocus<sup>9+<sup> | boolean | 设置当前组件是否为当前组件所在容器获焦时的默认焦点，仅在初次创建容器节点第一次获焦时生效。<br/>默认值：false<br/>**说明：** 必须与tabIndex联合使用，当某个容器设置了tabIndex，且容器内某子组件设置了groupDefaultFocus，当该容器首次获焦时，会自动将焦点转移至该组件上。<br/> |
| focusOnTouch<sup>9+<sup> | boolean | 设置当前组件是否支持点击获焦能力。<br/>默认值：false<br/>**说明：** 仅在组件可点击时才能正常获取焦点。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
浏览文件 @ afe0dd99
......@@ -12,9 +12,9 @@
| 名称 | 参数类型 | 描述 |
| -------------- | -------------------------------------------- | ----------------------------------- |
| 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 |
## 示例
......@@ -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)
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md
浏览文件 @ afe0dd99
# 触摸测试控制
设置组件的触摸测试类型。ArkUI开发框架在处理触屏事件时，会在触屏事件触发前，进行按压点和组件区域的触摸测试来收集需要响应触屏事件的组件，然后基于触摸测试结果分发相应的触屏事件。hitTestBehavior属性可以设置不同的触摸测试响应模式，影响组件的触摸测试收集结果，最终影响后续的触屏事件分发，具体影响参考HitTestMode枚举说明。
设置组件的触摸测试类型。ArkUI开发框架在处理触屏事件时，会在触屏事件触发前，进行按压点和组件区域的触摸测试来收集需要响应触屏事件的组件，然后基于触摸测试结果分发相应的触屏事件。hitTestBehavior属性可以设置不同的触摸测试响应模式，影响组件的触摸测试收集结果，最终影响后续的触屏事件分发，具体影响参考[HitTestMode](#hittestmode 枚举说明)枚举说明。
> **说明：**
> - 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
......@@ -11,7 +11,7 @@
| **名称** | **参数类型** | **描述** |
| -------------------- | -------- | ---------------------------------------- |
| hitTestBehavior | HitTestMode | 设置当前组件的触摸测试类型。<br>默认值： HitTestMode.Default |
| hitTestBehavior | [HitTestMode](#hittestmode 枚举说明) | 设置当前组件的触摸测试类型。<br>默认值： HitTestMode.Default |
## HitTestMode 枚举说明
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或