IT评测·应用市场-qidao123.com

标题: 底子ArkTS组件：导航栏组件（HarmonyOS学习第三课【3.8】） [打印本页]

---

作者: 火影    时间: 2025-1-4 19:31
标题: 底子ArkTS组件：导航栏组件（HarmonyOS学习第三课【3.8】）
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企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4