当前位置：首页 > article >正文

【每日学点鸿蒙知识】字体大小，镜像语言间距、禁止分屏、Router与Navigation

article 2025/1/7 23:05:08

1、如何实现修改字体大小，APP内的字体不受影响。修改显示大小，这个时候APP内的字体受影响？

应用设置里面有显示大小和字体大小，想要调整设置里面字体的大小，但是APP内页面字体不受设置里面字体大小档位的影响，当调整设置里面显示大小的档位时，APP内页面字体受影响。

vp单位跟显示大小绑定，fp单位跟字体大小绑定，可将fontSize单位全部转化为vp单位，此时修改字体大小，APP内的字体不受影响。修改显示大小，这个时候APP内的字体受影响。

2、如何设置镜像语言的左右间距？

镜像语言下从右至左展示，但设置的间距right和left没有转换，如何设置镜像语言下，组件外部给的样式属性margin,padding？

API12margin,padding提供外边距类型 LocalizedMargin和 LocalizedPadding，可用于设置不同外边距和内边距。

3、如何能够设置禁止分屏？

可以参考文档https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/multi-window-support-V5#section2205081316，设置module.json5:“supportWindowMode”: [“fullscreen”]。

4、如何控制CustomDialog显示层级？

A页面弹窗一个CustomDialog，若Dialog未关闭时从A页面跳转到B页面，此时会发现在A页面弹出的Dialog会出现在B页面的层级上方，有什么方式可以让B页面盖住Dialog？

可以通过router跳转：

import router from '@ohos.router';

@CustomDialog
export default struct UserPrivacyDialog {
  controller: CustomDialogController = new CustomDialogController({ builder: '' });
  cancel: Function = () => {
  };
  confirm: Function = () => {
  };
  visible: Visibility = Visibility.None

  build() {
    Column() {
      Button('jump')
        .onClick(() => {
          router.pushUrl({
            url: 'pages/PageTwo'
          })
        }).backgroundColor(0xffffff).fontColor(Color.Red)
    }
    .margin({ top: 22 })
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

@Entry
@Component
struct Index {
  @State textValue: string = 'Hello World'
  @State visible: Visibility = Visibility.None

  build() {
    Stack() {
      Row() {
        Column() {
          Button('click')
            .onClick(() => {
              if (this.visible == Visibility.Visible) {
                this.visible = Visibility.None
              } else {
                this.visible = Visibility.Visible
              }
            })
            .backgroundColor(0x777474)
            .fontColor(0x000000)
        }
        .width('100%')
      }
      .height('100%')
      .backgroundColor(0x885555)

      Text('')
        .onClick(() => {
          if (this.visible == Visibility.Visible) {
            this.visible = Visibility.None
          } else {
            this.visible = Visibility.Visible
          }
        })
        .width('100%')
        .height('100%')// 透明度可以自己调节一下
        .opacity(0.16)
        .backgroundColor(0x000000)
        .visibility(this.visible)

      Column() {
        GridRow({
          columns: {
            xs: 1,
            sm: 4,
            md: 8,
            lg: 12
          },
          breakpoints: {
            value: ["400vp", "600vp", "800vp"],
            reference: BreakpointsReference.WindowSize
          },
        }) {
          GridCol({
            span: {
              xs: 1,
              sm: 2,
              md: 4,
              lg: 8
            },
            offset: {
              xs: 0,
              sm: 1,
              md: 2,
              lg: 2
            }
          }) {
            Column() {
              Flex({ justifyContent: FlexAlign.SpaceAround }) {
                UserPrivacyDialog();
              }.margin({ bottom: 10 })
            }
            .backgroundColor(0xffffff)
            .visibility(this.visible)
            .clip(true)
            .borderRadius(20)
          }
        }
      }.width('95%') //设置弹窗宽度
    }
  }
}

或者navigation方式跳转：

import promptAction from '@ohos.promptAction';

@Component
export struct Test1 {
  @State message: string = 'Hello World';

  build() {
    NavDestination() {
      Row() {
        Column() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
        }
        .width('100%')
      }
      .height('100%')
    }.onBackPressed(() => {
      promptAction.showToast({ message: '123' })
      return false
    })
  }
}

@Entry
@Component
struct Index {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack()
  @State textValue: string = '输入'
  // 显隐控制设置为不占用
  @State visible: Visibility = Visibility.None

