Security Component Universal Attributes

Universal attributes of security components are basic attributes applicable to all security components.

NOTE

This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.

iconSize

iconSize(value: Dimension): T

Sets the icon size of the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Dimension	Yes	Icon size of the security component. Default value: 16vp. Percentage strings are not supported.

Return value

Type	Description
T	Attributes of the security component.

layoutDirection

layoutDirection(value: SecurityComponentLayoutDirection): T

Sets the layout direction of icons and text in the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	SecurityComponentLayoutDirection	Yes	Layout direction of icons and text in the security component. Default value: SecurityComponentLayoutDirection.HORIZONTAL.

Return value

Type	Description
T	Attributes of the security component.

position

position(value: Position): T

Sets the absolute position of the security component, that is, the offset of the component's upper left corner relative to its parent container's.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Position	Yes	Offset of the security component's upper left corner relative to its parent container's. Exception description: 1. The attribute does not take effect when the input parameter is invalid (for example, it does not comply with the definition of Position), or the input parameter is of the Position type but x and y are invalid values (for example, null or other character strings that do not comply with the format requirements). 2. When exactly one of x or y in the input Position is an invalid value, the invalid one is set to 0. For example, if the input is {x: 0, y: 'a'}, the final effect is displayed as {x: 0, y: 0}.

Return value

Type	Description
T	Attributes of the security component.

markAnchor

markAnchor(value: Position): T

Sets the anchor of the security component for moving the component with its upper left corner as the reference point.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Position	Yes	Anchor of the security component for moving the component with its upper left corner as the reference point. Generally, this attribute is used together with the position and offset attributes. When used alone, it produces an effect similar to that produced by offset. No default value. This attribute does not take effect when it is set to an invalid value.

Return value

Type	Description
T	Attributes of the security component.

offset

offset(value: Position | Edges | LocalizedEdges): T

Sets the coordinate offset of the security component relative to its own layout position.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Position \| Edges¹²⁺ \| LocalizedEdges¹²⁺	Yes	Coordinate offset of the security component relative to its own layout position. This attribute does not affect the layout in the parent container. The offset is used only during drawing. No default value. This attribute does not take effect when it is set to an invalid value.

Return value

Type	Description
T	Attributes of the security component.

Name	Type	Mandatory	Description
value	Dimension	Yes	Font size of the text in the security component. Default value: 16fp. Percentage strings are not supported.

fontStyle

fontStyle(value: FontStyle): T

Sets the font style of the text in the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	FontStyle	Yes	Font style of the text in the security component. Default value: FontStyle.Normal.

Return value

Type	Description
T	Attributes of the security component.

fontWeight

fontWeight(value: number | FontWeight | string | Resource): T

Sets the font weight of the text in the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \| FontWeight \| string \| Resource²⁰⁺	Yes	Font weight of the text in the security component. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. For the string type, only numeric strings, for example, '400', and the enumerated values of FontWeight are supported, including 'bold', 'bolder', 'lighter', 'regular', and 'medium'. The Resource type is supported since API version 20. The Resource type supports only 'integer' and 'string' formats. For the 'integer' type, values follow the number type specifications described earlier; for the 'string' type, values follow the string type specifications mentioned previously. If fontWeight is not set for a control, the font weight is set to FontWeight.Medium by default. If an invalid value is passed, the font weight is set to FontWeight.Normal.

Return value

Type	Description
T	Attributes of the security component.

fontFamily

fontFamily(value: string | Resource): T

Sets the font family of the text in the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	string \| Resource	Yes	Font family of the text in the security component. Default font: 'HarmonyOS Sans'.

Return value

Type	Description
T	Attributes of the security component.

fontColor

fontColor(value: ResourceColor): T

Sets the font color of the text in the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Font color of the text in the security component. Default value: $r('sys.color.font_on_primary').

Return value

Type	Description
T	Attributes of the security component.

iconColor

iconColor(value: ResourceColor): T

Sets the icon color of the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Icon color of the security component. Default value: $r('sys.color.icon_on_primary').

