底子ArkTS组件：导航栏组件（HarmonyOS学习第三课【3.8】） ...

火影  金牌会员 | 2025-1-4 19:31:06 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 997|帖子 997|积分 2991

Navigation

官方文献

Navigation 组件一般作为页面布局的根容器，它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。 Navigation 除了提供了默认的展示样式属性外，它还提供了 CustomBuilder 模式来自界说展示样式
阐明
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件

可以包罗子组件。从API Version 9开始，保举与NavRouter组件搭配利用。
接口

Navigation()
属性

除支持通用属性外，还支持以下属性：
  名称
  参数范例
  描述
  title
  string | CustomBuilder8+ | NavigationCommonTitle9+ | NavigationCustomTitle9+
  页面标题。
  subTitledeprecated
  string
  页面副标题。从API Version 9开始废弃，建议利用title代替。
  menus
  Array<NavigationMenuItem> | CustomBuilder8+
  页面右上角菜单。利用Array<NavigationMenuItem> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。
  titleMode
  NavigationTitleMode
  页面标题栏显示模式。
默认值：NavigationTitleMode.Free
  toolBar
  object | CustomBuilder8+
  设置工具栏内容。
items: 工具栏所有项。
阐明：
items均分底部工具栏，在每个均分内容区布局文本和图标，文本超长时，逐级缩小，缩小之后换行，末了...截断。
  hideToolBar
  boolean
  隐藏工具栏。
默认值：false
true: 隐藏工具栏。
false: 显示工具栏。
  hideTitleBar
  boolean
  隐藏标题栏。
默认值：false
true: 隐藏标题栏。
false: 显示标题栏。
  hideBackButton
  boolean
  隐藏返回键。不支持隐藏NavDestination组件标题栏中的返回图标。
默认值：false
true: 隐藏返回键。
false: 显示返回键。
阐明：
返回键仅针对titleMode为NavigationTitleMode.Mini时才生效。
  navBarWidth9+
  Length
  导航栏宽度。
默认值：200vp
单位：vp
阐明：
仅在Navigation组件分栏时生效。
  navBarPosition9+
  NavBarPosition
  导航栏位置。
默认值：NavBarPosition.Start
阐明：
仅在Navigation组件分栏时生效。
  mode9+
  NavigationMode
  导航栏的显示模式。
默认值：NavigationMode.Auto
自适应：基于组件宽度自适应单栏和双栏。
  backButtonIcon9+
  string | PixelMap | Resource
  设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。
  hideNavBar9+
  boolean
  是否显示导航栏（仅在mode为NavigationMode.Split时生效）。
  NavigationMenuItem范例阐明

  名称
  范例
  必填
  描述
  value
  string
  是
  菜单栏单个选项的显示文本。
  icon
  string
  否
  菜单栏单个选项的图标资源路径。
  action
  () => void
  否
  当前选项被选中的事件回调。
  object范例阐明

  名称
  范例
  必填
  描述
  value
  string
  是
  工具栏单个选项的显示文本。
  icon
  string
  否
  工具栏单个选项的图标资源路径。
  action
  () => void
  否
  当前选项被选中的事件回调。
  NavigationTitleMode摆列阐明

  名称
  描述
  Free
  当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则规复原样。
  Mini
  固定为小标题模式。
  Full
  固定为大标题模式。
  NavigationCommonTitle范例阐明

  名称
  范例
  必填
  描述
  main
  string
  是
  设置主标题。
  sub
  string
  是
  设置副标题。
  NavigationCustomTitle范例阐明

  名称
  范例
  必填
  描述
  builder
  CustomBuilder
  是
  设置标题栏内容。
  height
  TitleHeight | Length
  是
  设置标题栏高度。
  NavBarPosition摆列阐明

  名称
  描述
  Start
  双栏显示时，主列在主轴方向首部。
  End
  双栏显示时，主列在主轴方向尾部。
  NavigationMode摆列阐明

  名称
  描述
  Stack
  导航栏与内容区独立显示，相称于两个页面。
  Split
  导航栏与内容区分两栏显示。
  Auto
  窗口宽度>=520vp时，采用Split模式显示；窗口宽度<520vp时，采用Stack模式显示。
  TitleHeight摆列阐明

  名称
  描述
  MainOnly
  只有主标题时标题栏的保抬高度（56vp）。
  MainWithSub
  同时有主标题和副标题时标题栏的保抬高度（82vp）。
  阐明
