Complex Interface Layout in HarmonyOS Next —— Optimization of Information Flow and Lists
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, creating beautiful and efficient information flow and list layouts is a crucial part of enhancing the user experience. Especially when facing different device screen sizes, how to optimize the layout has become a challenge that developers need to overcome. Today, let's focus on this area and deeply analyze the relevant technical points.
Challenges of Information Flow Layout
When adapting the information flow for large-screen devices, developers will face many challenges. As the screen size increases, the information flow content that was compactly arranged and displayed normally on small screens may encounter problems such as oversized elements and uncoordinated layouts on large screens. For example, a single image may occupy too much space on a large screen, resulting in a reduction in the overall browsing content of the page. Users need to scroll the page frequently to view the complete information, which affects the user experience. Moreover, the resolutions and aspect ratios of large-screen devices vary, which requires the information flow layout to be more flexible in adapting to these changes and ensuring the best display effect on various large-screen devices.
Using the Grid + List Combination to Implement Information Flow on Different Devices
To solve the layout problem of the information flow on different devices, we can skillfully combine the Grid and List components. The Grid component provides flexible grid layout capabilities, while the List component is good at displaying a series of similar content items. Let's see how to implement it specifically through the following example code:
@Entry
@Component
struct InformationFlowLayout {
@State data: Resource[] = new Array(10).fill($r("app.media.image"))
@State breakPoint: string ='sm'
build() {
GridRow() {
GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
List({ space: 24 }) {
ForEach(this.data, (item: Resource) => {
ListItem() {
Grid() {
GridItem() {
Image(item).width('100%').aspectRatio(1)
Text('Example of Information Flow Content').fontSize(16).padding(10)
}
}
}
})
}
// Set the minimum and maximum column widths according to the breakpoints
.lanes({ minLength: 300, maxLength: 360 }).padding(12)
}
}
.onBreakpointChange((breakpoint: string) => {
this.breakPoint = breakpoint
})
}
}
In the above code, GridRow and GridCol build the basic grid framework to ensure that the content can reasonably occupy the screen space under different breakpoints. The List component is responsible for displaying each content item in the information flow. Through the ForEach loop to iterate through the data array, each data item is rendered as a ListItem. The lanes property, combined with the breakpoints, sets the minimum and maximum widths of the columns, enabling the List component to adaptively determine the number of columns according to the screen size. Under a small screen (sm breakpoint), only one column of information flow content may be displayed; while under a large screen (lg breakpoint), multiple columns can be displayed, making full use of the screen space and improving the efficiency of information display.
Optimizing the Display Effect of the Information Flow
To further optimize the display effect of the information flow, we can use properties such as aspectRatio and constrainSize to finely control images and other elements. aspectRatio is used to fix the aspect ratio of elements, and constrainSize can set the maximum and minimum sizes of elements.
The following is an optimized example code:
@Entry
@Component
struct OptimizedInformationFlow {
@State data: Resource[] = new Array(10).fill($r("app.media.image"))
@State breakPoint: string ='sm'
build() {
GridRow() {
GridCol({ span: { sm: 12, md: 12, lg: 12 } }) {
List({ space: 24 }) {
ForEach(this.data, (item: Resource) => {
ListItem() {
Grid() {
GridItem() {
Image(item)
.width('100%')
.aspectRatio(0.8)
.constraintSize({ maxWidth: 240, minWidth: 180 })
Text('Example of Optimized Information Flow Content').fontSize(16).padding(10)
}
}
}
})
}
.lanes({ minLength: 300, maxLength: 360 }).padding(12)
}
}
.onBreakpointChange((breakpoint: string) => {
this.breakPoint = breakpoint
})
}
}
In this example, the image maintains a fixed aspect ratio by setting aspectRatio(0.8). No matter how the screen size changes, the image can be displayed in an appropriate proportion, avoiding stretching or distortion. The constraintSize property further limits the width range of the image, adaptively adjusting between a minimum width of 180vp and a maximum width of 240vp. In this way, on different devices, the image will neither be too small to see the details clearly nor too large to affect the overall layout coordination, effectively improving the visual effect of the information flow and the user experience.
By addressing the challenges of information flow adaptation on large-screen devices, skillfully using the Grid and List components for layout, and optimizing the display effect with properties such as aspectRatio and constrainSize, we can create information flow interfaces that perform well on different devices in HarmonyOS Next. It is hoped that these technical points can help developers build more high-quality and efficient application interfaces in actual projects.
Top comments (0)