Return value

Type	Description
T	Attributes of the security component.

backgroundColor

backgroundColor(value: ResourceColor): T

Sets the background color of the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Background color of the security component. If the alpha value of the upper eight bits of the background color of the security component is less than 0x1a (for example, 0x1800ff00), the system will forcibly adjust this alpha value to 0xff. Default value: $r('sys.color.icon_emphasize').

Return value

Type	Description
T	Attributes of the security component.

borderStyle

borderStyle(value: BorderStyle): T

Sets the border style of the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	BorderStyle	Yes	Border style of the security component. By default, the border style is not set.

Return value

Type	Description
T	Attributes of the security component.

borderWidth

borderWidth(value: Dimension): T

Sets the border width of a secure control.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Dimension	Yes	Border width of a secure control. By default, the border width is not set.

Return value

Type	Description
T	Attributes of the security component.

borderColor

borderColor(value: ResourceColor): T

Sets the border color of a secure control.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Border color of a secure control. By default, the border color is not set.

Return value

Type	Description
T	Attributes of the security component.

borderRadius

borderRadius(value: Dimension): T

Sets the radius of the rounded border corners of the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Dimension	Yes	Radius of the rounded border corners of the security component.

Return value

Type	Description
T	Attributes of the security component.

borderRadius¹⁵⁺

borderRadius(radius: Dimension | BorderRadiuses): T

Sets the radius of the rounded corners for the security component. You can set the radius for each of the four corners individually.

Atomic service API: This API can be used in atomic services since API version 15.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
radius	Dimension \| BorderRadiuses	Yes	Radius of the rounded border corners of the security component.

Return value

Type	Description
T	Attributes of the security component.

padding

padding(value: Padding | Dimension): T

Sets the padding of the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Padding \| Dimension	Yes	Padding of the security component. Default value: 8 vp for the top and bottom paddings and 16 vp for the left and right paddings. Note: This parameter does not support percentage string values. If a percentage string is set, the corresponding padding value is 0.

Return value

Type	Description
T	Attributes of the security component.

align¹⁵⁺

align(alignType: Alignment): T

Sets the alignment of the icon and text in the security component.

Atomic service API: This API can be used in atomic services since API version 15.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
alignType	Alignment	Yes	Alignment of the icon and text in the security component. The icon and text are aligned as a whole within the background area of the component. The visual presentation is affected by padding, and alignment is performed according to the specified method on the basis of the padding effect. Default value: Alignment.Center.

Return value

Type	Description
T	Attributes of the security component.

textIconSpace

textIconSpace(value: Dimension): T

Sets the space between the icon and text in the security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Dimension	Yes	Space between the icon and text in the security component. Default value: 4vp. Note: This parameter does not support percentage string values. If a percentage string is set, the spacing between the icon and text is 0. Since API version 14, negative values are treated as the default value.

Return value

Type	Description
T	Attributes of the security component.

width¹¹⁺

width(value: Length): T

Sets the width of the security component. By default, the security component automatically adapts its width to the content.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Length	Yes	Width of the security component. By default, the security component automatically adapts its width to the content.

Return value

Type	Description
T	Attributes of the security component.

height¹¹⁺

height(value: Length): T

Sets the height of the security component. By default, the security component automatically adapts its height to the content.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Length	Yes	Height of the security component. By default, the security component automatically adapts its height to the content.

Return value

Type	Description
T	Attributes of the security component.

size¹¹⁺

size(value: SizeOptions): T

Sets the width and height of the security component. By default, the security component automatically adapts its size to the content.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	SizeOptions	Yes	Width and height of the security component. By default, the security component automatically adapts its size to the content.

Return value

Type	Description
T	Attributes of the security component.

constraintSize¹¹⁺

constraintSize(value: ConstraintSizeOptions): T

Sets the constraint size. The size range is restricted during component layout.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ConstraintSizeOptions	Yes	Size constraints of the component during component layout. If no unit is specified, the unit is vp. constraintSize takes precedence over width and height. For details about the value, see Impact of constraintSize on Width and Height. Default value: { minWidth: 0, maxWidth: Infinity, minHeight: 0, maxHeight: Infinity }.