目前可滚动组件只支持List。
事件

  名称
  功能描述
  onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void)
  当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。
  onNavBarStateChange(callback: (isVisible: boolean) => void)
  导航栏显示状态切换时触发该回调。返回值isVisible为true时表示显示，为false时表示隐藏。
  

 内容比较多我将用简单易懂的话来进行阐明，而且精粹此中内容。

Navigation界说介绍

  1. interface NavigationInterface {
  2.   (): NavigationAttribute;
  3. }
复制代码
Navigation 两种标题样式：

Mini模式

平凡型标题栏，用于一级页面不需要突出标题的场景。
Navigation 的界说不需要传递干系参数，我们先看下 Navigation 的最简单样例：
                                 

代码示例：
  1. @Entry
  2. @Component
  3. struct Index {
  5.   build() {
  6.     Navigation() {              // Navigation只能包含一个子组件
  7.       Text('title')
  8.         .textAlign(TextAlign.Center)
  9.         .fontSize(30)
  10.         .width('100%')
  11.         .height('100%')
  12.         .backgroundColor('#aabbcc')
  13.     }
  14.     .size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性
  15.     .titleMode(NavigationTitleMode.Mini)   //设置标题模式
  16.     .title('主标题')   
  17.   }
  18. }
复制代码
Full模式

夸大型标题栏，用于一级页面需要突出标题的场景

                             

 代码示例：
  1. @Entry
  2. @Component
  3. struct Index {
  5.   build() {
  6.     Navigation() {              // Navigation只能包含一个子组件
  7.       Text('title')
  8.         .textAlign(TextAlign.Center)
  9.         .fontSize(30)
  10.         .width('100%')
  11.         .height('100%')
  12.         .backgroundColor('#aabbcc')
  13.     }
  14.     .size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性
  15.     .titleMode(NavigationTitleMode.Full)   //设置标题模式
  16.     .title('主标题')   
  17.   }
  18. }
复制代码
Navigation属性介绍

  1. declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
  2.   title(value: string | CustomBuilder): NavigationAttribute;
  3.   subTitle(value: string): NavigationAttribute;
  4.   hideTitleBar(value: boolean): NavigationAttribute;
  5.   hideBackButton(value: boolean): NavigationAttribute;
  6.   titleMode(value: NavigationTitleMode): NavigationAttribute;
  7.   menus(value: Array<NavigationMenuItem> | CustomBuilder): NavigationAttribute;
  8.   toolBar(value: object | CustomBuilder): NavigationAttribute;
  9.   hideToolBar(value: boolean): NavigationAttribute;
  10.   onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute;
  11. }
复制代码
title：设置导航栏的标题

当参数范例为 string 时，可以直接设置标题，但样式不支修改；当参数为 CustomBuilder 时，可以自界说标题样式。


  • 参数范例为 string ，简单样例如下所示：
    1. @Entry
    2. @Component
    3. struct Index {
    5.   build() {
    6.     Navigation() {              // Navigation只能包含一个子组件
    7.       Text('title')
    8.         .textAlign(TextAlign.Center)
    9.         .fontSize(30)
    10.         .width('100%')
    11.         .height('100%')
    12.         .backgroundColor('#aabbcc')
    13.     }
    14.     .size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性
    15.     .titleMode(NavigationTitleMode.Full)//设置标题模式
    16.     .title('主标题')     //标题栏内容
    17.   }
    18. }
    复制代码
    样例运行效果如下图所示：                                                           
       
  • 参数范例为 CustomBuilder ，简单样例如下所示：
    1. @Entry
    2. @Component
    3. struct ComponentTest {
    4.   @Builder title() { // 通过Builder自定义标题栏，可以灵活的设置标题样式
    5.     Row() {
    6.       Text('Builder标题')
    7.         .fontSize(20)
    8.     }
    9.     .width('100%')
    10.     .height(55)
    11.     .backgroundColor(Color.Pink)
    12.   }
    14.   build() {
    15.     Navigation() {
    16.       Text('title')
    17.         .textAlign(TextAlign.Center)
    18.         .fontSize(30)
    19.         .size({ width: '100%', height: '100%' })
    20.         .backgroundColor('#aabbcc')
    21.     }
    22.     .size({ width: '100%', height: '100%' })
    23.     .title(this.title()) // 使用自定义的标题栏
    24.     .titleMode(NavigationTitleMode.Mini)//设置标题模式
    25.   }
    26. }
    复制代码
    样例运行效果如下图所示：

