如何使用GriRow和GriCol开发自适应布局

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com

场景说明

开发者经常需要将一个应用适配到不同的设备上运行，比如手机、平板、折叠屏等等。为了保证用户的浏览体验，就需要根据不同设备的屏幕尺寸设计相应的UI布局变化。常见的如阅读软件，在手机上显示一页内容，在折叠屏上就可以显示两页内容，这样才能给用户更好的阅读体验。针对上述场景，OpenHarmony为开发者提供了较为灵活的自适应布局能力，本文即为大家做一个简单的介绍。

两个重要的自适应布局组件

使用OpenHarmony进行自适应布局的开发离不开以下两个组件：GridRow、GridCol。

• GridRow用来将屏幕等分为特定列数，并设置区分屏幕大小的临界点（breakpoints），比如可以将屏幕列数根据屏幕大小划分为：小屏设备4列，中屏8列，大屏12列（假设屏幕宽度 { Stack({ alignContent: Alignment.TopStart }) { Image(item.img) .width('100%') .height('100%') .borderRadius(16) .objectFit(ImageFit.Cover) Column() { Text(item.title) .fontSize(16) .fontColor(Color.White) .margin({ bottom: 4 }) Text(item.info) .fontSize(12) .fontColor(Color.White) .opacity(0.6) } .alignItems(HorizontalAlign.Start) .margin({ top: 20, left: 14 }) } }, item => JSON.stringify(item)) } .height(144) .itemSpace(12) .autoPlay(true) // 小屏时显示一个页面，中屏时显示两个页面 .displayCount(this.currentbp == 'md' ? 2 : 1) } .height(144) } .height('100%') .width('100%') .padding({top:10,bottom:10,left:10,right:10}) // 获取断点 .onBreakpointChange((breakpoint)=>{ this.currentbp = breakpoint }) } }

  参考

  • GridRow组件的使用
  • GridCol组件的使用

  想了解更多关于开源的内容，请访问：

  51CTO 开源基础软件社区

  https://ost.51cto.com