HarmonyOS Next侧边栏布局设计原创

SameX

发布于 2025-2-25 10:08

1.8w浏览

0收藏

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。

在HarmonyOS Next应用开发中，侧边栏布局是提升用户体验、优化界面交互的重要设计元素。它能够在有限的屏幕空间内，为用户提供便捷的导航和操作入口。今天，咱们就来深入了解一下SideBarContainer组件以及它在侧边栏布局设计中的应用技巧。

SideBarContainer组件的作用

SideBarContainer组件在HarmonyOS Next开发里，就像是应用界面的“快捷侧边栏小助手”。它主要用于创建侧边栏布局，在很多场景中都能发挥大作用。比如说在内容丰富、功能多样的应用中，像文件管理应用、音乐播放应用，侧边栏可以放置各种功能入口、导航菜单，方便用户快速切换不同的功能模块或者浏览不同类别的内容。

使用SideBarContainer组件也很简单。先引入相关的库，然后在组件内部添加需要展示在侧边栏的内容就行。例如，在一个文件管理应用中，我们可以这样使用它：

import { SideBarContainer, SideBarContainerType } from '@ohos/sideBar';

@Entry
@Component
struct FileManagerSideBar {
    build() {
        SideBarContainer(SideBarContainerType.Embed) {
            Column() {
                Text('我的文件').fontSize(20).fontWeight(500).padding(10)
                Text('最近使用').fontSize(16).padding(10)
                Text('收藏').fontSize(16).padding(10)
            }
              .backgroundColor('#F1F3F5')
        }
          .width('30%')
          .sideBarWidth('30%')
          .minSideBarWidth('20%')
          .maxSideBarWidth('50%')
          .showControlButton(true)
          .autoHide(false)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

在这段代码里，我们创建了一个嵌入型（Embed）的侧边栏，里面包含了“我的文件”“最近使用”“收藏”等导航选项。通过设置SideBarContainer的各种属性，我们可以调整侧边栏的宽度、是否显示控制按钮、是否自动隐藏等。

实现可伸缩侧边栏布局

在实际应用中，可伸缩的侧边栏能让用户根据自己的需求灵活调整界面布局，提升使用体验。在HarmonyOS Next中，通过SideBarContainer组件的属性，我们可以轻松实现这一功能。

sideBarWidth属性用于设置侧边栏的初始宽度，minSideBarWidth和maxSideBarWidth属性则分别限制了侧边栏可缩放的最小和最大宽度。例如：

@Entry
@Component
struct ScalableSideBar {
    @State isSideBarExpanded: boolean = true;
    build() {
        SideBarContainer(SideBarContainerType.Overlay) {
            Column() {
                // 侧边栏内容
                Text('侧边栏内容').fontSize(20).padding(10)
            }
              .backgroundColor('#19000000')
        }
          .sideBarWidth(this.isSideBarExpanded? '30%' : '10%')
          .minSideBarWidth('10%')
          .maxSideBarWidth('50%')
          .showControlButton(true)
          .autoHide(false)
          .showSideBar(this.isSideBarExpanded)
          .onChange((isOpen: boolean) => {
                this.isSideBarExpanded = isOpen;
            })
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

在这个示例中，我们通过一个状态变量isSideBarExpanded来控制侧边栏的展开和收缩。当isSideBarExpanded为true时，侧边栏宽度为30%；为false时，宽度为10%。用户点击控制按钮时，onChange回调函数会更新isSideBarExpanded的值，从而实现侧边栏的伸缩效果。

结合Navigation组件实现三栏布局

三栏布局在大屏应用中非常常见，它可以将界面分为侧边导航区、列表导航区和内容区，让用户能够更高效地浏览和操作应用。在HarmonyOS Next中，我们可以结合SideBarContainer和Navigation组件来实现这一布局。

// 工程配置文件module.json5中配置{"routerMap": "$profile:route_map"}
// route_map.json
{
    "routerMap": [
        {
            "name": "Page1",
            "pageSourceFile": "src/main/ets/pages/Page1.ets",
            "buildFunction": "Page1Builder",
            "data": {
                "description": "this is Page1"
            }
        },
        {
            "name": "Page2",
            "pageSourceFile": "src/main/ets/pages/Page2.ets",
            "buildFunction": "Page2Builder"
        }
    ]
}

// Page1.ets
@Builder
export function Page1Builder() {
    return Page1();
}

@Component
export struct Page1 {
    build() {
        Column() {
            NavDestination() {
                Text('这是页面1的内容').fontSize(20).padding(20)
            }
              .title('页面1')
        }
    }
}

// Page2.ets
@Builder
export function Page2Builder() {
    return Page2();
}

@Component
export struct Page2 {
    build() {
        Column() {
            NavDestination() {
                Text('这是页面2的内容').fontSize(20).padding(20)
            }
              .title('页面2')
        }
    }
}

@Entry
@Component
struct TripleColumnLayout {
    @State arr: number[] = [1, 2];
    pageInfos: NavPathStack = new NavPathStack();
    @State arrSample: { label: string, pagePath: string }[] = [
        {
            label: '页面1',
            pagePath: 'Page1'
        },
        {
            label: '页面2',
            pagePath: 'Page2'
        }
    ];
    @Builder NavigationTitle() {
        Column() {
            Text('示例应用').fontColor('#000000').fontSize(24).width('100%').height('100%').align(Alignment.BottomStart).margin({ left: '5%' })
        }
          .alignItems(HorizontalAlign.Start)
    }
    build() {
        SideBarContainer() {
            Column() {
                List() {
                    ForEach(this.arr, (item: number, index) => {
                        ListItem() {
                            Text('侧边导航项' + item).width('100%').height("20%").fontSize(24).fontWeight(FontWeight.Bold).textAlign(TextAlign.Center).backgroundColor('#66000000')
                        }
                    })
                }
                  .divider({ strokeWidth: 5, color: '#F1F3F5' })
            }
              .width('100%')
              .height('100%')
              .justifyContent(FlexAlign.SpaceEvenly)
              .backgroundColor('#F1F3F5')
            Column() {
                Navigation(this.pageInfos) {
                    List() {
                        ForEach(this.arrSample, (item: { label: string, pagePath: string }, index) => {
                            ListItem() {
                                Text(item.label).fontSize(24).fontWeight(FontWeight.Bold).backgroundColor('#66000000').textAlign(TextAlign.Center).width('100%').height('30%').margin({ bottom: 10 }).onClick(() => {
                                    this.pageInfos.clear();
                                    this.pageInfos.pushPath({ name: item.pagePath });
                                })
                            }
                        })
                    }
                      .width('100%')
                }
                  .mode(NavigationMode.Auto)
                  .minContentWidth(360)
                  .navBarWidth(240)
                  .backgroundColor('#FFFFFF')
                  .height('100%')
                  .width('100%')
                  .hideToolBar(true)
                  .title(this.NavigationTitle)
            }
              .width('100%').height('100%')
        }
          .sideBarWidth(240)
          .minContentWidth(360)
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.

在这段代码中，SideBarContainer构建了侧边导航区，Navigation组件负责管理列表导航区和内容区的显示与切换。通过点击侧边导航项和列表导航项，用户可以在不同页面之间进行切换，实现了高效的三栏布局导航效果。

HarmonyOS Next的SideBarContainer组件为我们提供了丰富的侧边栏布局设计能力，结合Navigation组件，更能打造出功能强大、交互友好的应用界面。希望大家通过本文的介绍，在实际开发中能够灵活运用这些组件，创造出更出色的应用。

分类

HarmonyOS

标签

鸿蒙

51CTO

51CTO博客

51CTO学堂

HarmonyOS Next侧边栏布局设计原创

SideBarContainer组件的作用

实现可伸缩侧边栏布局

结合Navigation组件实现三栏布局

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

HarmonyOS Next侧边栏布局设计 原创

SideBarContainer组件的作用

实现可伸缩侧边栏布局

结合Navigation组件实现三栏布局

目录

订阅鸿蒙技术特刊，精选内容抢先看

HarmonyOS Next侧边栏布局设计原创