subTitle：设置页面的副标题



  • 简单样例如下所示：
    1. @Entry
    2. @Component
    3. struct ComponentTest {
    4.   @Builder title() { // 通过Builder自定义标题栏，可以灵活的设置标题样式
    5.     Row() {
    6.       Text('Builder标题')
    7.         .fontSize(20)
    8.     }
    9.     .width('100%')
    10.     .height(55)
    11.     .backgroundColor(Color.Pink)
    12.   }
    14.   build() {
    15.     Navigation() {
    16.       Text('title')
    17.         .textAlign(TextAlign.Center)
    18.         .fontSize(30)
    19.         .size({ width: '100%', height: '100%' })
    20.         .backgroundColor('#aabbcc')
    21.     }
    22.     .size({ width: '100%', height: '100%' })
    23.     .title(this.title()) // 使用自定义的标题栏
    24.     .subTitle("副标题")
    25.     .titleMode(NavigationTitleMode.Mini)//设置标题模式
    26.   }
    27. }
    复制代码
    样例运行效果如下图所示：

hideBackButton：是否隐藏返回按钮



  • 默认情况下不隐藏，简单样例如下所示：
    1. @Entry
    2. @Component
    3. struct ComponentTest {
    4.   @Builder title() { // 通过Builder自定义标题栏，可以灵活的设置标题样式
    5.     Row() {
    6.       Text('Builder标题')
    7.         .fontSize(20)
    8.     }
    9.     .width('100%')
    10.     .height(55)
    11.     .backgroundColor(Color.Pink)
    12.   }
    14.   build() {
    15.     Navigation() {
    16.       Text('title')
    17.         .textAlign(TextAlign.Center)
    18.         .fontSize(30)
    19.         .size({ width: '100%', height: '100%' })
    20.         .backgroundColor('#aabbcc')
    21.     }
    22.     .size({ width: '100%', height: '100%' })
    23.     .title(this.title()) // 使用自定义的标题栏
    24.     .subTitle("副标题")
    25.     .titleMode(NavigationTitleMode.Mini)//设置标题模式
    26.     .hideBackButton(true)
    27.   }
    28. }
    复制代码
    样例运行效果如下图所示：

toolBar：设置工具栏



  • 当参数范例为 object 时，可以直接设置工具栏选项，但样式不支修改；当参数为 CustomBuilder 时，可以自界说标题栏。

    • 当参数为 object 范例时，参数需要按照如下格式界说：

      • value：工具栏单个选项的显示文本。
      • icon：工具栏单个选项的图标资源路径。
      • action：当前选项被选中时的事件回调。


  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Navigation() {              // Navigation只能包含一个子组件
  6.       Text('title')
  7.         .textAlign(TextAlign.Center)
  8.         .fontSize(30)
  9.         .width('100%')
  10.         .height('100%')
  11.         .backgroundColor('#aabbcc')
  12.     }
  13.     .size({width: '100%', height: '100%'}) // Navigation只设置了size，没有设置任何其它属性
  14.     .titleMode(NavigationTitleMode.Mini)//设置标题模式
  15.     .title('主标题')     //标题栏内容
  16.     .toolBar({items:[
  17.       {value: "func", icon: "./icon/ic_public_community_messages.png", action: ()=>{}},
  18.       {value: "func", icon: "../../resources/base/media/icon.png", action: ()=>{}},
  19.       {value: "func", icon: $r("app.media.icon"), action: ()=>{}}]})
  20.   }
  21. }
复制代码

当参数为 CustomBuilder 范例

