Breakpoint Adaptation in HarmonyOS Next —— Making Applications Adapt to Different Screen Sizes
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, making applications perfectly adapt to different screen sizes is the key to enhancing the user experience. The breakpoint adaptation technology is like a magic key, helping developers easily open the door to cross-device adaptation. Today, let's take an in-depth look at the relevant knowledge of breakpoint adaptation.
The Concept and Definition of Breakpoints
Breakpoints, simply put, are the "scales" that divide the width of the application window into different intervals. Through these intervals, developers can set different layouts and styles for the application according to different screen size ranges, so as to achieve the best display effect of the application on various devices. In HarmonyOS Next, the common breakpoint divisions are as follows:
| Breakpoint Name | Value Range (vp) |
| --- | --- |
| XS | [0, 320) |
| sm | [320, 600) |
| md | [600, 840) |
| lg | [840, +∞) |
This division is not set in stone, and developers can adjust it according to the actual project requirements. For example, if the application is mainly aimed at tablets and large-screen devices, it may not be necessary to adapt to the XS breakpoint; for some special application scenarios, additional breakpoints such as xl and xxl can be added after the lg breakpoint. However, it should be noted that although adding new breakpoints can make the layout more refined, it will also increase the workload of development and design.
Using Breakpoint Adaptation in Grid and Navigation Components
Grid Component
The Grid component is a powerful assistant for implementing responsive layouts. When used in conjunction with breakpoints, it allows page elements to present different arrangements under different screen sizes. Here is a simple example:
@Entry
@Component
struct GridBreakpointSample {
@State currentBreakpoint: string = 'unknown'
build() {
GridRow({ breakpoints: { value: ['600vp', '840vp'], reference: BreakpointsReference.WindowSize } }) {
GridCol({ span: { xs: 12, sm: 6, md: 4, lg: 3 } }) {
Column() {
Image($r('app.media.image')).width('100%').aspectRatio(1).backgroundColor('#F1F3F5')
Text('Image Description').fontSize(14).textAlign(TextAlign.Center)
}
}
}
.onBreakpointChange((currentBreakpoint: string) => {
this.currentBreakpoint = currentBreakpoint
})
}
}
In the above code, the GridRow component sets the breakpoints through the breakpoints property. Under different breakpoints, the number of columns occupied by the GridCol component is different: it occupies 12 columns under the xs breakpoint, which is suitable for the single-column layout of small-screen devices; it occupies 6 columns under the sm breakpoint; it occupies 4 columns under the md breakpoint; it occupies 3 columns under the lg breakpoint, which is more suitable for the multi-column display of large-screen devices. In this way, the layout of the image and text can be automatically adjusted according to the screen size, ensuring that users can get a good visual experience on different devices.
Navigation Component
While implementing page navigation, the Navigation component can also adapt to different screen sizes with the help of breakpoints. For example, a stacked navigation may be used on small screens, while a columnar navigation may be switched to on large screens.
@Entry
@Component
struct NavigationBreakpointSample {
@State currentBreakpoint: string ='sm'
@State pageInfos: NavPathStack = new NavPathStack()
build() {
Navigation(this.pageInfos) {
if (this.currentBreakpoint ==='sm') {
// Use stacked navigation on small screens
Column() {
List() {
ListItem() {
Text('Page 1').fontSize(20).onClick(() => {
this.pageInfos.pushPath({ name: 'Page1' })
})
}
ListItem() {
Text('Page 2').fontSize(20).onClick(() => {
this.pageInfos.pushPath({ name: 'Page2' })
})
}
}
}
} else {
// Use columnar navigation on large screens
Row() {
Column() {
List() {
ListItem() {
Text('Page 1').fontSize(20).onClick(() => {
this.pageInfos.pushPath({ name: 'Page1' })
})
}
ListItem() {
Text('Page 2').fontSize(20).onClick(() => {
this.pageInfos.pushPath({ name: 'Page2' })
})
}
}
}
Column() {
// Content area
NavDestination() {
if (this.pageInfos.current.path === 'Page1') {
Text('This is the content of Page 1').fontSize(20).padding(20)
} else if (this.pageInfos.current.path === 'Page2') {
Text('This is the content of Page 2').fontSize(20).padding(20)
}
}
}
}
}
}
.mode(NavigationMode.Auto)
.onBreakpointChange((breakpoint: string) => {
this.currentBreakpoint = breakpoint
})
}
}
In this example, the change of breakpoints is monitored through the onBreakpointChange event, and the layout mode inside the Navigation component is determined according to the current breakpoint value currentBreakpoint. In the case of a small screen (sm breakpoint), a stacked layout is used, and in the case of a large screen, it is switched to a columnar layout, providing users with a more convenient navigation experience.
Dynamically Monitoring Window Changes to Adjust the UI
onBreakpointChange is an important method for implementing dynamic UI adaptation. It can promptly notify developers when the breakpoint changes, so as to make corresponding adjustments to the UI. In addition to the applications in the Grid and Navigation components mentioned earlier, it can also play a role in more complex page layouts.
@Entry
@Component
struct DynamicUIAdjustment {
@State currentBreakpoint: string ='sm'
@State isSideBarVisible: boolean = false
build() {
Column() {
if (this.currentBreakpoint ==='sm') {
// Layout for small screens
Button('Toggle Sidebar').onClick(() => {
this.isSideBarVisible =!this.isSideBarVisible
})
if (this.isSideBarVisible) {
// Display sidebar content
Text('Sidebar Content').fontSize(20).backgroundColor('#F1F3F5')
}
} else {
// Layout for large screens, always display the sidebar
Row() {
Column() {
Text('Sidebar Content').fontSize(20).backgroundColor('#F1F3F5')
}
.width('30%')
// Main content area
Column() {
Text('Main Content').fontSize(20).padding(20)
}
}
}
}
.onBreakpointChange((breakpoint: string) => {
this.currentBreakpoint = breakpoint
if (breakpoint!=='sm') {
this.isSideBarVisible = true
}
})
}
}
In this example, the onBreakpointChange event not only updates the currentBreakpoint state but also adjusts the display logic of the sidebar according to the breakpoint change. Under the small screen (sm breakpoint), the display and hiding of the sidebar are controlled by a button; while under the large screen, the sidebar is always displayed. In this way, the application interface can be dynamically adjusted according to the change of the window size, providing users with a more seamless user experience.
The breakpoint adaptation technology of HarmonyOS Next provides developers with powerful tools. By reasonably using breakpoints, achieving adaptation in components such as Grid and Navigation, and dynamically adjusting the UI with the help of onBreakpointChange, applications can show their best state on devices with different screen sizes. It is hoped that everyone can master these skills proficiently in actual development and create higher-quality applications.
Top comments (0)