NavDestination

<NavDestination> is the root container of a destination page and represents the content area of the <Navigation> component.

NOTE

This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.

Since API version 11, this component supports the safe area attribute by default, with the default attribute value being expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])). You can override this attribute to change the default behavior. In earlier versions, you need to use the expandSafeArea attribute to implement the safe area feature.

Child Components

Supported types of child components: built-in components and custom components, with support for (if/else, ForEach, and LazyForEach) rendering control.

Number of child components: multiple.

APIs

NavDestination()

Attributes

In addition to the backgroundColor attribute, the following attributes are supported.

Name	Type	Description
title	string \| CustomBuilder \| NavigationCommonTitle \| NavigationCustomTitle	Page title. NOTE When the NavigationCustomTitle type is used to set the height, the titleMode attribute does not take effect. When the title string is too long: (1) If no subtitle is set, the string is scaled down, wrapped in two lines, and then clipped with an ellipsis (...). (2) If a subtitle is set, the subtitle is scaled down and then clipped with an ellipsis (...).
hideTitleBar	boolean	Whether to hide the title bar. Default value: false true: Hide the title bar. false: Display the title bar.
mode¹¹⁺	NavDestinationMode	Mode of the navigation destination page. Default value: NavDestinationMode.STANDARD
backButtonIcon¹¹⁺	ResourceStr \| PixelMap	Icon of the back button on the title bar.

NavDestinationMode¹¹⁺

Name	Description
STANDARD	Standard mode, where the lifecycle of the navigation destination page changes with the standard destination in the NavPathStack.
DIALOG	Dialog mode, where the navigation destination page is transparent by default, and the lifecycle of other navigation destination pages is not affected.

Events

In addition to the universal events, the following events are supported.

Name	Description
onShown(callback: () => void)¹⁰⁺	Called when the navigation destination page is displayed.
onHidden(callback: () => void)¹⁰⁺	Called when the navigation destination page is hidden.
onBackPressed(callback: () => boolean)¹⁰⁺	Called when the back button is pressed. This callback takes effect when there is one or more entries in the navigation stack bound to the <Navigation> component. The value true means that the back button logic is overridden, and false means that the previous page is displayed.

Example

For details, see Example in Navrouter.