可以自界说样式，简单样例如下所示
  1. @Entry
  2. @Component
  3. struct ComponentTest {
  4.   @State index: number = 0; // 选项卡下标，默认为第一个
  6.   @Builder toolbar() { // 通过builder自定义toolbar
  7.     Row() {
  8.       Column() {
  9.         Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png')
  10.           .size({ width: 25, height: 25 })
  11.         Text('消息')
  12.           .fontSize(16)
  13.           .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b")
  14.       }
  15.       .alignItems(HorizontalAlign.Center)
  16.       .height('100%')
  17.       .layoutWeight(1)
  18.       .onClick(() => {
  19.         this.index = 0;
  20.       })
  22.       Column() {
  23.         Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png')
  24.           .size({ width: 25, height: 25 })
  25.         Text('联系人')
  26.           .fontSize(16)
  27.           .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b")
  28.       }
  29.       .alignItems(HorizontalAlign.Center)
  30.       .height('100%')
  31.       .layoutWeight(1)
  32.       .onClick(() => {
  33.         this.index = 1;
  34.       })
  36.       Column() {
  37.         Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png')
  38.           .size({ width: 25, height: 25 })
  39.         Text('动态')
  40.           .fontSize(16)
  41.           .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b")
  42.       }
  43.       .alignItems(HorizontalAlign.Center)
  44.       .height('100%')
  45.       .layoutWeight(1)
  46.       .onClick(() => {
  47.         this.index = 2;
  48.       })
  49.     }
  50.     .width('100%')
  51.     .height(60)
  52.   }
  54.   build() {
  55.     Navigation() {
  56.       Text(this.index == 0 ? "消息" : this.index == 1 ? "联系人" : "动态")
  57.         .textAlign(TextAlign.Center)
  58.         .fontSize(30)
  59.         .size({ width: '100%', height: '100%' })
  60.         .backgroundColor('#aabbcc')
  61.     }
  62.     .size({ width: '100%', height: '100%' })
  63.     .title("标题栏")
  64.     .toolBar(this.toolbar())
  65.   }
  66. }
复制代码

hideTitleBar、hideToolBar

设置是否显示或者隐藏标题栏、工具栏，简单样例如下所示：
  1. @Entry
  2. @Component
  3. struct ComponentTest {
  4.   @State index: number = 0;
  5.   @State hideToolBar: boolean = false;
  6.   @State hideTitleBar: boolean = false;
  8.   @Builder toolbar() {
  9.     Row() {
  10.       Column() {
  11.         Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png')
  12.           .size({ width: 25, height: 25 })
  13.         Text('消息')
  14.           .fontSize(16)
  15.           .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b")
  16.       }
  17.       .alignItems(HorizontalAlign.Center)
  18.       .height('100%')
  19.       .layoutWeight(1)
  20.       .onClick(() => {
  21.         this.index = 0;
  22.       })
  24.       Column() {
  25.         Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png')
  26.           .size({ width: 25, height: 25 })
  27.         Text('联系人')
  28.           .fontSize(16)
  29.           .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b")
  30.       }
  31.       .alignItems(HorizontalAlign.Center)
  32.       .height('100%')
  33.       .layoutWeight(1)
  34.       .onClick(() => {
  35.         this.index = 1;
  36.       })
  38.       Column() {
  39.         Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png')
  40.           .size({ width: 25, height: 25 })
  41.         Text('动态')
  42.           .fontSize(16)
  43.           .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b")
  44.       }
  45.       .alignItems(HorizontalAlign.Center)
  46.       .height('100%')
  47.       .layoutWeight(1)
  48.       .onClick(() => {
  49.         this.index = 2;
  50.       })
  51.     }
  52.     .width('100%')
  53.     .height(60)
  54.   }
  56.   build() {
  57.     Navigation() {
  58.       Column({ space: 10 }) {
  59.         Text(this.index == 0 ? "消息" : this.index == 1 ? "联系人" : "动态")
  60.           .textAlign(TextAlign.Center)
  61.           .fontSize(30)
  63.         Button(this.hideTitleBar ? "显示TitleBar" : "隐藏TitleBar")
  64.           .onClick(() => {
  65.             this.hideTitleBar = !this.hideTitleBar;
  66.           })
  69.         Button(this.hideToolBar ? "显示ToolBar" : "隐藏ToolBar")
  70.           .onClick(() => {
  71.             this.hideToolBar = !this.hideToolBar;
  72.           })
  73.       }
  74.       .backgroundColor('#aabbcc')
  75.       .size({ width: '100%', height: '100%' })
  76.     }
  77.     .size({ width: '100%', height: '100%' })
  78.     .title("标题栏")
  79.     .toolBar(this.toolbar())
  80.     .hideToolBar(this.hideToolBar)
  81.     .hideTitleBar(this.hideTitleBar)
  82.   }
  83. }