  @Builder
  PageMap(name: string) {
    if (name === 'pageOne') {
      Test1()
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column() {
        Stack() {
          Row() {
            Column() {
              Text('我是第一个页面')
                .fontSize(30)
                .fontWeight(FontWeight.Bold)
              Button('按钮')
                .onClick(() => {
                  console.log("hit me!")
                  if (this.visible == Visibility.Visible) {
                    this.visible = Visibility.None
                  } else {
                    this.visible = Visibility.Visible
                  }
                })
                .backgroundColor(0x777474)
                .fontColor(0x000000)
            }
            .height('100%')
            .width('100%')
            .justifyContent(FlexAlign.Start)
            .alignItems(HorizontalAlign.Center)
          }
          .height('100%')
          .backgroundColor('#FFF')

          Text('')
            .onClick(() => {
              if (this.visible == Visibility.Visible) {
                this.visible = Visibility.None
              } else {
                this.visible = Visibility.Visible
              }
            })
            .width('100%')
            .height('100%')// 透明度可以自己调节一下
            .opacity(0.5)
            .backgroundColor(Color.Black)
            .visibility(this.visible)
          Column() {
            GridRow({
              columns: {
                xs: 1,
                sm: 4,
                md: 8,
                lg: 12
              },
              breakpoints: {
                value: ["400vp", "600vp", "800vp"],
                reference: BreakpointsReference.WindowSize
              },
            }) {
              GridCol({
                span: {
                  xs: 1,
                  sm: 2,
                  md: 4,
                  lg: 8
                },
                offset: {
                  xs: 0,
                  sm: 1,
                  md: 2,
                  lg: 2
                }
              }) {
                Column() {
                  Text('安全隐私').fontSize(20).margin({ top: 10, bottom: 10 })
                  Text('是否跳转到隐私详情页面?').fontSize(16).margin({ bottom: 10 })
                  Flex({ justifyContent: FlexAlign.SpaceAround }) {
                    Button('取消')
                      .onClick(() => {
                        if (this.visible == Visibility.Visible) {
                          this.visible = Visibility.None
                        } else {
                          this.visible = Visibility.Visible
                        }

                      }).backgroundColor(0xffffff).fontColor(Color.Black)
                    Button('确定')
                      .onClick(() => {
                        this.pageInfos.pushPath({ name: 'pageOne' })
                      }).backgroundColor(0xffffff).fontColor(Color.Red)
                  }.margin({ bottom: 10 })
                }
                .backgroundColor(0xffffff)
                .visibility(this.visible)
                .clip(true)
                .borderRadius(20)
              }
            }
          }.width('100%') //设置弹窗宽度
        }
      }.width('100%').margin({ top: 5 })
    }.navDestination(this.PageMap)
  }
}

5、如何在Navigation中使用LocalStorage？

如果是route的页面可以通过@Entry(storage)绑定共享数据，如果导航切换到Navigation应该怎么使用？

LocalStorage的实例仅仅在一个@Entry装饰的组件和其所属的子组件（一个页面）中共享可以借助LocalStorage相关的两个装饰器@LocalStorageProp和@LocalStorageLink，在UI组件内部获取到LocalStorage实例中存储的状态变量。

具体API参考指南如下：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-localstorage-V5
localstorageprop和localstorage单向同步的简单场景：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-localstorage-V5
localstoragelink和localstorage双向同步的简单场景：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-localstorage-V5

查看全文

http://www.kler.cn/a/470745.html