1# 安全区域 2 3通过expandSafeArea属性支持组件扩展其安全区域。 4 5> **说明：** 6> 7> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 属性 10 11| 名称 | 参数 | 参数描述 | 12| -------------- | ----------------------------- | --------------------------------------- | 13| expandSafeArea | type?: Array <[SafeAreaType](ts-types.md#safeareatype10)>,<br />edges?: Array <[SafeAreaEdge](ts-types.md#safeareaedge10)> | 控制组件扩展其安全区域。<br />默认值: <br />type: [SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD],<br />edges: [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END]<br />扩展至所有非安全区域。<br />type: 非必填，配置扩展安全区域的类型。<br />edges: 非必填，配置扩展安全区域的方向。 | 14 15## 示例 16 17### 示例1 18 19``` 20// xxx.ets 21@Entry 22@Component 23struct SafeAreaExample1 { 24 @State text: string = '' 25 controller: TextInputController = new TextInputController() 26 27 build() { 28 Row() { 29 Column() 30 .height('100%').width('100%') 31 .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover) 32 .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) 33 }.height('100%') 34 } 35} 36``` 37 38 39 40### 示例2 41 42``` 43@Entry 44@Component 45struct SafeAreaExample { 46 @State text: string = '' 47 controller: TextInputController = new TextInputController() 48 49 build() { 50 Row() { 51 Stack() { 52 Column() 53 .height('100%').width('100%') 54 .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover) 55 .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM]) 56 Column() { 57 Button('Set caretPosition 1') 58 .onClick(() => { 59 this.controller.caretPosition(1) 60 }) 61 TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller }) 62 .placeholderFont({ size: 14, weight: 400 }) 63 .width(320).height(40).offset({y: 120}) 64 .fontSize(14).fontColor(Color.Black) 65 .backgroundColor(Color.White) 66 }.width('100%').alignItems(HorizontalAlign.Center) 67 } 68 }.height('100%') 69 } 70} 71``` 72 73 74
