• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 安全控件通用属性
2
3
4安全控件的基础属性,用于设置安全控件通用的属性。
5
6
7> **说明:**
8>
9> 该组件从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
10
11
12## 属性
13
14| 名称 | 参数类型 | 必填 | 描述 |
15| -------- | -------- | -------- | -------- |
16| iconSize | [Dimension](ts-types.md#dimension10) | 否 | 设置安全控件上图标的尺寸。<br/>默认值:16vp |
17| layoutDirection | [SecurityComponentLayoutDirection](#securitycomponentlayoutdirection枚举说明) | 否 | 设置安全控件上图标和文字分布的方向。<br/>默认值:SecurityComponentLayoutDirection.HORIZONTAL |
18| position | [Position](ts-types.md#position8) | 否 | 设置绝对定位,设置安全控件的左上角相对于父容器左上角的偏移位置。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 0<br/>} |
19| markAnchor | [Position](ts-types.md#position8) | 否 | 设置安全控件在位置定位时的锚点,以控件左上角作为基准点进行偏移。通常配合position和offset属性使用,单独使用时,效果类似offset<br/>默认值:<br/>{<br/>x: 0,<br/>y: 0<br/>} |
20| offset | [Position](ts-types.md#position8) | 否 | 设置安全控件相对于自身布局位置的坐标偏移。设置此属性不会影响父容器的布局,仅在绘制过程中调整位置。<br/>默认值:<br/>{<br/>x: 0,<br/>y: 0<br/>} |
21| fontSize | [Dimension](ts-types.md#dimension10) | 否 | 设置安全控件上文字的尺寸。<br/>默认值:16fp |
22| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 设置安全控件上文字的样式。<br/>默认值:FontStyle.Normal |
23| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 否 | 设置安全控件上文字粗细。<br/>默认值:FontWeight.Medium |
24| fontFamily | string \| [Resource](ts-types.md#resource) | 否 | 设置安全控件上文字的字体。<br/>默认字体:'HarmonyOS Sans' |
25| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置安全控件上文字的颜色。<br/>默认值:\#ffffffff |
26| iconColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置安全控件上图标的颜色。<br/>默认值:\#ffffffff |
27| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置安全控件的背景颜色。<br/>默认值:\#007dff |
28| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 设置安全控件的边框的样式。<br/>默认不设置边框样式 |
29| borderWidth | [Dimension](ts-types.md#dimension10) | 否 | 设置安全控件的边框的宽度。<br/>默认不设置边框宽度 |
30| borderColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置安全控件的边框的颜色。<br/>默认不设置边框颜色 |
31| borderRadius | [Dimension](ts-types.md#dimension10) | 否 | 设置安全控件的边框圆角半径。|
32| padding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 否 | 设置安全控件的内边距。<br/>默认值:上下12vp, 左右24vp |
33| textIconSpace | [Dimension](ts-types.md#dimension10) | 否 | 设置安全控件中图标和文字的间距。<br/>默认值:4vp |
34
35
36## SecurityComponentLayoutDirection枚举说明
37
38| 名称 | 枚举值 | 描述 |
39| -------- | -------- | -------- |
40| HORIZONTAL | 0 | 安全控件上图标和文字分布的方向为水平排列。 |
41| VERTICAL | 1 | 安全控件上图标和文字分布的方向为垂直排列。 |
42
43
44## 示例
45
46```ts
47// xxx.ets
48@Entry
49@Component
50struct Index {
51  build() {
52    Row() {
53      Column() {
54        // 生成一个保存按钮,并设置它的SecurityComponent属性
55        SaveButton()
56          .fontSize(35)
57          .fontColor(Color.White)
58          .iconSize(30)
59          .layoutDirection(SecurityComponentLayoutDirection.HORIZONTAL)
60          .borderWidth(1)
61          .borderStyle(BorderStyle.Dashed)
62          .borderColor(Color.Blue)
63          .borderRadius(20)
64          .fontWeight(100)
65          .iconColor(Color.White)
66          .padding({left:50, top:50, bottom:50, right:50})
67          .textIconSpace(20)
68          .backgroundColor(0x3282f6)
69      }.width('100%')
70    }.height('100%')
71  }
72}
73```
74
75![zh-cn_image_0000001643038221](figures/zh-cn_image_0000001643038221.png)
76