文章目录focusBox 组件说明核心作用完整代码focusBox 参数详解关键规则代码逐段解析1. 默认焦点框无 focusBox2. 紧贴控件的黑色焦点框3. 大尺寸红色焦点框4. 矩形按钮 焦点框5. 圆形按钮 焦点框总结focusBox 组件说明focusBox是 HarmonyOS 安全控件专属的系统焦点框样式属性从API 22开始支持用于在安全控件获得焦点时自定义外框的边距、颜色、线条宽度。核心作用提升焦点状态的视觉辨识度适配 TV/车机/平板等焦点操控设备统一安全控件的焦点视觉规范不影响按钮本身的安全能力完整代码import{ColorMetrics,LengthMetrics}fromkit.ArkUI;EntryComponentstruct Index{build(){Row(){Column({space:30}){Column({space:15}){Text(不设置focusBox属性的默认安全控件)SaveButton()}Column({space:15}){Text(紧贴安全控件的黑色焦点框)SaveButton().focusBox({margin:newLengthMetrics(0),strokeColor:ColorMetrics.rgba(0,0,0),})}Column({space:15}){Text(较大的红色焦点框)SaveButton().focusBox({margin:newLengthMetrics(10),strokeColor:ColorMetrics.rgba(255,0,0),strokeWidth:LengthMetrics.px(10)})}Column({space:15}){Text(矩形安全控件)SaveButton({icon:SaveIconStyle.FULL_FILLED,text:SaveDescription.DOWNLOAD,buttonType:ButtonType.Normal}).focusBox({margin:newLengthMetrics(10),strokeColor:ColorMetrics.rgba(255,0,0),strokeWidth:LengthMetrics.px(10)})}Column({space:15}){Text(圆形安全控件)SaveButton({icon:SaveIconStyle.FULL_FILLED,text:SaveDescription.DOWNLOAD,buttonType:ButtonType.Circle}).focusBox({margin:newLengthMetrics(10),strokeColor:ColorMetrics.rgba(255,0,0),strokeWidth:LengthMetrics.px(10)})}}.width(100%)}.height(100%)}}运行效果如图focusBox 参数详解focusBox 接收FocusBoxStyle类型对象包含三个可配置参数参数名类型说明marginLengthMetrics焦点框与控件之间的边距strokeColorColorMetrics焦点框的颜色strokeWidthLengthMetrics焦点框线条宽度px关键规则必须导入import{ColorMetrics,LengthMetrics}fromkit.ArkUI;所有数值必须通过new LengthMetrics()或LengthMetrics.px()创建颜色必须通过ColorMetrics.rgba()创建代码逐段解析1. 默认焦点框无 focusBoxSaveButton()使用系统默认焦点样式系统自动决定颜色、边距、宽度。2. 紧贴控件的黑色焦点框.focusBox({margin:newLengthMetrics(0),strokeColor:ColorMetrics.rgba(0,0,0),})margin: 0 → 焦点框紧贴按钮颜色纯黑3. 大尺寸红色焦点框.focusBox({margin:newLengthMetrics(10),strokeColor:ColorMetrics.rgba(255,0,0),strokeWidth:LengthMetrics.px(10)})外边距 10vp颜色红色线条宽度 10px4. 矩形按钮 焦点框SaveButton({buttonType:ButtonType.Normal}).focusBox(...)Normal 类型按钮显示为矩形焦点框也会跟随为矩形。5. 圆形按钮 焦点框SaveButton({buttonType:ButtonType.Circle}).focusBox(...)Circle 类型按钮显示为圆形焦点框也会跟随为圆形。总结仅安全控件支持focusBox 是 SecurityComponent 专属属性普通组件不可用。API 版本要求最低 API 22低于该版本调用会直接报错。按钮类型自动匹配焦点框形状Normal / ROUNDED_RECTANGLE → 矩形焦点框Circle → 圆形焦点框Capsule → 胶囊形焦点框不影响按钮功能无论如何配置 focusBox都不会改变安全控件的授权逻辑。编译报错找不到 LengthMetrics解决必须导入kit.ArkUI焦点框不显示排查是否在非焦点设备手机运行API 版本是否 ≥22颜色/宽度不生效排查必须使用ColorMetrics.rgba和LengthMetrics.px如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力