文章目錄

• 前言
• 側(cè)邊欄組件使用
• 快速搞定側(cè)邊欄
• 總結(jié)

一瓢娜、前言

有好多文章要分享炒瘟，但是來不及，就把最近覺得比較重要的組件分享下斩郎。最近因?yàn)樵谕晟仆鎍ndroid的一個app脑融，我的這個app叫玩鴻蒙，過段時間就開源了缩宜，敬請期待肘迎。

今天就分享，我在WanHarmony中用到的這個組件。先不多說妓布，看下效果窿侈，老讀者都知道我在維護(hù)一個組件使用的項(xiàng)目，所以我今天的這個組件使用秋茫，也會放到那個項(xiàng)目中史简，能快速的上手。

話不多說肛著，看效果圆兵。

展開效果：

51.png

收縮效果：

52.png

上邊的效果是在WanHarmony項(xiàng)目中已經(jīng)實(shí)現(xiàn)的效果，如果你也想實(shí)現(xiàn)枢贿，那么你要把握這個關(guān)鍵組件殉农。只要會使用這個組件，就能寫出上面的效果局荚。至于上面的效果超凳，等我把WanHarmony開源就可以查看。

二耀态、側(cè)邊欄使用

組件是SideBarContainer

   Column(){
      SideBarContainer(SideBarContainerType.Embed) { //側(cè)邊欄和內(nèi)容并列顯示轮傍，Overlay是側(cè)邊欄浮在內(nèi)容上面
        //側(cè)邊欄的布局 （也就是左半邊布局）
        Column(){
          ForEach(this.arr, (item, index)=>{
            Column({space:5}){
              Image(this.current === index ? this.selectedIcon : this.normalIcon)
                .width(64)
                .height(64)

              Text('index0' + item)
                .fontSize(25)
                .fontColor(this.current === index ?  '#0A59F7' : '#999')
            }
            .onClick(()=>{
              this.current = index
            })
          }, item => item)
        }.width('100%')
        .margin({
          top: 90
        })
        .backgroundColor(Color.Red)
        .justifyContent(FlexAlign.SpaceEvenly)

        //右邊 內(nèi)容的布局  （右邊半邊的布局）
        List(){
          ForEach(this.arr,(item, index)=>{
            ListItem(){
              Text(item + '文本')
                .height(50)
            }
          }, (item)=>item)
        }
        .margin({
          top: 90
        })
        .height('100%')

      }.controlButton({//控制側(cè)邊欄顯示隱藏的按鈕
        icons:{
          hidden: $r('app.media.ic_broadside_close'),
          shown:$r('app.media.ic_broadside_default'),
          switching: $r('app.media.ic_broadside_close')
        },
        width:32,
        height:32
      })
      .sideBarWidth(150)
      .minSideBarWidth(50)
      .maxSideBarWidth('100%')
      .onChange((value)=>{ //側(cè)邊欄是否顯示的值
        console.log('當(dāng)前的值：' + value)
      })
      .backgroundColor(Color.Green)

    }
    .margin({
      top: -40
    })

三、快速搞定側(cè)邊欄

從上面注釋基本就能知道這個組件的使用了首装，自己再擼一把就掌握了创夜。
這里羅列下SideBarContainer的要點(diǎn)：
1、里面放兩個布局仙逻，一個作為左半部分用驰吓，一個作為右半邊部分用。
2系奉、controlButton 這個是側(cè)邊欄切換的按鈕檬贰，可以設(shè)置按鈕圖片和大小
3、sideBarWidth 這個是設(shè)定側(cè)邊欄（左邊部分）的寬度缺亮，也就是左半邊的大小翁涤。
4、如果想讓左邊部分滾動瞬内，那么里面就放List組件就可以了迷雪。

53.png

最后呢，將我整理的這個組件放到這個項(xiàng)目中虫蝶，后面有新增章咧，也會一并上傳。開發(fā)中能真，某些api忘記了赁严，可以重新拿出來看看扰柠。

最后獻(xiàn)上我的個人v，專屬終身顧問疼约，解答關(guān)于鴻蒙相關(guān)的東西卤档，包括項(xiàng)目中的問題，還有最新的技術(shù)點(diǎn)程剥，快速開發(fā)劝枣，搶在前頭。 hmssz1

技術(shù)迭代很快织鲸，不要在一個問題上拔不出來舔腾，找到專業(yè)的人，快速的解決搂擦，作為程序員時間是最寶貴的稳诚，不要自己蒙頭苦干，等你搞懂了瀑踢，這個技術(shù)已經(jīng)過時了扳还。

以上代碼地址：https://github.com/shenshizhong/ViewUseDemo
找到這個類 SlideBarContainerTestPage.ets

總結(jié)

1、SideBarContainer 的使用
2橱夭、給定好左邊部分 和右邊部分的布局
3氨距、設(shè)置好左半邊大小 和右半天大小

如果對你有一點(diǎn)點(diǎn)幫助，那是值得高興的事情徘钥。：)
我的csdn：http://blog.csdn.net/shenshizhong
我的簡書：http://www.reibang.com/u/345daf0211ad