鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之NavRouter组件
一、操作环境
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+
二、NavRouter组件
导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。
子组件
必须包含两个子组件，其中第二个子组件必须为NavDestination。
接口
NavRouter()
事件
| 名称 | 功能描述 |
|---|---|
| onStateChange(callback: (isActivated: boolean) => void) | 组件激活状态切换时触发该回调。返回值isActivated为true时表示激活，为false时表示未激活。 说明： 开发者点击激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)。NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。 |
三、示例
代码
// xxx.ets
@Entry
@Component
struct NavRouterExample {@State isActiveWLAN: boolean = false@State isActiveBluetooth: boolean = falsebuild() {Column() {Navigation() {NavRouter() {Row() {Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)Text(`WLAN`).fontSize(22).fontWeight(500).textAlign(TextAlign.Center)}.width('90%').height(72)NavDestination() {Flex({ direction: FlexDirection.Row }) {Text('未找到可用WLAN').fontSize(30).padding({ left: 15 })}}.hideTitleBar(false).backgroundColor('#0c182431')}.backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff').borderRadius(24).onStateChange((isActivated: boolean) => {this.isActiveWLAN = isActivated})NavRouter() {Row() {Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)Text(`蓝牙`).fontSize(22).fontWeight(500).textAlign(TextAlign.Center)}.width('90%').height(72)NavDestination() {Flex({ direction: FlexDirection.Row }) {Text('未找到可用蓝牙').fontSize(30).padding({ left: 15 })}}.hideTitleBar(false).backgroundColor('#0c182431')}.backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff').borderRadius(24).onStateChange((isActivated: boolean) => {this.isActiveBluetooth = isActivated})}.title('设置').titleMode(NavigationTitleMode.Free).mode(NavigationMode.Auto).hideTitleBar(false).hideToolBar(true)}.height('100%')}
}图例
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马？
惟有点赞加关注大军。
