HarmonyOS 页面底部流出安全区域

import { BuilderNameConstants, RouterModule, RouterNameConstants } from '@ohos/routermodule/Index';
import { CommonUtils, NavbarView, ScaffoldStyleConstants } from '@ohos/scaffold/Index';
import { CommonInputStyle, CommonLineStyle, NextButtomStyle } from '../../commmon/LoginComponentStyle';
import StyleConstants from '../../commmon/constants/StyleConstants';
import { MatchInputFilterUtils } from '@ohos/common/Index';

// desc:找回账号step1-输入待找回手机号
RouterModule.registerBuilder(BuilderNameConstants.LOGIN_FIND_ACCOUNT_STEP1, wrapBuilder(harBuilder))

@Builder
export function harBuilder(value: object) {
  NavDestination() {
    Column() {
      NavbarView({ title: "找回账号", onBackClick: () => {
          RouterModule.pop()
        }
      })
      View()
    }.width('100%')
    .height('100%')
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
  .hideTitleBar(true)
  .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
}

@Entry
@Preview
@Component
export struct View {
  //待找回手机号
  @State phoneNumber: string = '';

  build() {
    Column() {
      //手机号输入框
      TextInput({ placeholder: $r('app.string.input_old_number'), text: "18583961321" })
        .attributeModifier(new CommonInputStyle(StyleConstants.INPUT_PHONE_LENGTH, InputType.Number, 64,
          TextAlign.Center))
        .onChange((value: string) => {
          this.phoneNumber = value;
        })
      //底部按钮
      Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.End }) {
        Column() {
          //分割线
          Line().attributeModifier(new CommonLineStyle());
          // FindAccountBottomView({callback:this.nextBtnClick});
          Button($r('app.string.next_step'), { type: ButtonType.Normal, stateEffect: true })
            .enabled(this.phoneNumber !== '')
            .attributeModifier(new NextButtomStyle())
            .onClick(() => {
              if (!MatchInputFilterUtils.photoMatch(this.phoneNumber)) {
                CommonUtils.showToastContent($r('app.string.phone_number_error'));
                return
              }
              RouterModule.pushRouter({
                builderName: BuilderNameConstants.LOGIN_FIND_ACCOUNT_STEP2,
                param: Object({
                  phoneNumber: this.phoneNumber,
                })
              })
            })
        }
      }.layoutWeight(1)
    }.backgroundColor($r('app.color.scaffold_fg_light'))
    .width(ScaffoldStyleConstants.FULL_PARENT)
    .height(ScaffoldStyleConstants.FULL_PARENT)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.