如何使用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