• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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>设置expandSafeArea属性进行组件绘制扩展时，组件不能设置固定宽高尺寸（百分比除外）。
18>
19>安全区域不会限制内部组件的布局和大小，不会裁剪内部组件。
20
21## 示例
22
23### 示例1
24
25```
26// xxx.ets
27@Entry
28@Component
29struct SafeAreaExample1 {
30  @State text: string = ''
31  controller: TextInputController = new TextInputController()
32
33  build() {
34    Row() {
35        Column()
36          .height('100%').width('100%')
37          .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover)
38          .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
39    }.height('100%')
40  }
41}
42```
43
44![expandSafeArea1](figures/expandSafeArea1.png)
45
46### 示例2
47
48```
49@Entry
50@Component
51struct SafeAreaExample {
52  @State text: string = ''
53  controller: TextInputController = new TextInputController()
54
55  build() {
56    Row() {
57      Stack() {
58        Column()
59          .height('100%').width('100%')
60          .backgroundImage($r('app.media.bg')).backgroundImageSize(ImageSize.Cover)
61          .expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM])
62        Column() {
63          Button('Set caretPosition 1')
64            .onClick(() => {
65              this.controller.caretPosition(1)
66            })
67          TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
68            .placeholderFont({ size: 14, weight: 400 })
69            .width(320).height(40).offset({y: 120})
70            .fontSize(14).fontColor(Color.Black)
71            .backgroundColor(Color.White)
72        }.width('100%').alignItems(HorizontalAlign.Center)
73      }
74    }.height('100%')
75  }
76}
77```
78
79![expandSafeArea2](figures/expandSafeArea2.png)
80