• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 如何实现抽屉式导航
2
3## 场景介绍
4由于用户所需功能逐渐增多，传统的标签式导航在个别场景已经无法满足用户需求。当导航栏的空间放不下过多页签时，可以采用抽屉式导航，本例将为大家介绍如何通过SideBarContainer组件实现抽屉式导航。
5
6## 效果呈现
7本例最终实现效果如下：
8
9![navigation-drawer](figures/navigation-drawer.gif)
10
11## 运行环境
12- IDE：DevEco Studio 3.1 Beta1
13- SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
14
15## 实现思路
16- 通过SideBarContainer组件提供容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。
17- 调用showSideBar属性来设置不显示侧边栏，controlButton属性来控制完成侧栏的展示/收起。
18
19![](figures/navigation-drawer1.PNG)![](figures/navigation-drawer2.png)
20
21## 开发步骤
221. 创建内容区域文本组件。
23首先创建内容区，具体代码块如下：
24    ```ts
25    ...
26    //  内容区
27    Column() {
28      Text("内容区域")
29        .width("100%")
30        .height("100%")
31        .fontSize(30)
32        .textAlign(TextAlign.Center)
33    }
34    .width("100%")
35    .height("100%")
36    .backgroundColor("#bbaacc")
37    ...
38    ```
392. 通过SideBarContainer所支持的showSideBar属性来设置不显示侧边栏，controlButton属性来控制完成侧栏的展示/收起。
40具体代码块如下：
41    ```ts
42    ...
43    .showSideBar(false) //默认不展示侧边栏，展示icon，用户点击调出
44    .controlButton({
45      left: 10, // 图标距离左侧宽度
46      top: 20, // 图标距离顶部高度
47      height: 30, // 图标高度
48      width: 30, //  图标宽度
49      icons: {
50        shown: $r('app.media.back'), // 侧边栏展示时图标
51        hidden: $r('app.media.sidebar_shown'), // 侧边栏收起时图标
52        switching: $r('app.media.sidebar_shown') // 侧边栏切换过程图标
53      }
54    })
55    ...
56    ```
573. 创建侧边栏文本组件。
58具体代码如下：
59
60    ```ts
61    ...
62    struct SideBarContainerExample {
63    @ State navList: Array<string> = ["我的会员", "我的收藏", "我的相册", "我的文件",]
64      build() {
65        SideBarContainer(SideBarContainerType.Embed) {
66        //  侧边栏内容
67          Column() {
68            ForEach(this.navList, (item) => {
69              Text(item)
70                .width("100%")
71                .fontSize(20)
72                .textAlign(TextAlign.Start)
73                .padding({ top: 20 })
74            })
75          }
76        .height("100%")
77        .padding({ top: 60, left: 50 })
78        .backgroundColor("#aabbcc")
79        }
80    ...
81      }
82    }
83    ```
84## 完整代码
85示例完整代码如下：
86
87```ts
88@Entry
89@Component
90struct SideBarContainerExample {
91  @State navList: Array<string> = ["我的会员", "我的收藏", "我的相册", "我的文件",]
92
93  build() {
94    // Embed:侧边栏占据内容空间 Overlay：侧边栏悬浮于内容之上
95    SideBarContainer(SideBarContainerType.Embed) {
96      // 侧边栏内容
97      Column() {
98        ForEach(this.navList, (item) => {
99          Text(item)
100            .width("100%")
101            .fontSize(20)
102            .textAlign(TextAlign.Start)
103            .padding({ top: 20 })
104        })
105      }
106      .height("100%")
107      .padding({ top: 60, left: 50 })
108      .backgroundColor("#aabbcc")
109      // 内容区
110      Column() {
111        Text("内容区域")
112          .width("100%")
113          .height("100%")
114          .fontSize(30)
115          .textAlign(TextAlign.Center)
116      }
117      .width("100%")
118      .height("100%")
119      .backgroundColor("#bbaacc")
120    }
121    // 默认不展示侧边栏，展示icon，用户点击调出
122    .showSideBar(false)
123    .controlButton({
124      // 图标距离左侧宽度
125      left: 10,
126      // 图标距离顶部高度
127      top: 20,
128      // 图标高度
129      height: 30,
130      // 图标宽度
131      width: 30,
132      icons: {
133        // 侧边栏展示时图标
134        shown: $r('app.media.back'),
135        // 侧边栏收起时图标
136        hidden: $r('app.media.sidebar_shown'),
137        // 侧边栏切换过程图标
138        switching: $r('app.media.sidebar_shown')
139      }
140    })
141    // 侧边栏宽度
142    .sideBarWidth(200)
143    .width('100%')
144    .height('100%')
145  }
146}
147
148```
149**注意**：模拟机与真机的预览有区别，在SideBarContainerType.Embed情况下，真机中内容区域是压缩，模拟器中内容区域是缺失。
150
151## 总结
152
153[Tabs组件](../application-dev/reference/apis-arkui/arkui-ts/ts-container-tabs.md)： 适用于导航栏固定在页面上下左右侧，入口分类数目不多，可以控制在5个以内，且用户需要频繁切换每一个页签的应用，比如微信、QQ等。
154
155[Navigation组件](../application-dev/reference/apis-arkui/arkui-ts/ts-basic-components-navigation.md)： 同样可以实现Tabs组件中导航栏位于底部的场景，根据需要显示隐藏导航栏，提供标题，菜单，返回等选项，使用户是使用时更加灵活。
156
157[sideBarContainer组件](../application-dev/reference/apis-arkui/arkui-ts/ts-container-sidebarcontainer.md)：主要的功能和内容都在一个页面里面，只是一些低频操作内容需要显示在其他页面里，可以把这些辅助功能放在抽屉栏里。屏幕较小时导航栏不占用空间。比如QQ，开发指导文档等。
158
159
160