复制代码
 


设置菜单栏

菜单栏位于Navigation组件的右上角，开辟者可以通过menus属性进行设置。menus支持Array<NavigationMenuItem>和CustomBuilder两种参数范例。利用Array<NavigationMenuItem>范例时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。
menus：设置标题栏右上角的菜单项，当参数为 CustomBuilder 时可以自界说菜单项。


  • 当参数为 NavigationMenuItem 数组时，参数阐明如下：

    • value：菜单项的显示文本。
    • icon：菜单项的显示图标路径。
    • action：点击菜单项的事件回调。

简单样例如下所示：
  1. @Entry
  2. @Component
  3. struct ComponentTest {
  4.   @State index: number = 0;
  5.   @State hideToolBar: boolean = false;
  6.   @State hideTitleBar: boolean = false;
  8.   @Builder toolbar() {
  9.     Row() {
  10.       Column() {
  11.         Image(this.index == 0 ? 'pages/icon_message_selected.png' : 'pages/icon_message_normal.png')
  12.           .size({ width: 25, height: 25 })
  13.         Text('消息')
  14.           .fontSize(16)
  15.           .fontColor(this.index == 0 ? "#2a58d0" : "#6b6b6b")
  16.       }
  17.       .alignItems(HorizontalAlign.Center)
  18.       .height('100%')
  19.       .layoutWeight(1)
  20.       .onClick(() => {
  21.         this.index = 0;
  22.       })
  24.       Column() {
  25.         Image(this.index == 1 ? 'pages/icon_contract_selected.png' : 'pages/icon_contract_normal.png')
  26.           .size({ width: 25, height: 25 })
  27.         Text('联系人')
  28.           .fontSize(16)
  29.           .fontColor(this.index == 1 ? "#2a58d0" : "#6b6b6b")
  30.       }
  31.       .alignItems(HorizontalAlign.Center)
  32.       .height('100%')
  33.       .layoutWeight(1)
  34.       .onClick(() => {
  35.         this.index = 1;
  36.       })
  38.       Column() {
  39.         Image(this.index == 2 ? 'pages/icon_dynamic_selected.png' : 'pages/icon_dynamic_normal.png')
  40.           .size({ width: 25, height: 25 })
  41.         Text('动态')
  42.           .fontSize(16)
  43.           .fontColor(this.index == 2 ? "#2a58d0" : "#6b6b6b")
  44.       }
  45.       .alignItems(HorizontalAlign.Center)
  46.       .height('100%')
  47.       .layoutWeight(1)
  48.       .onClick(() => {
  49.         this.index = 2;
  50.       })
  51.     }
  52.     .width('100%')
  53.     .height(60)
  54.   }
  56.   build() {
  57.     Navigation() {
  58.       Column({ space: 10 }) {
  59.         Text(this.index == 0 ? "消息" : this.index == 1 ? "联系人" : "动态")
  60.           .textAlign(TextAlign.Center)
  61.           .fontSize(30)
  63.         Button(this.hideTitleBar ? "显示TitleBar" : "隐藏TitleBar")
  64.           .onClick(() => {
  65.             this.hideTitleBar = !this.hideTitleBar;
  66.           })
  69.         Button(this.hideToolBar ? "显示ToolBar" : "隐藏ToolBar")
  70.           .onClick(() => {
  71.             this.hideToolBar = !this.hideToolBar;
  72.           })
  73.       }
  74.       .backgroundColor('#aabbcc')
  75.       .size({ width: '100%', height: '100%' })
  76.     }
  77.     .size({ width: '100%', height: '100%' })
  78.     .title("标题栏")
  79.     .toolBar(this.toolbar())
  80.     .hideToolBar(this.hideToolBar)
  81.     .hideTitleBar(this.hideTitleBar)
  82.     .menus([
  83.       {
  84.         value: "搜索",
  85.         icon: "pages/icon_search.png",
  86.         action: () => {
  87.           Prompt.showToast({ message: "搜索" })
  88.         }
  89.       },
  90.       {
  91.         value: "扫码",
  92.         icon: "pages/icon_scan.png",
  93.         action: () => {
  94.           Prompt.showToast({ message: "扫码" })
  95.         }
  96.       }
  97.     ])
  98.   }
  99. }