Return value

Type	Description
T	Attributes of the security component.

alignRules¹⁵⁺

alignRules(alignRule: AlignRuleOption): T

Sets the alignment rules in the relative container. This API is valid only when the container is RelativeContainer.

Atomic service API: This API can be used in atomic services since API version 15.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
alignRule	AlignRuleOption	Yes	Alignment rule in the relative container.

Return value

Type	Description
T	Attributes of the security component.

alignRules¹⁵⁺

alignRules(alignRule: LocalizedAlignRuleOptions): T

Sets the alignment rules in the relative container. This API is valid only when the container is RelativeContainer. This API takes the right-to-left scripts into account, using start and end instead of left and right in alignRules for alignment in the horizontal direction. Prioritize this API in aligning child components in the relative container.

Atomic service API: This API can be used in atomic services since API version 15.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
alignRule	LocalizedAlignRuleOptions	Yes	Alignment rule in the relative container.

Return value

Type	Description
T	Attributes of the security component.

id¹⁵⁺

id(description: string): T

Unique ID you assigned for the component.

Atomic service API: This API can be used in atomic services since API version 15.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
description	string	Yes	Unique ID you assigned for the component. Default value: ''.

Return value

Type	Description
T	Attributes of the security component.

chainMode¹⁵⁺

chainMode(direction: Axis, style: ChainStyle): T

Sets the parameters of the chain in which the component is the head. This parameter has effect only when the parent container is RelativeContainer.

Atomic service API: This API can be used in atomic services since API version 15.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
direction	Axis	Yes	Direction of the chain.
style	ChainStyle	Yes	Style of the chain.

Return value

Type	Description
T	Attributes of the security component.

minFontScale¹⁸⁺

minFontScale(scale: number | Resource): T

Sets the minimum font scale factor for text.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
scale	number \| Resource	Yes	Minimum font scale factor for text. Value range: [0, 1] NOTE A value less than 0 is handled as 0, meaning no limit on scaling down. A value larger than 1 is handled as 1, meaning that scaling down does not take effect.

Return value

Type	Description
T	Attributes of the security component.

maxFontScale¹⁸⁺

maxFontScale(scale: number | Resource): T

Sets the maximum font scale factor for text.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
scale	number \| Resource	Yes	Maximum font scale factor for text. Value range: [1, +∞) NOTE A value less than 1 is handled as 1. Abnormal values are ineffective by default.

Return value

Type	Description
T	Attributes of the security component.

minFontSize¹⁸⁺

minFontSize(minSize: number | string | Resource): T

Sets the minimum font size.

When used in conjunction with maxFontSize and maxLines, or in combination with layout size constraints, this attribute enables font size adaptation. Using this attribute alone will not take effect.
If the value of minFontSize is less than or equal to 0, font size adaptation does not take effect.
When font size adaptation is enabled, the fontSize settings do not take effect.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
minSize	number \| string \| Resource	Yes	Minimum font size.

Return value

Type	Description
T	Attributes of the security component.

maxFontSize¹⁸⁺

maxFontSize(maxSize: number | string | Resource): T

Sets the maximum font size.

When used in conjunction with minFontSize and maxLines, or in combination with layout size constraints, this attribute enables font size adaptation. Using this attribute alone will not take effect.
When the adaptive font size takes effect, the setting of fontSize does not take effect.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
maxSize	number \| string \| Resource	Yes	Maximum font size.

Return value

Type	Description
T	Attributes of the security component.

maxLines¹⁸⁺

maxLines(line: number | Resource): T

Maximum number of lines in the text. By default, the text is automatically wrapped. After this attribute is specified, the maximum number of lines of the text does not exceed the specified value.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
line	number \| Resource²⁰⁺	Yes	Maximum number of lines in the text. The value range of the input parameter of the number type is [1, +∞). The Resource type is supported since API version 20. The parameter of the Resource type supports only integers in the range [1, +∞). NOTE A value less than 1 is handled as the default value 1000000.

