HarmonyOS6 ArkTS 外描边（outline）使用文档

文章目录一、核心属性与接口1. 统一设置接口 outlineAPI 11API 182. 分设属性精细控制二、OutlineStyle 枚举三种线型三、使用方式方式1独立属性分开设置方式2统一 outline 对象配置方式3四边差异化配置方式4多语言方向适配start/end四、完整可运行示例代码总结一、核心属性与接口1. 统一设置接口 outlineAPI 11outline(value:OutlineOptions):T一次性配置宽度、颜色、圆角、样式参数OutlineOptions必传API 18outline(options:OptionalOutlineOptions):T支持传入undefined恢复无外描边效果2. 分设属性精细控制属性名作用支持版本outlineStyle设置描边样式实线/虚线/点线11outlineWidth设置描边宽度不支持百分比11outlineColor设置描边颜色默认黑色11outlineRadius设置描边圆角11API 18 以上属性均支持Optional类型传undefined可恢复默认。二、OutlineStyle 枚举三种线型枚举值效果SOLID实线DASHED短虚线DOTTED圆点线半径为宽度一半三、使用方式方式1独立属性分开设置分别控制样式、宽度、颜色、圆角适合单一边性统一配置。Text(SOLID).backgroundColor(Color.Pink).outlineStyle(OutlineStyle.SOLID).outlineWidth(4).outlineColor(Color.Blue).outlineRadius(12)方式2统一 outline 对象配置用对象批量配置代码更简洁。Text(统一 outline 配置).outline({width:5,color:Color.Red,radius:20,style:OutlineStyle.DASHED})方式3四边差异化配置分别设置左、右、上、下的宽度、颜色、圆角、样式。.outline({width:{left:3,right:6,top:8,bottom:10},color:{left:#e3bbbb,right:Color.Blue,top:Color.Red,bottom:Color.Green},radius:{topLeft:10,topRight:20,bottomLeft:30,bottomRight:40},style:{left:OutlineStyle.DOTTED,right:OutlineStyle.DOTTED,top:OutlineStyle.SOLID,bottom:OutlineStyle.DASHED}})方式4多语言方向适配start/end使用LocalizedEdgeColors适配从左到右/从右到左语言。.outline({width:5,color:{start:Color.Black,end:Color.Pink,top:Color.Green,bottom:Color.Blue},radius:15,style:OutlineStyle.SOLID})四、完整可运行示例代码// Index.ets Entry Component struct OutlineFullDemo { build() { Column({ space: 20 }) { Text(ArkTS 外描边 outline 完整演示) .fontSize(24) .fontWeight(FontWeight.Bold) .margin({ top: 10 }) // 1. 独立属性分开设置 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { // 实线外描边 Text(SOLID) .backgroundColor(Color.Pink) .outlineStyle(OutlineStyle.SOLID) .outlineWidth(4) .outlineColor(Color.Blue) .outlineRadius(12) .width(130) .height(130) .textAlign(TextAlign.Center) .fontSize(18) // 虚线外描边 Text(DASHED) .backgroundColor(Color.Pink) .outlineStyle(OutlineStyle.DASHED) .outlineWidth(4) .outlineColor(0xAFEEEE) .outlineRadius(12) .width(130) .height(130) .textAlign(TextAlign.Center) .fontSize(18) // 点线外描边 Text(DOTTED) .backgroundColor(Color.Pink) .outlineStyle(OutlineStyle.DOTTED) .outlineWidth(4) .outlineColor(0x317AF7) .outlineRadius(12) .width(130) .height(130) .textAlign(TextAlign.Center) .fontSize(18) } .width(100%) // 2. 统一 outline 配置对象 Text(统一 outline 配置) .backgroundColor(Color.Green) .fontSize(22) .width(320) .height(160) .outline({ width: 5, color: Color.Red, radius: 20, style: OutlineStyle.DASHED }) .textAlign(TextAlign.Center) .margin({ top: 10 }) // 3. 四边差异化外描边宽度/颜色/圆角/样式都不同 Text(四边差异化 outline) .backgroundColor(Color.Grey) .fontColor(Color.White) .fontSize(20) .width(340) .height(180) .outline({ width: { left: 3, right: 6, top: 8, bottom: 10 }, color: { left: #e3bbbb, right: Color.Blue, top: Color.Red, bottom: Color.Green }, radius: { topLeft: 10, topRight: 20, bottomLeft: 30, bottomRight: 40 }, style: { left: OutlineStyle.DOTTED, right: OutlineStyle.DOTTED, top: OutlineStyle.SOLID, bottom: OutlineStyle.DASHED } }) .textAlign(TextAlign.Center) .margin({ top: 10 }) // 4. LocalizedEdgeColors 多语言适配方向颜色 Text(start/end 方向颜色) .backgroundColor(Color.Yellow) .fontSize(20) .width(320) .height(150) .outline({ width: 5, color: { start: Color.Black, end: Color.Pink, top: Color.Green, bottom: Color.Blue }, radius: 15, style: OutlineStyle.SOLID }) .textAlign(TextAlign.Center) .margin({ top: 10 }) } .width(100%) .padding(15) .backgroundColor(Color.White) .height(100%) } }运行效果如图总结不影响布局外描边在组件外侧不会改变组件大小与布局。宽度不支持百分比outlineWidth仅支持具体尺寸。圆角上限outlineRadius最大生效值为组件宽/2宽度或组件高/2宽度。API 18 增强支持undefined重置样式便于动态控制显隐。默认值样式默认实线颜色默认黑色。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力