openharmony 鸿蒙 ts-universal-attributes-outline

2025-06-12 浏览 (1)

外描边设置

设置组件外描边（outline）样式。外描边绘制在组件的外侧，不影响布局，不会占用组件本身大小。

outlineTest

说明：

从API version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

outline

outline(value: OutlineOptions): T

统一外描边样式设置接口。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueOutlineOptions是外描边样式。

返回值：

类型说明
T返回当前组件。

outline18+

outline(options: Optional<OutlineOptions>): T

统一外描边样式设置接口。与outline相比，options参数新增了对undefined类型的支持。

卡片能力： 从API version 18开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsOptional<OutlineOptions>是外描边样式。
当options的值为undefined时，恢复为无外边框效果。

返回值：

类型说明
T返回当前组件。

OutlineStyle11+枚举说明

外描边样式。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称说明
SOLID显示为一条实线。
DASHED显示为一系列短的方形虚线。
DOTTED显示为一系列圆点，圆点半径为outlineWidth的一半。

outlineStyle

outlineStyle(value: OutlineStyle|EdgeOutlineStyles): T

设置元素的外描边样式。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueOutlineStyle | EdgeOutlineStyles是设置元素的外描边样式。
默认值：OutlineStyle.SOLID

返回值：

类型说明
T返回当前组件。

outlineStyle18+

outlineStyle(style: Optional<OutlineStyle|EdgeOutlineStyles>): T

设置元素的外描边样式。与outlineStyle相比，style参数新增了对undefined类型的支持。

卡片能力： 从API version 18开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
styleOptional<OutlineStyle | EdgeOutlineStyles>是设置元素的外描边样式。
默认值：OutlineStyle.SOLID
当style的值为undefined时，恢复为无外描边样式的效果。

返回值：

类型说明
T返回当前组件。

outlineWidth

outlineWidth(value: Dimension|EdgeOutlineWidths): T

设置元素的外描边宽度。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueDimension | EdgeOutlineWidths是设置元素的外描边宽度，不支持百分比。
默认值：0。

返回值：

类型说明
T返回当前组件。

outlineWidth18+

outlineWidth(width: Optional<Dimension|EdgeOutlineWidths>): T

设置元素的外描边宽度。与outlineWidth相比，width参数新增了对undefined类型的支持。

卡片能力： 从API version 18开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
widthOptional<Dimension | EdgeOutlineWidths>是设置元素的外描边宽度，不支持百分比。
默认值：0。
当width的值为undefined时，恢复为无外描边宽度的效果。

返回值：

类型说明
T返回当前组件。

outlineColor

outlineColor(value: ResourceColor|EdgeColors): T

设置元素的外描边颜色。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor | EdgeColors是设置元素的外描边颜色。
默认值：Color.Black

返回值：

类型说明
T返回当前组件。

outlineColor18+

outlineColor(color: Optional<ResourceColor|EdgeColors>): T

设置元素的外描边颜色。与outlineColor相比，color参数新增了对undefined类型的支持。

卡片能力： 从API version 18开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
colorOptional<ResourceColor | EdgeColors>是设置元素的外描边颜色。
默认值：Color.Black
当color的值为undefined时，恢复为描边颜色为Color.Black的效果。

返回值：

类型说明
T返回当前组件。

outlineRadius

outlineRadius(value: Dimension|OutlineRadiuses): T

设置元素的外描边圆角半径。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueDimension | OutlineRadiuses是设置元素的外描边圆角半径，不支持百分比。
默认值：0。
最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。

返回值：

类型说明
T返回当前组件。

outlineRadius18+

outlineRadius(radius: Optional<Dimension|OutlineRadiuses>): T

设置元素的外描边圆角半径。与outlineRadius相比，radius参数新增了对undefined类型的支持。

卡片能力： 从API version 18开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
radiusOptional<Dimension | OutlineRadiuses>是设置元素的外描边圆角半径，不支持百分比。
默认值：0。
最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。
当radius的值为undefined时，恢复为外描边圆角半径为0的效果。

返回值：

类型说明
T返回当前组件。

OutlineOptions对象说明

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