Return value

Type	Description
T	Attributes of the security component.

heightAdaptivePolicy¹⁸⁺

heightAdaptivePolicy(policy: TextHeightAdaptivePolicy): T

Sets the method for text height adaptation.

The text size is automatically adjusted through text height adaptation.

The security component text is laid out based on the value of maxFontSize. If the text can be completely displayed, no adaptive adjustment is needed and this API does not take effect. Otherwise, adjustment is performed according to the specified text height adaptation policy. The specific adaptation adjustment specifications are as follows:

TextHeightAdaptivePolicy.MAX_LINES_FIRST: prioritizes the maxLines attribute for adjusting the text height. If the layout size using the maxLines attribute exceeds the layout constraints, the security component attempts to reduce the font size within the range of minFontSize and maxFontSize to display more text. If the text still cannot be fully displayed, the security component adaptively adjusts its height to fully display the text.

TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST: prioritizes the minFontSize attribute for adjusting the text height. If the text can be laid out in a single line using minFontSize, the security component attempts to increase the font size within the range of minFontSize and maxFontSize to use the largest possible font size. If the text cannot be laid out in a single line using minFontSize, the security component attempts to use the maxLines attribute for layout. If the text still cannot be fully displayed, the security component adaptively adjusts its height to fully display the text.

TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST: prioritizes layout constraints for adjusting the text height. If the layout size exceeds the constraints, the security component attempts to reduce the font size within the range of minFontSize and maxFontSize. If the layout size still exceeds the constraints after the font size is reduced to minFontSize, the security component truncates the excess lines. If the maxLines attribute is set, the number of lines does not exceed the maxLines value (horizontal truncation may occur). If maxLines is not set, there is no limit on the number of lines.

If the security component text is not completely displayed, the click is not authorized.

For details, see Example.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
policy	TextHeightAdaptivePolicy	Yes	Policy for text height adaptation. Default value: TextHeightAdaptivePolicy.MAX_LINES_FIRST.

Return value

Type	Description
T	Attributes of the security component.

enabled¹⁸⁺

enabled(respond: boolean): T

Sets whether the security component is interactive.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
respond	boolean	Yes	Whether the security component is interactive. true: The component is interactive and responds to operations such as clicks. false: The component is non-interactive and does not respond to operations such as clicks. Default value: true.

Return value

Type	Description
T	Attributes of the security component.

focusBox²²⁺

focusBox(style: FocusBoxStyle): T

Sets the style of the system focus box for security components.

Atomic service API: This API can be used in atomic services since API version 22.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
style	FocusBoxStyle	Yes	Style of the system focus box for security components.

Return value

Type	Description
T	Attributes of the security component.

SecurityComponentLayoutDirection

Enumerates the layout directions of icons and texts in a security component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Value	Description
HORIZONTAL	0	The icons and text in the security component are horizontally arranged.
VERTICAL	1	The icons and text on the security component are vertically arranged.

ButtonType

Enumerates the button types.

The button type affects how the settings for the borderRadius attribute are applied. The specific impact is as follows:

For a button of the Capsule type, the borderRadius settings do not take effect, and the button's corner radius is always half of the button's height or width, whichever is smaller.
When the button type is Circle, the setting of borderRadius does not take effect.
- If both the width and height are set, the rounded corner radius of the button is half of the smaller value between the width and height.
- If only one of the width and height is set, the rounded corner radius of the button is half of the set width or height.
- If neither width nor height is set, or if the value of borderRadius is negative, the button's corner radius will be determined based on the specific layout.
When the button type is Normal, the rounded corner radius of the button can be set by borderRadius. The rounded corner size is limited by the component size. The minimum value is 0, and the maximum value is half of the smaller value between the width and height.
If the button type is ROUNDED_RECTANGLE and borderRadius is not specified, the corner radius of a rounded rectangle button remains at the default value, 20 vp, regardless of the button's height.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Value	Description
Normal	0	Normal button, with no rounded corners by default.
Capsule	1	Capsule-type button, with a default corner radius equal to half of the button's height.
Circle	2	Circular button.
ROUNDED_RECTANGLE¹⁶⁺	8	Rounded rectangle button, with a default corner radius of 20 vp.

