SameXSidebar Layout Design in HarmonyOS Next
This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system and summarize them based on practical development practices. It mainly serves as a medium for technical sharing and communication. There may inevitably be some errors or omissions. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together. This article is original content, and any form of reprint must indicate the source and the original author.
In the application development of HarmonyOS Next, the sidebar layout is an important design element for enhancing the user experience and optimizing interface interaction. It can provide users with convenient navigation and operation entrances within the limited screen space. Today, let's take an in-depth look at the SideBarContainer component and its application techniques in sidebar layout design.
The Function of the SideBarContainer Component
In HarmonyOS Next development, the SideBarContainer component is like a "quick sidebar assistant" for the application interface. It is mainly used to create sidebar layouts and can play a significant role in many scenarios. For example, in applications with rich content and diverse functions, such as file management applications and music player applications, the sidebar can house various function entrances and navigation menus, facilitating users to quickly switch between different function modules or browse different categories of content.
Using the SideBarContainer component is also quite simple. First, import the relevant library, and then add the content that needs to be displayed in the sidebar inside the component. For instance, in a file management application, we can use it like this:
import { SideBarContainer, SideBarContainerType } from '@ohos/sideBar';
@Entry
@Component
struct FileManagerSideBar {
build() {
SideBarContainer(SideBarContainerType.Embed) {
Column() {
Text('My Files').fontSize(20).fontWeight(500).padding(10)
Text('Recently Used').fontSize(16).padding(10)
Text('Favorites').fontSize(16).padding(10)
}
.backgroundColor('#F1F3F5')
}
.width('30%')
.sideBarWidth('30%')
.minSideBarWidth('20%')
.maxSideBarWidth('50%')
.showControlButton(true)
.autoHide(false)
}
}
In this code, we have created an embedded (Embed) sidebar that contains navigation options such as "My Files", "Recently Used", and "Favorites". By setting various properties of the SideBarContainer, we can adjust the width of the sidebar, whether to display the control button, whether to auto-hide, and so on.
Implementing a Scalable Sidebar Layout
In practical applications, a scalable sidebar allows users to flexibly adjust the interface layout according to their needs, enhancing the user experience. In HarmonyOS Next, we can easily achieve this function through the properties of the SideBarContainer component.
The sideBarWidth property is used to set the initial width of the sidebar, and the minSideBarWidth and maxSideBarWidth properties respectively limit the minimum and maximum widths to which the sidebar can be scaled. For example:
@Entry
@Component
struct ScalableSideBar {
@State isSideBarExpanded: boolean = true;
build() {
SideBarContainer(SideBarContainerType.Overlay) {
Column() {
// Sidebar content
Text('Sidebar Content').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;
})
}
}
In this example, we use a state variable isSideBarExpanded to control the expansion and contraction of the sidebar. When isSideBarExpanded is true, the width of the sidebar is 30%; when it is false, the width is 10%. When the user clicks the control button, the onChange callback function will update the value of isSideBarExpanded, thus achieving the stretching effect of the sidebar.
Implementing a Three-column Layout in Combination with the Navigation Component
The three-column layout is very common in large-screen applications. It can divide the interface into a sidebar navigation area, a list navigation area, and a content area, enabling users to browse and operate the application more efficiently. In HarmonyOS Next, we can combine the SideBarContainer and Navigation components to achieve this layout.
// Configure in the project configuration file 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('This is the content of Page 1').fontSize(20).padding(20)
}
.title('Page 1')
}
}
}
// Page2.ets
@Builder
export function Page2Builder() {
return Page2();
}
@Component
export struct Page2 {
build() {
Column() {
NavDestination() {
Text('This is the content of Page 2').fontSize(20).padding(20)
}
.title('Page 2')
}
}
}
@Entry
@Component
struct TripleColumnLayout {
@State arr: number[] = [1, 2];
pageInfos: NavPathStack = new NavPathStack();
@State arrSample: { label: string, pagePath: string }[] = [
{
label: 'Page 1',
pagePath: 'Page1'
},
{
label: 'Page 2',
pagePath: 'Page2'
}
];
@Builder NavigationTitle() {
Column() {
Text('Sample Application').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('Sidebar Navigation Item' + 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)
}
}
In this code, the SideBarContainer constructs the sidebar navigation area, and the Navigation component is responsible for managing the display and switching of the list navigation area and the content area. By clicking on the sidebar navigation items and list navigation items, users can switch between different pages, achieving an efficient three-column layout navigation effect.
The SideBarContainer component of HarmonyOS Next provides us with rich sidebar layout design capabilities. Combined with the Navigation component, it can create more powerful and user-friendly application interfaces. It is hoped that through the introduction of this article, everyone can flexibly use these components in actual development and create more excellent applications.
