• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Safe Area
2
3A safe area refers to the display area that isn't covered by a status bar, navigation bar, or other components that the system includes in its non-safe-area. By default, all the content you develop is placed in the safe area. If necessary, you can expand a component's safe area through the **expandSafeArea attribute** – without changing the layout.
4
5> **NOTE**
6>
7> This attribute is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Attributes
10
11| Name          | Parameter                          | Description                               |
12| -------------- | ----------------------------- | --------------------------------------- |
13| expandSafeArea | type?: Array <[SafeAreaType](ts-types.md#safeareatype10)>,<br>edges?: Array <[SafeAreaEdge](ts-types.md#safeareaedge10)> | Sets the safe area to be expanded to.<br>Default value:<br>type: [SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD],<br>edges: [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM, SafeAreaEdge.START, SafeAreaEdge.END]<br>The default value expands the safe area to all available areas.<br>**type**: type of the expanded safe zone. This parameter is optional.<br>**edges**: edge for expanding the safe area. This parameter is optional.|
14
15>  **NOTE**
16>
17>To set the **expandSafeArea** attribute for a component, this component cannot have its width and height fixed (except to a percentage).
18>
19>The safe area does not restrict the layout or size of components inside, nor does it clip the components.
20
21## Example
22
23### Example 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### Example 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