Example

NOTE You may want to learn the restrictions on security component styles to avoid authorization failures caused by incompliant styles.

Example 1

This example shows how to create a SaveButton component and set its security component attributes.

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 5 }) {
        // Generate a save button and set its SecurityComponent attributes.
        SaveButton()
          .fontSize(35)
          .fontColor(Color.White)
          .iconSize(30)
          .layoutDirection(SecurityComponentLayoutDirection.HORIZONTAL)
          .borderWidth(1)
          .borderStyle(BorderStyle.Dashed)
          .borderColor(Color.Blue)
          .borderRadius(20)
          .fontWeight(100)
          .iconColor(Color.White)
          .padding({
            left: 50,
            top: 50,
            bottom: 50,
            right: 50
          })
          .textIconSpace(20)
          .backgroundColor(0x3282f6)
        SaveButton().size({ width: 200, height: 100 })
        SaveButton()
          .size({ width: 200, height: 100 })
          .align(Alignment.Start)
        SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal })
          .size({ width: 150, height: 80 })
          .borderRadius({
            topLeft: 20,
            topRight: 25,
            bottomRight: 30,
            bottomLeft: 35
          })
        SaveButton().constraintSize({ maxWidth: 60 })
      }.width('100%')
    }.height('100%')
  }
}

SaveButton-Basic-demo

Example 2

Use the container and components in the container as anchors for layout.

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal })
          .width(100)
          .height(100)
          .backgroundColor('#A3CF62')
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            left: { anchor: '__container__', align: HorizontalAlign.Start }
          })
          .id('row1')

        SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal })
          .width(100)
          .height(100)
          .backgroundColor('#00AE9D')
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            right: { anchor: '__container__', align: HorizontalAlign.End }
          })
          .id('row2')

        SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal })
          .height(100)
          .backgroundColor('#0A59F7')
          .alignRules({
            top: { anchor: 'row1', align: VerticalAlign.Bottom },
            left: { anchor: 'row1', align: HorizontalAlign.End },
            right: { anchor: 'row2', align: HorizontalAlign.Start }
          })
          .id('row3')

        SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal })
          .backgroundColor('#2CA9E0')
          .alignRules({
            top: { anchor: 'row3', align: VerticalAlign.Bottom },
            bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
            left: { anchor: '__container__', align: HorizontalAlign.Start },
            right: { anchor: 'row1', align: HorizontalAlign.End }
          })
          .id('row4')

        SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal })
          .backgroundColor('#30C9F7')
          .alignRules({
            top: { anchor: 'row3', align: VerticalAlign.Bottom },
            bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
            left: { anchor: 'row2', align: HorizontalAlign.Start },
            right: { anchor: '__container__', align: HorizontalAlign.End }
          })
          .id('row5')
      }
      .width(300).height(300)
      .margin({ left: 50 })
      .border({ width: 2, color: '#6699FF' })
    }
    .height('100%')
  }
}

Example 3

This example demonstrates how to implement text height adaptation of the security component.

