鸿蒙(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 = false
build() {
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%')
}
}
图例
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,文章来源:https://www.toymoban.com/news/detail-831412.html
谁敢横刀立马?
惟有点赞加关注大军。文章来源地址https://www.toymoban.com/news/detail-831412.html
到了这里,关于鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之NavRouter组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!