DEV Community

Cover image for Custom Layout, Content Exceeding Bottom Navigation Bar, Bottom O超出 Screen Not Displaying
kouwei qing
kouwei qing

Posted on

Custom Layout, Content Exceeding Bottom Navigation Bar, Bottom O超出 Screen Not Displaying

【Daily HarmonyOS Next Knowledge】Custom Layout, Content Exceeding Bottom Navigation Bar, Bottom O超出 Screen Not Displaying, Obtaining Open Page List, Refresh Component

1. When is the onPlaceChildren of HarmonyOS custom layout redrawn?

When using a @prop data in the onPlaceChildren of a custom layout, modifying this @prop data does not trigger a re-invocation of onPlaceChildren, meaning the layout does not update. How to handle this?

The OnPlaceChildren method is called only when the component is refreshed. The component triggers a refresh only when the @State variable used in its rendering changes.

2. How to make content exceed the bottom navigation bar in HarmonyOS?

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5

The safe area refers to the page's display area, which by default does not overlap with system-set non-safe areas such as the status bar and navigation bar. By default, interfaces developed by developers are laid out within the safe area. Attributes and methods are provided to allow developers to set components to break through the safe area restrictions:

  • The expandSafeArea attribute supports components to extend their drawing area beyond the safe area without changing the layout.
  • The setKeyboardAvoidMode can be configured to define how the page avoids the virtual keyboard when it pops up.
  • When text elements like the title bar should not overlap with non-safe areas, it is recommended to set the expandSafeArea attribute for components to achieve an immersive effect. Alternatively, the immersive effect can be directly enabled via the window interface setWindowLayoutFullScreen.

3. How to solve the problem that the bottom of a HarmonyOS list is out of the screen and not visible?

Setting the layout of the list to fill the remaining height can solve this issue.

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/faqs/faqs-arkui-component.md#%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3%E5%88%97%E8%A1%A8%E7%BB%84%E4%BB%B6list%E5%9C%A8%E4%B8%8D%E8%AE%BE%E7%BD%AE%E9%AB%98%E5%BA%A6%E7%9A%84%E6%83%85%E5%86%B5%E4%B8%8B%E4%BC%9A%E5%87%BA%E7%8E%B0%E6%BB%91%E5%8A%A8%E4%B8%8D%E5%88%B0%E5%BA%95%E7%9A%84%E9%97%AE%E9%A2%98api-10

When the List does not have a height set, if the total height of its child components exceeds the height of the List's parent component, the List will adopt the parent component's height. If the List has other sibling nodes, it may be pushed out of the parent component's display area, making it appear that the bottom cannot be scrolled to.

Solution: Set the layoutWeight(1) attribute for the List component to allocate all remaining space to it.

4. How to obtain the list of opened pages in the navigation stack in HarmonyOS?

It is recommended to use Navigation for page jumping, as Navigation contains interfaces related to the page stack.

Using Navigation routing provides interfaces to obtain page information in the page stack.

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5

5. How to implement a bottom pull-up component effect similar to the Refresh component in HarmonyOS?

It is found that there is a pull-down component (Refresh), but no bottom pull-up component. Implementing it via scroll calculation and ordinary views often results in unsmooth effects.

Recommendation: Refer to or directly use the @ohos/pulltorefresh component to achieve pull-down/pull-up effects.

Component library: https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Fpulltorefresh

Gitee: https://gitee.com/openharmony-sig/ohos_pull_to_refresh

Top comments (0)