![Cover image for [Daily Harmony Learnings on HarmonyOS Next] Font Size, Mirror Language Spacing, Disable Split Screen](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgzuq2c9mepasnoyo0w0f.png)
[Daily Harmony Learnings on HarmonyOS Next] Font Size, Mirror Language Spacing, Disable Split Screen, Router vs Navigation
1. How to modify font size without affecting in-app fonts, but have in-app fonts affected when modifying display size?
In app settings, there are options for Display Size and Font Size. To adjust the font size in settings without affecting in-app page fonts, while ensuring in-app fonts are affected by Display Size adjustments:
- The
vpunit is bound to Display Size, and thefpunit is bound to Font Size. Convert allfontSizeunits tovpso that modifying Font Size does not affect in-app fonts, but modifying Display Size does.
2. How to set left/right spacing for mirror languages?
In mirror languages (right-to-left display), the right and left spacing settings are not converted. How to set margin/padding for components in mirror languages?
- API 12 provides
LocalizedMarginandLocalizedPaddingfor margin/padding, which can be used to set different spacing for mirrored layouts.
3. How to disable split-screen mode?
Refer to the document https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/multi-window-support-V5#section2205081316 and set in module.json5:
"supportWindowMode": ["fullscreen"]
4. How to control the display hierarchy of CustomDialog?
When a CustomDialog is popped up on Page A and you navigate from Page A to Page B without closing the dialog, the dialog from Page A may appear above Page B. How to ensure Page B covers the dialog?
Solution via router navigation:
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%')// Adjust opacity as needed
.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%') // Set dialog width
}
}
}
Solution via 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 = '输入'
// Visibility control with no layout occupation
@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%')// Adjust opacity as needed
.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%') // Set dialog width
}
}.width('100%').margin({ top: 5 })
}.navDestination(this.PageMap)
}
}
5. How to use LocalStorage in Navigation?
For route-based pages, shared data can be bound via @Entry(storage). How to use LocalStorage with Navigation?
- A LocalStorage instance is shared only within an
@Entry-decorated component and its child components (one page). Use the@LocalStoragePropand@LocalStorageLinkdecorators to access state variables stored in the LocalStorage instance within UI components.- Specific API reference: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-localstorage-V5
- Simple scenarios for one-way synchronization with
@LocalStorageProp: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-localstorage-V5 - Simple scenarios for two-way synchronization with
@LocalStorageLink: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-localstorage-V5
Top comments (0)