复制代码


 
Navigation事件介绍

  1. declare class NavigationAttribute extends CommonMethod<NavigationAttribute> {
  2.   onTitleModeChange(callback: (titleMode: NavigationTitleMode) => void): NavigationAttribute;
  3. }
复制代码


  • onTitleModeChange：当 titleMode 为 NavigationTitleMode.Free 时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调

NavRouter

分享
添加收藏
导航组件，默认提供点击相应处置惩罚，不需要开辟者自界说点击事件逻辑。
阐明
该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件

必须包罗两个子组件，此中第二个子组件必须为NavDestination。
阐明
子组件个数非常时：

  • 有且仅有1个时，触发路由到NavDestination的能力失效。
  • 有且仅有1个时，且利用NavDestination场景下，不进行路由。
  • 大于2个时，后续的子组件不显示。
  • 第二个子组件不为NavDestination时，触发路由功能失效。
接口

NavRouter()
事件

  名称
  功能描述
  onStateChange(callback: (isActivated: boolean) => void)
  组件激活状态切换时触发该回调。返回值isActivated为true时表示激活，为false时表示未激活。
阐明：
开辟者点击激活NavRouter，加载对应的NavDestination子组件时，回调onStateChange(true)。NavRouter对应的NavDestination子组件不再显示时，回调onStateChange(false)。
  示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct NavRouterExample {
  5.   @State isActiveWLAN: boolean = false
  6.   @State isActiveBluetooth: boolean = false
  8.   build() {
  9.     Column() {
  10.       Navigation() {
  11.         NavRouter() {
  12.           Row() {
  13.             Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)
  14.             Text(`WLAN`)
  15.               .fontSize(22)
  16.               .fontWeight(500)
  17.               .textAlign(TextAlign.Center)
  18.           }
  19.           .width('90%')
  20.           .height(72)
  21.           NavDestination() {
  22.             Flex({ direction: FlexDirection.Row }) {
  23.               Text('未找到可用WLAN').fontSize(30).padding({ left: 15 })
  24.             }
  25.           }.hideTitleBar(false).backgroundColor('#0c182431')
  26.         }.backgroundColor(this.isActiveWLAN ? '#ccc' : '#fff')
  27.         .borderRadius(24)
  28.         .onStateChange((isActivated: boolean) => {
  29.           this.isActiveWLAN = isActivated
  30.         })
  32.         NavRouter() {
  33.           Row() {
  34.             Row().width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }).backgroundColor(Color.Pink)
  35.             Text(`蓝牙`)
  36.               .fontSize(22)
  37.               .fontWeight(500)
  38.               .textAlign(TextAlign.Center)
  39.           }
  40.           .width('90%')
  41.           .height(72)
  43.           NavDestination() {
  44.             Flex({ direction: FlexDirection.Row }) {
  45.               Text('未找到可用蓝牙').fontSize(30).padding({ left: 15 })
  46.             }
  47.           }.hideTitleBar(false).backgroundColor('#0c182431')
  48.         }.backgroundColor(this.isActiveBluetooth ? '#ccc' : '#fff')
  49.         .borderRadius(24)
  50.         .onStateChange((isActivated: boolean) => {
  51.           this.isActiveBluetooth = isActivated
  52.         })
  53.       }
  54.       .title('设置')
  55.       .titleMode(NavigationTitleMode.Free)
  56.       .mode(NavigationMode.Auto)
  57.       .hideTitleBar(false)
  58.       .hideToolBar(true)
  59.     }.height('100%')
  60.   }
  61. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

火影

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表