1# 安全控件通用属性 2 3安全控件的基础属性，用于设置安全控件通用的属性。 4 5> **说明：** 6> 7> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## iconSize 10 11iconSize(value: Dimension): T 12 13设置安全控件上图标的尺寸。 14 15**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22|------------|------|-------|---------| 23| value | [Dimension](ts-types.md#dimension10) | 是 |安全控件上图标的尺寸。<br/>默认值：16vp。| 24 25**返回值：** 26 27| 类型 | 说明 | 28| -------- | -------- | 29| T | 返回安全控件的属性。 | 30 31## layoutDirection 32 33layoutDirection(value: SecurityComponentLayoutDirection): T 34 35设置安全控件上图标和文字分布的方向。 36 37**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41**参数：** 42 43| 参数名 | 类型 | 必填 | 说明 | 44|------------|------|-------|---------| 45| value | [SecurityComponentLayoutDirection](#securitycomponentlayoutdirection枚举说明) |是 | 安全控件上图标和文字分布的方向。<br/>默认值：SecurityComponentLayoutDirection.HORIZONTAL。| 46 47**返回值：** 48 49| 类型 | 说明 | 50| -------- | -------- | 51| T | 返回安全控件的属性。 | 52 53## position 54 55position(value: Position): T 56 57设置绝对定位，设置安全控件的左上角相对于父容器左上角的偏移位置。 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66|------------|------|-------|---------| 67| value | [Position](ts-types.md#position) |是 |安全控件的左上角相对于父容器左上角的偏移位置。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>}。| 68 69**返回值：** 70 71| 类型 | 说明 | 72| -------- | -------- | 73| T | 返回安全控件的属性。 | 74 75## markAnchor 76 77markAnchor(value: Position): T 78 79设置安全控件在位置定位时的锚点，以控件左上角作为基准点进行偏移。 80 81**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 82 83**系统能力：** SystemCapability.ArkUI.ArkUI.Full 84 85**参数：** 86 87| 参数名 | 类型 | 必填 | 说明 | 88|------------|------|-------|---------| 89| value | [Position](ts-types.md#position) |是 |安全控件在位置定位时的锚点，以控件左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>}。| 90 91**返回值：** 92 93| 类型 | 说明 | 94| -------- | -------- | 95| T | 返回安全控件的属性。 | 96 97## offset 98 99offset(value: Position | Edges | LocalizedEdges): T 100 101设置安全控件相对于自身布局位置的坐标偏移。 102 103**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 104 105**系统能力：** SystemCapability.ArkUI.ArkUI.Full 106 107**参数：** 108 109| 参数名 | 类型 | 必填 | 说明 | 110|------------|------|-------|---------| 111| value | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) |是 |安全控件相对于自身布局位置的坐标偏移。设置此属性不会影响父容器的布局，仅在绘制过程中调整位置。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>}。| 112 113**返回值：** 114 115| 类型 | 说明 | 116| -------- | -------- | 117| T | 返回安全控件的属性。 | 118 119## fontSize 120 121fontSize(value: Dimension): T 122 123设置安全控件上文字的尺寸。 124 125**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 126 127**系统能力：** SystemCapability.ArkUI.ArkUI.Full 128 129**参数：** 130 131| 参数名 | 类型 | 必填 | 说明 | 132|------------|------|-------|---------| 133| value | [Dimension](ts-types.md#dimension10) |是 |安全控件上文字的尺寸。<br/>默认值：16fp。| 134 135**返回值：** 136 137| 类型 | 说明 | 138| -------- | -------- | 139| T | 返回安全控件的属性。 | 140 141## fontStyle 142 143fontStyle(value: FontStyle): T 144 145设置安全控件上文字的样式。 146 147**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 148 149**系统能力：** SystemCapability.ArkUI.ArkUI.Full 150 151**参数：** 152 153| 参数名 | 类型 | 必填 | 说明 | 154|------------|------|-------|---------| 155| value | [FontStyle](ts-appendix-enums.md#fontstyle) |是 |安全控件上文字的样式。<br/>默认值：FontStyle.Normal。| 156 157**返回值：** 158 159| 类型 | 说明 | 160| -------- | -------- | 161| T | 返回安全控件的属性。 | 162 163## fontWeight 164 165fontWeight(value: number | FontWeight | string): T 166 167设置安全控件上文字粗细。 168 169**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 170 171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 172 173**参数：** 174 175| 参数名 | 类型 | 必填 | 说明 | 176|------------|------|-------|---------| 177| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string |是 |安全控件上文字粗细。<br/>默认值：FontWeight.Medium。| 178 179**返回值：** 180 181| 类型 | 说明 | 182| -------- | -------- | 183| T | 返回安全控件的属性。 | 184 185## fontFamily 186 187fontFamily(value: string | Resource): T 188 189设置安全控件上文字的字体。 190 191**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**参数：** 196 197| 参数名 | 类型 | 必填 | 说明 | 198|------------|------|-------|---------| 199| value | string \| [Resource](ts-types.md#resource) |是 |安全控件上文字的字体。<br/>默认字体：'HarmonyOS Sans'。| 200 201**返回值：** 202 203| 类型 | 说明 | 204| -------- | -------- | 205| T | 返回安全控件的属性。 | 206 207## fontColor 208 209fontColor(value: ResourceColor): T 210 211设置安全控件上文字的颜色。 212 213**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 214 215**系统能力：** SystemCapability.ArkUI.ArkUI.Full 216 217**参数：** 218 219| 参数名 | 类型 | 必填 | 说明 | 220|------------|------|-------|---------| 221| value | [ResourceColor](ts-types.md#resourcecolor) |是 |安全控件上文字的颜色。<br/>默认值：$r('sys.color.font_on_primary')。| 222 223**返回值：** 224 225| 类型 | 说明 | 226| -------- | -------- | 227| T | 返回安全控件的属性。 | 228 229## iconColor 230 231iconColor(value: ResourceColor): T 232 233设置安全控件上图标的颜色。 234 235**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 236 237**系统能力：** SystemCapability.ArkUI.ArkUI.Full 238 239**参数：** 240 241| 参数名 | 类型 | 必填 | 说明 | 242|------------|------|-------|---------| 243| value | [ResourceColor](ts-types.md#resourcecolor) |是 |安全控件上图标的颜色。<br/>默认值：$r('sys.color.icon_on_primary')。| 244 245**返回值：** 246 247| 类型 | 说明 | 248| -------- | -------- | 249| T | 返回安全控件的属性。 | 250 251## backgroundColor 252 253backgroundColor(value: ResourceColor): T 254 255设置安全控件的背景颜色。 256 257**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 258 259**系统能力：** SystemCapability.ArkUI.ArkUI.Full 260 261**参数：** 262 263| 参数名 | 类型 | 必填 | 说明 | 264|------------|------|-------|---------| 265| value | [ResourceColor](ts-types.md#resourcecolor) |是 |安全控件的背景颜色。<br/>默认值：$r('sys.color.icon_emphasize')。<br/>安全控件按钮背景色高八位的α值低于0x1a（例如0x1800ff00）时，安全控件按钮背景色高八位的α值会被系统强制调整为0xff。| 266 267**返回值：** 268 269| 类型 | 说明 | 270| -------- | -------- | 271| T | 返回安全控件的属性。 | 272 273## borderStyle 274 275borderStyle(value: BorderStyle): T 276 277设置安全控件的边框的样式。 278 279**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 280 281**系统能力：** SystemCapability.ArkUI.ArkUI.Full 282 283**参数：** 284 285| 参数名 | 类型 | 必填 | 说明 | 286|------------|------|-------|---------| 287| value | [BorderStyle](ts-appendix-enums.md#borderstyle) |是 |安全控件的边框的样式。<br/>默认不设置边框样式。| 288 289**返回值：** 290 291| 类型 | 说明 | 292| -------- | -------- | 293| T | 返回安全控件的属性。 | 294 295## borderWidth 296 297borderWidth(value: Dimension): T 298 299设置安全控件的边框的宽度。 300 301**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 302 303**系统能力：** SystemCapability.ArkUI.ArkUI.Full 304 305**参数：** 306 307| 参数名 | 类型 | 必填 | 说明 | 308|------------|------|-------|---------| 309| value | [Dimension](ts-types.md#dimension10) |是 |安全控件的边框的宽度。<br/>默认不设置边框宽度。| 310 311**返回值：** 312 313| 类型 | 说明 | 314| -------- | -------- | 315| T | 返回安全控件的属性。 | 316 317## borderColor 318 319borderColor(value: ResourceColor): T 320 321设置安全控件的边框的颜色。 322 323**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 324 325**系统能力：** SystemCapability.ArkUI.ArkUI.Full 326 327**参数：** 328 329| 参数名 | 类型 | 必填 | 说明 | 330|------------|------|-------|---------| 331| value | [ResourceColor](ts-types.md#resourcecolor) |是 |安全控件的边框的颜色。<br/>默认不设置边框颜色。| 332 333**返回值：** 334 335| 类型 | 说明 | 336| -------- | -------- | 337| T | 返回安全控件的属性。 | 338 339## borderRadius 340 341borderRadius(value: Dimension): T 342 343设置安全控件的边框圆角半径。 344 345**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 346 347**系统能力：** SystemCapability.ArkUI.ArkUI.Full 348 349**参数：** 350 351| 参数名 | 类型 | 必填 | 说明 | 352|------------|------|-------|---------| 353| value | [Dimension](ts-types.md#dimension10) |是 |安全控件的边框圆角半径。| 354 355**返回值：** 356 357| 类型 | 说明 | 358| -------- | -------- | 359| T | 返回安全控件的属性。 | 360 361## borderRadius<sup>15+</sup> 362 363borderRadius(radius: Dimension | BorderRadiuses): T 364 365设置安全控件的边框圆角半径，支持分别设置四个圆角。 366 367**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 368 369**系统能力：** SystemCapability.ArkUI.ArkUI.Full 370 371**参数：** 372 373| 参数名 | 类型 | 必填 | 说明 | 374|------------|------|-------|---------| 375| radius | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) |是 |安全控件的边框圆角半径。| 376 377**返回值：** 378 379| 类型 | 说明 | 380| -------- | -------- | 381| T | 返回安全控件的属性。 | 382 383## padding 384 385padding(value: Padding | Dimension): T 386 387设置安全控件的内边距。 388 389**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 390 391**系统能力：** SystemCapability.ArkUI.ArkUI.Full 392 393**参数：** 394 395| 参数名 | 类型 | 必填 | 说明 | 396|------------|------|-------|---------| 397| value | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) |是 |安全控件的内边距。<br/>默认值：上下8vp，左右16vp。| 398 399**返回值：** 400 401| 类型 | 说明 | 402| -------- | -------- | 403| T | 返回安全控件的属性。 | 404 405## align<sup>15+</sup> 406 407align(alignType: Alignment): T 408 409设置安全控件图标文本的对齐方式。 410 411**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 412 413**系统能力：** SystemCapability.ArkUI.ArkUI.Full 414 415**参数：** 416 417| 参数名 | 类型 | 必填 | 说明 | 418|------------|------|-------|---------| 419| alignType | [Alignment](ts-appendix-enums.md#alignment) |是 |安全控件图标文本的对齐方式，图标文本作为整体在控件背托范围内进行对齐，UX显示受[padding](ts-securitycomponent-attributes.md#padding)影响。<br/>默认值：Alignment.Center。| 420 421**返回值：** 422 423| 类型 | 说明 | 424| -------- | -------- | 425| T | 返回安全控件的属性。 | 426 427## textIconSpace 428 429textIconSpace(value: Dimension): T 430 431设置安全控件中图标和文字的间距。 432 433**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 434 435**系统能力：** SystemCapability.ArkUI.ArkUI.Full 436 437**参数：** 438 439| 参数名 | 类型 | 必填 | 说明 | 440|------------|------|-------|---------| 441| value | [Dimension](ts-types.md#dimension10) |是 |安全控件中图标和文字的间距。从API 14开始，若设置值为负值，则使用默认值。<br/>默认值：4vp。| 442 443**返回值：** 444 445| 类型 | 说明 | 446| -------- | -------- | 447| T | 返回安全控件的属性。 | 448 449## width<sup>11+</sup> 450 451width(value: Length): T 452 453设置安全控件自身的宽度，缺省时将根据元素内容自适配宽度。 454 455**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 456 457**系统能力：** SystemCapability.ArkUI.ArkUI.Full 458 459**参数：** 460 461| 参数名 | 类型 | 必填 | 说明 | 462|------------|------|-------|---------| 463|value | [Length](ts-types.md#length) |是 |安全控件自身的宽度，缺省时将根据元素内容自适配宽度。若设置宽度小于当前属性组合下允许的最小宽度时，宽度会调整为设置值，此时按钮文本信息会自动换行，以保证安全控件显示的完整性。| 464 465**返回值：** 466 467| 类型 | 说明 | 468| -------- | -------- | 469| T | 返回安全控件的属性。 | 470 471## height<sup>11+</sup> 472 473height(value: Length): T 474 475设置安全控件自身的高度，缺省时将根据元素内容自适配高度。 476 477**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 478 479**系统能力：** SystemCapability.ArkUI.ArkUI.Full 480 481**参数：** 482 483| 参数名 | 类型 | 必填 | 说明 | 484|------------|------|-------|---------| 485| value | [Length](ts-types.md#length) |是|安全控件自身的高度，缺省时将根据元素内容自适配高度。若设置高度小于当前属性组合下允许的最小高度时，高度不会缩减到设置值，此时高度会大于设置高度，以保证安全控件显示的完整性。| 486 487**返回值：** 488 489| 类型 | 说明 | 490| -------- | -------- | 491| T | 返回安全控件的属性。 | 492 493## size<sup>11+</sup> 494 495size(value: SizeOptions): T 496 497设置高宽尺寸，缺省时将根据元素内容自适配高宽尺寸。 498 499**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 500 501**系统能力：** SystemCapability.ArkUI.ArkUI.Full 502 503**参数：** 504 505| 参数名 | 类型 | 必填 | 说明 | 506|------------|------|-------|---------| 507| value | [SizeOptions](ts-types.md#sizeoptions) |是 |高宽尺寸，缺省时将根据元素内容自适配高宽尺寸。若设置尺寸小于当前属性组合下允许的最小尺寸时，高度不会缩减到设置值，宽度会调整到设置值，此时按钮文本信息会自动换行，以保证安全控件显示的完整性。| 508 509**返回值：** 510 511| 类型 | 说明 | 512| -------- | -------- | 513| T | 返回安全控件的属性。 | 514 515## constraintSize<sup>11+</sup> 516 517constraintSize(value: ConstraintSizeOptions): T 518 519设置约束尺寸，组件布局时，进行尺寸范围限制。 520 521**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 522 523**系统能力：** SystemCapability.ArkUI.ArkUI.Full 524 525**参数：** 526 527| 参数名 | 类型 | 必填 | 说明 | 528|------------|------|-------|---------| 529| value | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) |是 |约束尺寸，组件布局时，进行尺寸范围限制。constraintSize的优先级高于Width和Height。取值结果参考[constraintSize取值对width/height影响](ts-universal-attributes-size.md)。<br>同width/height一样，若设置尺寸小于当前属性组合下允许的最小尺寸时，高度不会缩减到设置值，宽度会调整到设置值，此时按钮文本信息会自动换行，以保证安全控件显示的完整性。<br>默认值：<br>{<br/>minWidth: 0,<br/>maxWidth: Infinity,<br/>minHeight: 0,<br/>maxHeight: Infinity<br/>}。| 530 531**返回值：** 532 533| 类型 | 说明 | 534| -------- | -------- | 535| T | 返回安全控件的属性。 | 536 537## alignRules<sup>15+</sup> 538 539alignRules(alignRule: AlignRuleOption): T 540 541指定设置在相对容器中子组件的对齐规则，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。 542 543**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 544 545**系统能力：** SystemCapability.ArkUI.ArkUI.Full 546 547**参数：** 548 549| 参数名 | 类型 | 必填 | 说明 | 550| ------ | ------------------------------------------- | ---- | ------------------------ | 551| alignRule | [AlignRuleOption](ts-universal-attributes-location.md#alignruleoption对象说明) | 是 | 指定设置在相对容器中子组件的对齐规则。 | 552 553**返回值：** 554 555| 类型 | 说明 | 556| -------- | -------- | 557| T | 返回安全控件的属性。 | 558 559## alignRules<sup>15+</sup> 560 561alignRules(alignRule: LocalizedAlignRuleOptions): T 562 563指定设置在相对容器中子组件的对齐规则，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。该方法水平方向上以start和end分别替代上述[alignRules](#alignrules15)的left和right，以便在RTL模式下能镜像显示，建议使用该方法指定设置在相对容器中子组件的对齐规则。 564 565**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 566 567**系统能力：** SystemCapability.ArkUI.ArkUI.Full 568 569**参数：** 570 571| 参数名 | 类型 | 必填 | 说明 | 572| ------ | ------------------------------------------- | ---- | ------------------------ | 573| alignRule | [LocalizedAlignRuleOptions](ts-universal-attributes-location.md#localizedalignruleoptions12对象说明) | 是 | 指定设置在相对容器中子组件的对齐规则。 | 574 575**返回值：** 576 577| 类型 | 说明 | 578| -------- | -------- | 579| T | 返回安全控件的属性。 | 580 581## id<sup>15+</sup> 582 583id(description: string): T 584 585组件的唯一标识，唯一性由使用者保证。 586 587**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 588 589**系统能力：** SystemCapability.ArkUI.ArkUI.Full 590 591**参数：** 592 593| 名称 | 类型 | 必填 | 说明 | 594| ------ | -------- | -----|---------------------- | 595| description | string | 是 | 组件的唯一标识，唯一性由使用者保证。<br>默认值：''。<br/> | 596 597**返回值：** 598 599| 类型 | 说明 | 600| -------- | -------- | 601| T | 返回安全控件的属性。 | 602 603## chainMode<sup>15+</sup> 604 605chainMode(direction: Axis, style: ChainStyle): T 606 607指定以该组件为链头所构成的链的参数，仅当父容器为[RelativeContainer](ts-container-relativecontainer.md)时生效。 608 609**原子化服务API：** 从API version 15开始，该接口支持在原子化服务中使用。 610 611**系统能力：** SystemCapability.ArkUI.ArkUI.Full 612 613**参数：** 614 615| 参数名 | 类型 | 必填 | 说明 | 616| ------ | ------------------------------------------- | ---- | ------------------------ | 617| direction | [Axis](ts-appendix-enums.md#axis) | 是 | 链的方向。 | 618| style | [ChainStyle](ts-universal-attributes-location.md#chainstyle12) | 是 | 链的样式。 | 619 620**返回值：** 621 622| 类型 | 说明 | 623| -------- | -------- | 624| T | 返回安全控件的属性。 | 625 626 627## SecurityComponentLayoutDirection枚举说明 628 629**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 630 631**系统能力：** SystemCapability.ArkUI.ArkUI.Full 632 633| 名称 | 值 | 说明 | 634| -------- | -------- | -------- | 635| HORIZONTAL | 0 | 安全控件上图标和文字分布的方向为水平排列。 | 636| VERTICAL | 1 | 安全控件上图标和文字分布的方向为垂直排列。 | 637 638 639## 示例 640 641> **说明：** 642> 为避免控件样式不合法导致授权失败，请开发者先了解安全控件样式的[约束与限制](../../../security/AccessToken/security-component-overview.md#约束与限制)。 643 644### 示例1 645 646设置SecurityComponent基础属性，生成一个保存控件 647 648```ts 649@Entry 650@Component 651struct Index { 652 build() { 653 Row() { 654 Column({ space: 5 }) { 655 // 生成一个保存按钮，并设置它的SecurityComponent属性。 656 SaveButton() 657 .fontSize(35) 658 .fontColor(Color.White) 659 .iconSize(30) 660 .layoutDirection(SecurityComponentLayoutDirection.HORIZONTAL) 661 .borderWidth(1) 662 .borderStyle(BorderStyle.Dashed) 663 .borderColor(Color.Blue) 664 .borderRadius(20) 665 .fontWeight(100) 666 .iconColor(Color.White) 667 .padding({ 668 left: 50, 669 top: 50, 670 bottom: 50, 671 right: 50 672 }) 673 .textIconSpace(20) 674 .backgroundColor(0x3282f6) 675 SaveButton().size({ width: 200, height: 100 }) 676 SaveButton() 677 .size({ width: 200, height: 100 }) 678 .align(Alignment.Start) 679 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal }) 680 .size({ width: 150, height: 80 }) 681 .borderRadius({ 682 topLeft: 20, 683 topRight: 25, 684 bottomRight: 30, 685 bottomLeft: 35 686 }) 687 SaveButton().constraintSize({ maxWidth: 60 }) 688 }.width('100%') 689 }.height('100%') 690 } 691} 692``` 693 694 695 696### 示例2 697 698以容器和容器内组件作为锚点进行布局 699 700```ts 701@Entry 702@Component 703struct Index { 704 build() { 705 Row() { 706 RelativeContainer() { 707 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: 0, buttonType: ButtonType.Normal }) 708 .width(100) 709 .height(100) 710 .backgroundColor("#A3CF62") 711 .alignRules({ 712 top: { anchor: "__container__", align: VerticalAlign.Top }, 713 left: { anchor: "__container__", align: HorizontalAlign.Start } 714 }) 715 .id("row1") 716 717 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: 0, buttonType: ButtonType.Normal }) 718 .width(100) 719 .height(100) 720 .backgroundColor("#00AE9D") 721 .alignRules({ 722 top: { anchor: "__container__", align: VerticalAlign.Top }, 723 right: { anchor: "__container__", align: HorizontalAlign.End } 724 }) 725 .id("row2") 726 727 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: 0, buttonType: ButtonType.Normal }) 728 .height(100) 729 .backgroundColor("#0A59F7") 730 .alignRules({ 731 top: { anchor: "row1", align: VerticalAlign.Bottom }, 732 left: { anchor: "row1", align: HorizontalAlign.End }, 733 right: { anchor: "row2", align: HorizontalAlign.Start } 734 }) 735 .id("row3") 736 737 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: 0, buttonType: ButtonType.Normal }) 738 .backgroundColor("#2CA9E0") 739 .alignRules({ 740 top: { anchor: "row3", align: VerticalAlign.Bottom }, 741 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 742 left: { anchor: "__container__", align: HorizontalAlign.Start }, 743 right: { anchor: "row1", align: HorizontalAlign.End } 744 }) 745 .id("row4") 746 747 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: 0, buttonType: ButtonType.Normal }) 748 .backgroundColor("#30C9F7") 749 .alignRules({ 750 top: { anchor: "row3", align: VerticalAlign.Bottom }, 751 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 752 left: { anchor: "row2", align: HorizontalAlign.Start }, 753 right: { anchor: "__container__", align: HorizontalAlign.End } 754 }) 755 .id("row5") 756 } 757 .width(300).height(300) 758 .margin({ left: 50 }) 759 .border({ width: 2, color: "#6699FF" }) 760 } 761 .height('100%') 762 } 763} 764``` 765 766 767
