harmony 鸿蒙外描边设置

2025-06-12
浏览 (4)

外描边设置

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

outlineTest

说明：

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

outline

outline(value: OutlineOptions): T

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

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

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

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

参数：

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

返回值：

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

outline¹⁸⁺

outline(options: Optional<OutlineOptions>): T

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

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

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

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

参数：

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

返回值：

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

OutlineStyle¹¹⁺枚举说明

外描边样式。

卡片能力： 从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

参数：

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

返回值：

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

outlineStyle¹⁸⁺

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

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

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

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

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

参数：

参数名	类型	必填	说明
style	Optional<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

参数：

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

返回值：

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

outlineWidth¹⁸⁺

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

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

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

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

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

参数：

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

返回值：

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

outlineColor

outlineColor(value: ResourceColor|EdgeColors): T

设置元素的外描边颜色。

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

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

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

参数：

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

返回值：

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

outlineColor¹⁸⁺

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

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

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

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

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

参数：

参数名	类型	必填	说明
color	Optional<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

参数：

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

返回值：

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

outlineRadius¹⁸⁺

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

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

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

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

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

参数：

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

返回值：

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

OutlineOptions对象说明

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

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

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

EdgeOutlineWidths对象说明

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

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

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

名称	参数类型	必填	描述
left	Dimension	否	左侧外描边宽度。
right	Dimension	否	右侧外描边宽度。
top	Dimension	否	上侧外描边宽度。
bottom	Dimension	否	下侧外描边宽度。

EdgeColors对象说明

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

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

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

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

名称	参数类型	必填	描述
left	ResourceColor	否	左侧外描边颜色。
right	ResourceColor	否	右侧外描边颜色。
top	ResourceColor	否	上侧外描边颜色。
bottom	ResourceColor	否	下侧外描边颜色。

LocalizedEdgeColors对象说明¹²⁺

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

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

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

名称	参数类型	必填	描述
start	ResourceColor	否	左侧外描边颜色。从左至右显示语言模式下为右侧外描边颜色。
end	ResourceColor	否	右侧外描边颜色。从左至右显示语言模式下为左侧外描边颜色。
top	ResourceColor	否	上侧外描边颜色。
bottom	ResourceColor	否	下侧外描边颜色。

OutlineRadiuses对象说明

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

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

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

名称	参数类型	必填	描述
topLeft	Dimension	否	左上角圆角半径。
topRight	Dimension	否	右上角圆角半径。
bottomLeft	Dimension	否	左下角圆角半径。
bottomRight	Dimension	否	右下角圆角半径。

EdgeOutlineStyles对象说明

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

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

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

名称	参数类型	必填	描述
left	OutlineStyle	否	左侧外描边样式。
right	OutlineStyle	否	右侧外描边样式。
top	OutlineStyle	否	上侧外描边样式。
bottom	OutlineStyle	否	下侧外描边样式。

示例

示例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 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙弹出框 (Dialog)

harmony 鸿蒙DialogV2

0 赞

所属分类： 后端技术
本文标签：
版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/jfHBQp

harmony 鸿蒙外描边设置

外描边设置

outline

outline¹⁸⁺

OutlineStyle¹¹⁺枚举说明

outlineStyle

outlineStyle¹⁸⁺

outlineWidth

outlineWidth¹⁸⁺

outlineColor

outlineColor¹⁸⁺

outlineRadius

outlineRadius¹⁸⁺

OutlineOptions对象说明

EdgeOutlineWidths对象说明

EdgeColors对象说明

LocalizedEdgeColors对象说明¹²⁺

OutlineRadiuses对象说明

EdgeOutlineStyles对象说明

示例

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

示例2（使用LocalizedEdgeColors类型）

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

harmony 鸿蒙外描边设置

外描边设置

outline

outline18+

OutlineStyle11+枚举说明

outlineStyle

outlineStyle18+

outlineWidth

outlineWidth18+

outlineColor

outlineColor18+

outlineRadius

outlineRadius18+

OutlineOptions对象说明

EdgeOutlineWidths对象说明

EdgeColors对象说明

LocalizedEdgeColors对象说明12+

OutlineRadiuses对象说明

EdgeOutlineStyles对象说明

示例

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

示例2（使用LocalizedEdgeColors类型）

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

outline¹⁸⁺

OutlineStyle¹¹⁺枚举说明

outlineStyle¹⁸⁺

outlineWidth¹⁸⁺

outlineColor¹⁸⁺

outlineRadius¹⁸⁺

LocalizedEdgeColors对象说明¹²⁺