[Daily HarmonyOS Next Knowledge] Dialog and Navigation Conflicts, Rich Text, Font Size, List Refresh, Wrapping Text with Scroll
1. HarmonyOS CustomDialogController conflicts with Navigation?
When the app starts for the first time, a privacy policy dialog is displayed using CustomDialogController on the splash screen. Clicking 《User Agreement》/《Privacy Policy》 in the dialog navigates to a Web page containing the full policy text via Navigation. However, when navigating to the next page, the custom dialog remains on top of the new page instead of hiding with the splash screen. How can I make the custom dialog's visibility consistent with the current page?
To show a dialog at the Component level, use a Stack to control the visibility of the privacy dialog.
Refer to the following code:
@State privacyShow: boolean = true;
build() {
Navigation(this.appPathStack) {
Column() {
Stack() {
Text('Splash Page')
.fontSize(50)
.fontWeight(FontWeight.Bold);
if (this.privacyShow) {
Column() {}
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
.opacity(0.1);
PrivacyDialog({
onPrivacyClick: async () => {
this.appPathStack.pushPath({
name: 'privacy',
});
},
onAgreementClick: async () => {
this.appPathStack.pushPath({
name: 'privacy',
});
},
onAgree: () => {
this.privacyShow = false;
},
onRefuse: () => {
this.exitApp();
},
});
} else {
// ...
}
}
}
.width('100%');
}
.hideTitleBar(true)
.navDestination(this.appRouter)
.mode(NavigationMode.Stack);
}
2. HarmonyOS HTML text tag parser?
The RichText component parses and displays HTML-formatted text:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-richtext-V5
The RichEditor component supports图文混排 (text-image mixing) and interactive text editing:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-richeditor-V5
3. How to set font sizes within a HarmonyOS app?
- For setting font sizes of components: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-text-style-V5
- For pixel unit conversions: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-pixel-units-V5#像素单位转换
- Use the fp unit for multi-device adaptation (but it inherits system font scale). Use px to avoid system scaling.
4. If I replace all data in a HarmonyOS list at once, does it perform differential updates based on IDs?
If the visible items change from 1234567
to 1395867
, will only the differences (2345 → 3958
) be updated?
Yes. The list checks item IDs:
- Items with unchanged IDs are not updated.
- Items with changed IDs are recreated.
5. How to align Text to the top in a HarmonyOS Scroll container?
By default, text centers vertically in a Scroll container. How to align it to the top?
Original code:
build() {
Scroll() {
Text('热 情 · 礼 貌 · 敬 业')
.fontSize($r('app.float.size_14'))
.fontColor($r('app.color.color_C9C9C9'))
.margin({
top: $r('app.float.size_4'),
});
}
.width('100%')
.height('100%');
}
Solution: Add .align(Alignment.Top)
to the Scroll container:
build() {
Scroll() {
Text('热 情 · 礼 貌 · 敬 业')
.fontSize('14fp')
.fontColor(Color.Red)
.margin({
top: '4vp',
});
}
.width('100%')
.height('100%')
.align(Alignment.Top); // Add this line
}
Top comments (0)