如何實(shí)現(xiàn)抽屜式導(dǎo)航（ArkUI）
想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：
場(chǎng)景介紹
由于用戶所需功能逐漸增多，傳統(tǒng)的標(biāo)簽式導(dǎo)航在個(gè)別場(chǎng)景已經(jīng)無(wú)法滿足用戶需求。當(dāng)導(dǎo)航欄的空間放不下過(guò)多頁(yè)簽時(shí)，可以采用抽屜式導(dǎo)航，本例將為大家介紹如何通過(guò)SideBarContainer組件實(shí)現(xiàn)抽屜式導(dǎo)航。
效果呈現(xiàn)
本例最終實(shí)現(xiàn)效果如下：
運(yùn)行環(huán)境
- IDE：DevEco Studio 3.1 Beta1
- SDK：Ohos_sdk_public 3.2.11.9 (API Version 9 Release)
實(shí)現(xiàn)思路
- 通過(guò)SideBarContainer組件提供容器，通過(guò)子組件定義側(cè)邊欄和內(nèi)容區(qū)，第一個(gè)子組件表示側(cè)邊欄，第二個(gè)子組件表示內(nèi)容區(qū)。
- 調(diào)用showSideBar屬性來(lái)設(shè)置不顯示側(cè)邊欄，controlButton屬性來(lái)控制完成側(cè)欄的展示/收起。
開(kāi)發(fā)步驟
創(chuàng)建內(nèi)容區(qū)域文本組件。
首先創(chuàng)建內(nèi)容區(qū)，具體代碼塊如下：
...
// 內(nèi)容區(qū)
Column() {
Text("內(nèi)容區(qū)域")
.width("100%")
.height("100%")
.fontSize(30)
.textAlign(TextAlign.Center)
}
.width("100%")
.height("100%")
.backgroundColor("#bbaacc")
...通過(guò)SideBarContainer所支持的showSideBar屬性來(lái)設(shè)置不顯示側(cè)邊欄，controlButton屬性來(lái)控制完成側(cè)欄的展示/收起。
具體代碼塊如下：
...
.showSideBar(false) //默認(rèn)不展示側(cè)邊欄，展示icon，用戶點(diǎn)擊調(diào)出
.controlButton({
left: 10, // 圖標(biāo)距離左側(cè)寬度
top: 20, // 圖標(biāo)距離頂部高度
height: 30, // 圖標(biāo)高度
width: 30, // 圖標(biāo)寬度
icons: {
shown: $r('app.media.back'), // 側(cè)邊欄展示時(shí)圖標(biāo)
hidden: $r('app.media.sidebar_shown'), // 側(cè)邊欄收起時(shí)圖標(biāo)
switching: $r('app.media.sidebar_shown') // 側(cè)邊欄切換過(guò)程圖標(biāo)
}
})
...創(chuàng)建側(cè)邊欄文本組件。
具體代碼如下：
...
struct SideBarContainerExample {
@ State navList: Array<string> = ["我的會(huì)員", "我的收藏", "我的相冊(cè)", "我的文件",]
build() {
SideBarContainer(SideBarContainerType.Embed) {
// 側(cè)邊欄內(nèi)容
Column() {
ForEach(this.navList, (item) => {
Text(item)
.width("100%")
.fontSize(20)
.textAlign(TextAlign.Start)
.padding({ top: 20 })
})
}
.height("100%")
.padding({ top: 60, left: 50 })
.backgroundColor("#aabbcc")
}
...
}
}完整代碼
示例完整代碼如下：
@Entry
@Component
struct SideBarContainerExample {
@State navList: Array<string> = ["我的會(huì)員", "我的收藏", "我的相冊(cè)", "我的文件",]
build() {
// Embed:側(cè)邊欄占據(jù)內(nèi)容空間 Overlay：側(cè)邊欄懸浮于內(nèi)容之上
SideBarContainer(SideBarContainerType.Embed) {
// 側(cè)邊欄內(nèi)容
Column() {
ForEach(this.navList, (item) => {
Text(item)
.width("100%")
.fontSize(20)
.textAlign(TextAlign.Start)
.padding({ top: 20 })
})
}
.height("100%")
.padding({ top: 60, left: 50 })
.backgroundColor("#aabbcc")
// 內(nèi)容區(qū)
Column() {
Text("內(nèi)容區(qū)域")
.width("100%")
.height("100%")
.fontSize(30)
.textAlign(TextAlign.Center)
}
.width("100%")
.height("100%")
.backgroundColor("#bbaacc")
}
// 默認(rèn)不展示側(cè)邊欄，展示icon，用戶點(diǎn)擊調(diào)出
.showSideBar(false)
.controlButton({
// 圖標(biāo)距離左側(cè)寬度
left: 10,
// 圖標(biāo)距離頂部高度
top: 20,
// 圖標(biāo)高度
height: 30,
// 圖標(biāo)寬度
width: 30,
icons: {
// 側(cè)邊欄展示時(shí)圖標(biāo)
shown: $r('app.media.back'),
// 側(cè)邊欄收起時(shí)圖標(biāo)
hidden: $r('app.media.sidebar_shown'),
// 側(cè)邊欄切換過(guò)程圖標(biāo)
switching: $r('app.media.sidebar_shown')
}
})
// 側(cè)邊欄寬度
.sideBarWidth(200)
.width('100%')
.height('100%')
}
}注意：模擬機(jī)與真機(jī)的預(yù)覽有區(qū)別，在SideBarContainerType.Embed情況下，真機(jī)中內(nèi)容區(qū)域是壓縮，模擬器中內(nèi)容區(qū)域是缺失。
總結(jié)
Tabs組件： 適用于導(dǎo)航欄固定在頁(yè)面上下左右側(cè)，入口分類數(shù)目不多，可以控制在5個(gè)以內(nèi)，且用戶需要頻繁切換每一個(gè)頁(yè)簽的應(yīng)用，比如微信、QQ等。
Navigation組件： 同樣可以實(shí)現(xiàn)Tabs組件中導(dǎo)航欄位于底部的場(chǎng)景，根據(jù)需要顯示隱藏導(dǎo)航欄，提供標(biāo)題，菜單，返回等選項(xiàng)，使用戶是使用時(shí)更加靈活。
sideBarContainer組件：主要的功能和內(nèi)容都在一個(gè)頁(yè)面里面，只是一些低頻操作內(nèi)容需要顯示在其他頁(yè)面里，可以把這些輔助功能放在抽屜欄里。屏幕較小時(shí)導(dǎo)航欄不占用空間。比如QQ，開(kāi)發(fā)指導(dǎo)文檔等。