@Entry
@Component
struct Index {
  build() {
    Column() {
      Scroll() {
        Column({ space: 10 }) {
          Column({ space: 10 }) {
            Row() {
              Text('FontSize = 20, Legend: ').fontSize(20)
              Text('Quickly save images').fontSize(20).fontColor(Color.Blue)
            }.width('100%')

            Row() {
              Text('FontSize = 10, Legend: ').fontSize(20)
              Text('Quickly save images').fontSize(10).fontColor(Color.Blue)
            }.width('100%')
          }.width('100%')

          Flex({ wrap: FlexWrap.Wrap }) {
            Column() {
              Row() {
                Text('heightAdaptivePolicy = MIN_FONT_SIZE_FIRST').fontSize(16).fontWeight(FontWeight.Bold)
              }
            }.height(40)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('No need for adaptation')
                }.width('90%')

                // The text can be completely displayed in the current layout without adjustment.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(6)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
                  .width(120)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x10000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('Reduce the font size first')
                }.width('90%')

                // The text cannot be completely displayed in the current layout. Reduce the font size first so that the text can be displayed in one line.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(6)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
                  .width(60)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x30000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('Reduce the font size and then wrap lines')
                }.width('90%')

                // The text cannot be completely displayed in the current layout. Reduce the font size first. If the text still cannot be completely displayed after the font size is reduced, use the **maxLines** attribute to wrap lines.
                // The height is automatically adjusted to ensure that the text can be completely displayed.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(6)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
                  .width(20)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x30000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('Reduce the font size and wrap lines, with text truncated')
                }.width('90%')

                // The text cannot be completely displayed in the current layout. Reduce the font size first. If the text still cannot be completely displayed after the font size is reduced, use the **maxLines** attribute to wrap lines.
                //The maxLines attribute is set to 3, and only three lines can be displayed. Therefore, the text is truncated.
                // The height is automatically adjusted to ensure that the text can be completely displayed.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(3)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
                  .width(10)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x10000000)
          }.width('100%')

          Flex({ wrap: FlexWrap.Wrap }) {
            Column() {
              Row() {
                Text('heightAdaptivePolicy = MAX_LINES_FIRST').fontSize(16).fontWeight(FontWeight.Bold)
              }
            }.height(40)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('No need for adaptation')
                }.width('90%')

                // The text can be completely displayed in the current layout without adjustment.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(6)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
                  .width(120)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x10000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('Wrap first')
                }.width('90%')

                // If the text cannot be completely displayed in the current layout, lines are wrapped based on the maxlines attribute.
                // The height is automatically adjusted to ensure that the text can be completely displayed.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(6)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
                  .width(60)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x30000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('Wrap lines first, then reduce the font size')
                }.width('90%')

                // The current layout cannot fully display the text. The maxLines attribute is used preferentially for line-wrapping layout. If the text still cannot be fully displayed after wrapping, the font size is reduced for layout. After reducing the font size, the text can be fully displayed.
                // The height is automatically adjusted to ensure that the text can be completely displayed.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(3)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
                  .width(20)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x30000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('Wrap lines and reduce the font size, with text truncated')
                }.width('90%')

                // The current layout cannot fully display the text. The maxLines attribute is used preferentially for line-wrapping layout. If the text still cannot be fully displayed after wrapping, the font size is reduced for layout.
                // The minFontSize attribute is set to 10. Only one word can be displayed in each line. As a result, the text is truncated.
                // The height is automatically adjusted to ensure that the text can be completely displayed.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(3)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
                  .width(10)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x10000000)
          }.width('100%')

          Flex({ wrap: FlexWrap.Wrap }) {

            Column() {
              Row() {
                Text('heightAdaptivePolicy = LAYOUT_CONSTRAINT_FIRST').fontSize(16).fontWeight(FontWeight.Bold)
              }
            }.height(40)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('No need for adaptation')
                }.width('90%')

                // The text can be completely displayed in the current layout without adjustment.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(6)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
                  .width(120)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x10000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('Reduce font size first without changing layout constraints')
                }.width('90%')

                // The text cannot be completely displayed in the current layout. Reduce the font size first so that the text can be displayed in one line.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(6)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
                  .width(60)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x30000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text('Reduce font size and then wrap lines without changing layout constraints')
                }.width('90%')

                // The text cannot be completely displayed in the current layout. The font size is reduced first. The text still cannot be completely displayed so that lines are wrapped based on the maxlines attribute.
                // In LAYOUT_CONSTRAINT_FIRST mode, the height of the security component cannot be adjusted adaptively.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(6)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
                  .width(20)
                  .height(40)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('50%').height(90).backgroundColor(0x30000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text(`Maxlines is insufficient.\nThe text is truncated.`)
                }.width('90%')

                // The current layout cannot display the text completely. After font size reduction, it still cannot be fully displayed. Since the height allows only one line, the text is truncated.
                // In LAYOUT_CONSTRAINT_FIRST mode, the height of the security component cannot be adjusted adaptively.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(2)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
                  .width(20)
                  .height(40)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('25%').height(90).backgroundColor(0x10000000)

            Column() {
              Column({ space: 10 }) {
                Row() {
                  Text(`The height is insufficient.\nThe text is truncated.`)
                }.width('90%')

                // The current layout cannot display the text completely. After font size reduction, it still cannot be fully displayed. Since the height allows only one line, the text is truncated.
                // In LAYOUT_CONSTRAINT_FIRST mode, the height of the security component cannot be adjusted adaptively.
                SaveButton({
                  text: SaveDescription.QUICK_SAVE_TO_GALLERY, buttonType: ButtonType.Normal
                })
                  .maxFontSize(20)
                  .minFontSize(10)
                  .maxLines(6)
                  .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
                  .width(20)
                  .height(20)
                  .padding(0)
                  .borderRadius(10)
              }
            }.width('25%').height(90).backgroundColor(0x20000000)
          }.width('100%')

        }.width('100%')
      }.width('100%').margin({ top: 10, left: 10, right: 10 })
    }
  }
}

