Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
afe0dd99
D
Docs
项目概览
OpenHarmony
/
Docs
1 年多 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
提交
afe0dd99
编写于
9月 27, 2022
作者:
M
match
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
arkui文档部分修正
Signed-off-by:
N
match
<
zhouqingfeng2@huawei.com
>
上级
90fedb69
变更
10
显示空白变更内容
内联
并排
Showing
10 changed file
with
117 addition
and
53 deletion
+117
-53
zh-cn/application-dev/reference/arkui-ts/figures/gradientColor1.png
...ication-dev/reference/arkui-ts/figures/gradientColor1.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/figures/gradientColor2.png
...ication-dev/reference/arkui-ts/figures/gradientColor2.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/figures/gradientColor3.png
...ication-dev/reference/arkui-ts/figures/gradientColor3.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md
.../reference/arkui-ts/ts-universal-attributes-background.md
+2
-2
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
...eference/arkui-ts/ts-universal-attributes-border-image.md
+11
-10
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
...-dev/reference/arkui-ts/ts-universal-attributes-border.md
+12
-12
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
...eference/arkui-ts/ts-universal-attributes-component-id.md
+19
-18
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
...n-dev/reference/arkui-ts/ts-universal-attributes-focus.md
+1
-1
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
...erence/arkui-ts/ts-universal-attributes-gradient-color.md
+70
-8
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hit-test-behavior.md
...nce/arkui-ts/ts-universal-attributes-hit-test-behavior.md
+2
-2
未找到文件。
zh-cn/application-dev/reference/arkui-ts/figures/gradientColor1.png
0 → 100644
浏览文件 @
afe0dd99
23.5 KB
zh-cn/application-dev/reference/arkui-ts/figures/gradientColor2.png
0 → 100644
浏览文件 @
afe0dd99
80.5 KB
zh-cn/application-dev/reference/arkui-ts/figures/gradientColor3.png
0 → 100644
浏览文件 @
afe0dd99
101.3 KB
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:
[ResourceStr](ts-types.md#resourcestr),
<br/>
repeat?:
[
ImageRepeat
](
ts-appendix-enums.md#imagerepeat
)
| src:图片地址,支持网络图片资源和本地图片资源地址(不支持svg类型的图片)。
<br/>
repeat:设置背景图片的重复样式,默认不重复。 |
| backgroundImageSize | {
<br/>
width?:
[Length](ts-types.md#length),
<br/>
height?:
[Length](ts-types.md#length)
<br/>
}
\|
[
ImageSize
](
ts-appendix-enums.md#imagesize
)
| 设置背景图像的高度和宽度。当输入为{width:
Length,
height:
Length}对象时,如果只设置一个属性,则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。
<br/>
默认值:ImageSize.Auto |
| backgroundImagePosition |
[
Position
](
ts-types.md#position8
)
\|
[
Alignment
](
ts-appendix-enums.md#alignment
)
| 设置背景图在组件中显示位置。
<br/>
默认值:
<br/>
{
<br/>
x:
0,
<br/>
y:
0
<br/>
} |
| backgroundImagePosition |
[
Position
](
ts-types.md#position8
)
\|
[
Alignment
](
ts-appendix-enums.md#alignment
)
| 设置背景图在组件中显示位置。
<br/>
默认值:
{x:
0,y:
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
\n
borderImage.
'
).
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
\n
gradient 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?:
[Length](ts-types.md#length)
\|
EdgeWidths
<sup>
9+
</sup>
,
<br/>
color?:
[ResourceColor](ts-types.md#resourcecolor)
\|
EdgeColors
<sup>
9+
</sup>
,
<br/>
radius?:
[Length](ts-types.md#length)
\|
BorderRadiuses
<sup>
9+
</sup>
,
<br/>
style?:
[BorderStyle](ts-appendix-enums.md#borderstyle)
\|
EdgeStyles
<sup>
9+
</sup>
<br/>
} | 统一边框样式设置接口。
<br/>
-
width:设置边框宽度。
<br/>
-
color:设置边框颜色。
<br/>
-
radius:设置边框圆角半径。
<br/>
-
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?:
[Length](ts-types.md#length)
\|
[
EdgeWidths<sup>9+</sup>
](
#edgewidths9对象说明
)
,
<br/>
color?:
[ResourceColor](ts-types.md#resourcecolor)
\|
[
EdgeColors<sup>9+</sup>
](
#edgecolors9对象说明
)
,
<br/>
radius?:
[Length](ts-types.md#length)
\|
[BorderRadiuses
<sup>
9+
</sup>
](#borderradiuses9对象说明),
<br/>
style?:
[BorderStyle](ts-appendix-enums.md#borderstyle)
\|
[
EdgeStyles<sup>9+</sup>
](
#edgestyles9对象说明
)
<br/>
} | 统一边框样式设置接口。
<br/>
-
width:设置边框宽度。
<br/>
-
color:设置边框颜色。
<br/>
-
radius:设置边框圆角半径。
<br/>
-
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,7 +70,6 @@
@
Entry
@
Component
struct
BorderExample
{
build
()
{
Column
()
{
Flex
({
justifyContent
:
FlexAlign
.
SpaceAround
,
alignItems
:
ItemAlign
.
Center
})
{
...
...
@@ -83,6 +82,7 @@ struct BorderExample {
.
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
)
...
...
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?:
number
\|
string,
<br/>
direction?:
[GradientDirection](ts-appendix-enums.md#gradientdirection),
<br/>
colors:
Array
<
[ColorStop](ts-basic-components-gauge.md#colorstop)
>
,
<br/>
repeating?:
boolean
<br/>
} | 线性渐变。
<br/>
- angle:
线性渐变的
角度。
<br/>
- direction:
线性渐变的方向,设置angle后不生效。
<br/>
- colors:
为渐变的颜色描述。
<br/>
- repeating:
为渐变的颜色重复着色。
|
| sweepGradient | {
<br/>
center:
Point,
<br/>
start?:
number
\|
string,
<br/>
end?:
number
\|
string,
<br/>
rotation?:
number\|string,
<br/>
colors:
Array
<
[ColorStop](ts-basic-components-gauge.md#colorstop)
>
,
<br/>
repeating?:
boolean
<br/>
} | 角度渐变。
<br/>
- center:为角度渐变的中心点
。
<br/>
- start:角度渐变的起点。
<br/>
- end:角度渐变的终点。
<br/>
- rotation:
角度渐变的旋转角度。
<br/>
- colors:
为渐变的颜色描述。
<br/>
- repeating:
为渐变的颜色重复着色。
|
| radialGradient | {
<br/>
center:
Point,
<br/>
radius:
number
\|
string,
<br/>
colors:
Array
<
[ColorStop](ts-basic-components-gauge.md#colorstop)
>
,
<br/>
repeating?:
boolean
<br/>
} | 径向渐变。
<br/>
- center:径向渐变的中心点。
<br/>
- radius:径向渐变的半径。
<br/>
- colors:
为渐变的颜色描述。
<br/>
- repeating:
为渐变的颜色重复着色。
|
| linearGradient | {
<br/>
angle?:
number
\|
string,
<br/>
direction?:
[GradientDirection](ts-appendix-enums.md#gradientdirection),
<br/>
colors:
Array
<
[ColorStop](ts-basic-components-gauge.md#colorstop)
>
,
<br/>
repeating?:
boolean
<br/>
} | 线性渐变。
<br/>
- angle:
线性渐变的
起始角度。0点方向顺时针旋转为正向角度。
<br/>
默认值:180
<br/>
- direction:
线性渐变的方向,设置angle后不生效。
<br/>
默认值:GradientDirection.Bottom
<br/>
- colors:
为渐变的颜色描述。
<br/>
- repeating:
为渐变的颜色重复着色。
<br/>
默认值:false
|
| sweepGradient | {
<br/>
center:
Point,
<br/>
start?:
number
\|
string,
<br/>
end?:
number
\|
string,
<br/>
rotation?:
number\|string,
<br/>
colors:
Array
<
[ColorStop](ts-basic-components-gauge.md#colorstop)
>
,
<br/>
repeating?:
boolean
<br/>
} | 角度渐变。
<br/>
- center:为角度渐变的中心点
,即相对于当前组件左上角的坐标。
<br/>
- start:角度渐变的起点。
<br/>
默认值:0
<br/>
- end:角度渐变的终点。
<br/>
默认值:0
<br/>
- rotation:
角度渐变的旋转角度。
<br/>
默认值:0
<br/>
- colors:
为渐变的颜色描述。
<br/>
- repeating:
为渐变的颜色重复着色。
<br/>
默认值:false
|
| radialGradient | {
<br/>
center:
Point,
<br/>
radius:
number
\|
string,
<br/>
colors:
Array
<
[ColorStop](ts-basic-components-gauge.md#colorstop)
>
,
<br/>
repeating?:
boolean
<br/>
} | 径向渐变。
<br/>
- center:径向渐变的中心点,即相对于当前组件左上角的坐标。
<br/>
- radius:径向渐变的半径。
<br/>
- colors:
为渐变的颜色描述。
<br/>
- repeating:
为渐变的颜色重复着色。
<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
:
[[
0x
AEE1E1
,
0.0
],
[
0xD3E0DC
,
0.3
],
[
0xFCD1D1
,
1.0
]]
colors
:
[[
0x
ff0000
,
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
:
[[
0x
AEE1E1
,
0.0
],
[
0xD3E0DC
,
0.3
],
[
0xFCD1D1
,
1.0
]]
colors
:
[[
0x
ff0000
,
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录