名称类型必填说明
widthDimension | EdgeOutlineWidths否设置外描边宽度，不支持百分比。
默认值：0，外描边效果中width为必设项，否则不显示外描边。
colorResourceColor | EdgeColors | LocalizedEdgeColors12+否设置外描边颜色。
默认值：Color.Black
radiusDimension | OutlineRadiuses否设置外描边圆角半径，不支持百分比。
默认值：0。
最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。
styleOutlineStyle | EdgeOutlineStyles否设置外描边样式。
默认值：OutlineStyle.SOLID。

EdgeOutlineWidths对象说明

引入该对象时，至少传入一个参数。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

名称参数类型必填描述
leftDimension否左侧外描边宽度。
rightDimension否右侧外描边宽度。
topDimension否上侧外描边宽度。
bottomDimension否下侧外描边宽度。

EdgeColors对象说明

引入该对象时，至少传入一个参数。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

名称参数类型必填描述
leftResourceColor否左侧外描边颜色。
rightResourceColor否右侧外描边颜色。
topResourceColor否上侧外描边颜色。
bottomResourceColor否下侧外描边颜色。

LocalizedEdgeColors对象说明12+

引入该对象时，至少传入一个参数。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

名称参数类型必填描述
startResourceColor否左侧外描边颜色。
从左至右显示语言模式下为右侧外描边颜色。
endResourceColor否右侧外描边颜色。
从左至右显示语言模式下为左侧外描边颜色。
topResourceColor否上侧外描边颜色。
bottomResourceColor否下侧外描边颜色。

OutlineRadiuses对象说明

引用该对象时，至少传入一个参数。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

名称参数类型必填描述
topLeftDimension否左上角圆角半径。
topRightDimension否右上角圆角半径。
bottomLeftDimension否左下角圆角半径。
bottomRightDimension否右下角圆角半径。

EdgeOutlineStyles对象说明

引入该对象时，至少传入一个参数。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

名称参数类型必填描述
leftOutlineStyle否左侧外描边样式。
rightOutlineStyle否右侧外描边样式。
topOutlineStyle否上侧外描边样式。
bottomOutlineStyle否下侧外描边样式。

示例

示例1（使用外描边属性）

该示例主要演示如何通过outline来实现组件外描边。

// xxx.ets
@Entry
@Component
struct OutlineExample {
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        // 线段
        Text('DASHED')
          .backgroundColor(Color.Pink)
          .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10)
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
        // 点线
        Text('DOTTED')
          .backgroundColor(Color.Pink)
          .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED })
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
      }.width('100%').height(150)

      Text('.outline')
        .backgroundColor(Color.Pink)
        .fontSize(50)
        .width(300)
        .height(300)
        .outline({
          width: { left: 3, right: 6, top: 10, bottom: 15 },
          color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
          radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
          style: {
            left: OutlineStyle.DOTTED,
            right: OutlineStyle.DOTTED,
            top: OutlineStyle.SOLID,
            bottom: OutlineStyle.DASHED
          }
        }).textAlign(TextAlign.Center)
    }
  }
}

zh-cn_image_0000001219982706

示例2（使用LocalizedEdgeColors类型）

该示例将outline属性中的color属性值设置为LocalizedEdgeColors类型。

// xxx.ets

@Entry
@Component
struct OutlineExample {
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        // 线段
        Text('DASHED')
          .backgroundColor(Color.Pink)
          .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10)
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
        // 点线
        Text('DOTTED')
          .backgroundColor(Color.Pink)
          .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED })
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
      }.width('100%').height(150)

      Text('.outline')
        .backgroundColor(Color.Pink)
        .fontSize(50)
        .width(300)
        .height(300)
        .outline({
          width: { left: 3, right: 6, top: 10, bottom: 15 },
          color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green },
          radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
          style: {
            left: OutlineStyle.DOTTED,
            right: OutlineStyle.DOTTED,
            top: OutlineStyle.SOLID,
            bottom: OutlineStyle.DASHED
          }
        }).textAlign(TextAlign.Center)
    }
  }
}

从左至右显示语言示例图

zh-cm_image_outling_ltr

从右至左显示语言示例图

zh-cm_image_outling_rtl

你可能感兴趣的鸿蒙文章

harmony 鸿蒙图像AI分析错误码

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙弹出框 (Dialog)

harmony 鸿蒙DialogV2

  • 所属分类： 后端技术
  • 本文标签： 软件 鸿蒙
  • 版权声明： 本文链接 https://seaxiang.com/blog/jfHBQp