Example 4

This example demonstrates how to set the style of the system focus box for security components.

import { ColorMetrics, LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 30 }) {
        Column({ space: 15 }) {
          Text ('Default security component with focusBox not set')
          SaveButton()
        }

        Column({ space: 15 }) {
          Text ('Black focus box closely attached to the security component')
          SaveButton()
            .focusBox({
              margin: new LengthMetrics(0),
              strokeColor: ColorMetrics.rgba(0, 0, 0),
            })
        }

        Column({ space: 15 }) {
          Text ('Larger red focus box')
          SaveButton()
            .focusBox({
              margin: new LengthMetrics(10),
              strokeColor: ColorMetrics.rgba(255, 0, 0),
              strokeWidth: LengthMetrics.px(10)
            })
        }

        Column({ space: 15 }) {
          Text ('Rectangular security component')
          SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal })
            .focusBox({
              margin: new LengthMetrics(10),
              strokeColor: ColorMetrics.rgba(255, 0, 0),
              strokeWidth: LengthMetrics.px(10)
            })
        }

        Column({ space: 15 }) {
          Text ('Circular security component')
          SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Circle })
            .focusBox({
              margin: new LengthMetrics(10),
              strokeColor: ColorMetrics.rgba(255, 0, 0),
              strokeWidth: LengthMetrics.px(10)
            })
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

Security Component Universal Attributes

iconSize

layoutDirection

position

markAnchor

offset

fontSize

fontStyle

fontWeight

fontFamily

fontColor

iconColor

backgroundColor

borderStyle

borderWidth

borderColor

borderRadius

borderRadius15+

padding

align15+

textIconSpace

width11+

height11+

size11+

constraintSize11+

alignRules15+

alignRules15+

id15+

chainMode15+

minFontScale18+

maxFontScale18+

minFontSize18+

maxFontSize18+

maxLines18+

heightAdaptivePolicy18+

enabled18+

focusBox22+

SecurityComponentLayoutDirection

ButtonType

Example

Example 1

Example 2

Example 3

Example 4

borderRadius¹⁵⁺

align¹⁵⁺

width¹¹⁺

height¹¹⁺

size¹¹⁺

constraintSize¹¹⁺

alignRules¹⁵⁺

alignRules¹⁵⁺

id¹⁵⁺

chainMode¹⁵⁺

minFontScale¹⁸⁺

maxFontScale¹⁸⁺

minFontSize¹⁸⁺

maxFontSize¹⁸⁺

maxLines¹⁸⁺

heightAdaptivePolicy¹⁸⁺

enabled¹⁸⁺

focusBox²²⁺