# SecLocationButton 安全组件的位置按钮,用户通过点击该位置按钮,可以临时获取精准定位权限,而不需要权限弹框授权确认。 > **说明:** > > 该组件从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 ## 子组件 不支持。 ## 接口 **方法1:** SecLocationButton() 默认创建带有图标、文本、背景的位置按钮。 **方法2:** SecLocationButton(option:{icon?: LocationIconStyle, text?: LocationDescription, background?: BackgroundButtonType}) 创建包含指定元素的位置按钮。 **参数:** | 参数名 | 参数类型 | 必填 | 参数描述 | | ------ | ----------------------------------- | ---- | -------------- | | icon | [LocationIconStyle](#locationiconstyle枚举说明) |否 | 设置位置按钮的图标风格
不传入该参数表示没有图标,icon和text至少存在一个。 | | text | [LocationDescription](#locationdescription枚举说明) | 否 | 设置位置按钮的文本描述
不传入该参数表示没有文字描述,icon和text至少存在一个。 | | background | [BackgroundButtonType](#backgroundbuttontype枚举说明) | 否 | 设置位置按钮的背景样式
不传入该参数表示没有背景。 | ## LocationIconStyle枚举说明 | 名称 | 描述 | | ------------------- | ------------------ | | FULL_FILLED | 位置按钮展示填充样式图标。 | | LINES | 位置按钮展示线条样式图标。 | ## LocationDescription枚举说明 | 名称 | 描述 | | ------------------- | ------------------ | | CURRENT_LOCATION | 位置按钮的文字描述为“当前位置”。 | | ADD_LOCATION | 位置按钮的文字描述为“添加位置”。 | | SELECT_LOCATION | 位置按钮的文字描述为“选择位置”。 | | SHARE_LOCATION | 位置按钮的文字描述为“共享位置”。 | | SEND_LOCATION | 位置按钮的文字描述为“发送位置”。 | | LOCATING | 位置按钮的文字描述为“定位”。 | | LOCATION | 位置按钮的文字描述为“位置”。 | | SEND_CURRENT_LOCATION | 位置按钮的文字描述为“发送实时位置”。 | | RELOCATION | 位置按钮的文字描述为“重定位”。 | | PUNCH_IN | 位置按钮的文字描述为“打卡定位”。 | | CURRENT_POSITION | 位置按钮的文字描述为“所在位置”。 | ## BackgroundButtonType枚举说明 | 名称 | 描述 | | ------------------- | ------------------ | | CAPSULE_BACKGROUND | 位置按钮的背景样式为胶囊状。 | | CIRCLE_BACKGROUND | 位置按钮的背景样式为圆状。 | | NORMAL_BACKGROUND | 位置按钮的背景样式为矩形。 | ## SecLocationButtonLayoutOrder枚举说明 | 名称 | 描述 | | ------------------- | ------------------ | | ICON_FIRST | 图标的排列顺序先于文字。 | | TEXT_FIRST | 文字的排列顺序先于图标。 | ## SecLocationButtonLayoutDirection枚举说明 | 名称 | 描述 | | ------------------- | ------------------ | | HORIZONTAL | 位置按钮上图标和文字分布的方向为水平排列。 | | VERTICAL | 位置按钮上图标和文字分布的方向为垂直排列。 | ## SecLocationButtonOnClickResult枚举说明 | 名称 | 描述 | | ------------------- | ------------------ | | LOCATION_BUTTON_CLICK_SUCCESS | 位置按钮点击成功。 | | LOCATION_BUTTON_CLICK_GRANT_FAILED | 位置按钮点击后位置权限授权失败。 | ## 属性 不支持通用属性,仅支持以下属性: | 名称 | 参数类型 | 必填 | 描述 | | ----------- | ------ | ---- | ---------------------------------------- | | iconSize | [Length](ts-types.md#length) | 否 | 设置位置按钮上图标的尺寸。
默认值:16vp | | layoutDirection | [SecLocationButtonLayoutDirection](#seclocationbuttonlayoutdirection枚举说明) | 否 | 设置位置按钮上图标和文字分布的方向。
默认值:SecLocationButtonLayoutDirection.HORIZONTAL| | layoutOrder | [SecLocationButtonLayoutOrder](#seclocationbuttonlayoutorder枚举说明) | 否 | 设置位置按钮上图标和文字分布的顺序。
默认值:SecLocationButtonLayoutOrder.ICON_FIRST| | position | [Position](ts-types.md#position8) | 否 | 设置绝对定位,设置位置按钮的左上角相对于父容器左上角的偏移位置。
默认值:
{
x: 0,
y: 0
}| | markAnchor | [Position](ts-types.md#position8) | 否 | 设置绝对定位的锚点,以位置按钮的左上角作为基准点进行偏移。
默认值:
{
x: 0,
y: 0
}|| | offset | [Position](ts-types.md#position8) | 否 | 设置相对定位,位置按钮相对于自身的偏移量。
默认值:
{
x: 0,
y: 0
}|| | fontSize | [Length](ts-types.md#length) | 否 | 设置位置按钮上文字的尺寸。
默认值:16fp | | fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | 否 | 设置位置按钮上文字的样式。
默认值:FontStyle.Normal | | fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | 否 | 设置位置按钮上文字粗细。
默认值:FontWeight.Medium | | fontFamily | string \| [Resource](ts-types.md#resource类型) | 否 | 设置位置按钮上文字的字体。
默认字体:'HarmonyOS Sans' | | fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置位置按钮上文字的颜色。
默认值:#ffffffff | | iconColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置位置按钮上图标的颜色。
默认值:#ffffffff | | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置位置按钮的背景颜色。
默认值:#007dff | | borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 设置位置按钮的边框的样式。
默认不设置边框样式 | | borderWidth | [Length](ts-types.md#length) | 否 | 设置位置按钮的边框的宽度。
默认不设置边框宽度 | | borderColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置位置按钮的边框的颜色。
默认不设置边框颜色 | | borderRadius | [Length](ts-types.md#length) | 否 | 设置位置按钮的边框圆角半径。
默认值:1/2 按钮整高 | | backgroundPadding | [Padding](ts-types.md#padding) \| [Length](ts-types.md#length) | 否 | 设置位置按钮的内边距。
默认值:上下8vp, 左右24vp | | textIconPadding | [Length](ts-types.md#length) | 否 | 设置位置按钮中图标和文字的间距。
默认值:4vp | ## 事件 不支持通用事件,仅支持以下事件: | 名称 | 功能描述 | | ------------------------------------------------------------ | ------------------------------------------------------------ | | onClick((result: [SecLocationButtonOnClickResult](#seclocationbuttononclickresult枚举说明), event?: [ClickEvent](ts-universal-events-click.md#clickevent对象说明)) => void) | 点击动作触发该回调。
result:位置权限的授权结果。
event:见ClickEvent对象说明。 | ## 示例 ```ts // xxx.ets @Entry @Component struct Index { build() { Row() { Column({space:10}) { // 默认位置按钮 SecLocationButton() // 生成默认位置按钮,包含图标+文字+背景 SecLocationButton() .fontSize(35) .fontColor(Color.White) .iconSize(30) .layoutDirection(SecLocationButtonLayoutDirection.HORIZONTAL) .layoutOrder(SecLocationButtonLayoutOrder.TEXT_FIRST) .borderWidth(1) .borderStyle(BorderStyle.Dashed) .borderColor(Color.Blue) .borderRadius(20) .fontWeight(100) .iconColor(Color.White) .backgroundPadding({ left: 50, top: 50, bottom: 50, right: 50 }) .textIconPadding(20) .backgroundColor(0x3282f6) .onClick((result: SecLocationButtonOnClickResult) => { console.error("result " + result) }) // 生成定制图标、文字、背景的位置按钮 SecLocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_POSITION, background:BackgroundButtonType.NORMAL_BACKGROUND}) .fontSize(35) .fontColor(0x3282f6) .iconSize(30) .layoutDirection(SecLocationButtonLayoutDirection.VERTICAL) .layoutOrder(SecLocationButtonLayoutOrder.ICON_FIRST) .borderWidth(1) .borderStyle(BorderStyle.Dashed) .borderColor(0x9ffcfd) .borderRadius(20) .fontWeight(100) .iconColor(0x3282f6) .backgroundPadding({left:50, top:50, bottom:50, right:50}) .textIconPadding(20) .backgroundColor(0x9ffcfd) .onClick((result: SecLocationButtonOnClickResult)=>{ console.error("result " + result) }) }.width('100%') }.height('100%') } } ``` ![seclocatonbutton1](figures/seclocationbutton1.png)