开源鸿蒙 栅格断点系统

  • 2022-08-09
  • 浏览 (1199)

栅格断点系统

栅格断点系统定义了不同水平宽度设备对应的Column数量关系,形成了一套断点规则定义。其以水平值作为断点依据,不同的设备根据自身当前水平宽度值在不同断点范围内的情况,显示不同数量的栅格数。

zh-cn_image_0000001292375365

水平宽度 (vp) SizeType类型 Columns数量 默认Margin 默认Gutter 典型设备
[0, 320) XS 2 12vp 12vp 智能穿戴
[320, 600) SM 4 24vp 24vp 默认设备
[600, 840) MD 8 32vp 24vp 智慧屏、竖屏状态的平板等
[840, +∞) LG 12 48vp 24vp 车机、横屏状态的平板等

icon-note.gif 说明: - 请访问栅格布局,了解栅格布局更详细的介绍。

示例:

  • 默认设备屏幕宽度为360vp,属于SizeType.SM类型设备,Column数量为4。根据示例代码配置,在该设备上,Left占1列,Center占2列,Right占1列。

  • 平板屏幕宽度为1024vp,属于SizeType.LG类型设备,Column数量为12。根据示例代码配置,在该设备上,Left占2列,Center占7列,Right占3列。

zh-cn_image_0000001245456434

@Entry
 @Component
 struct GridContainerExample1 {
   build(){
     GridContainer() {
       Row({}) {
         Row() {
           Text('Left').fontSize(25)
         }
         .useSizeType({
           xs: { span:1, offset:0 }, sm: { span:1, offset:0 },
           md: { span:1, offset:0 }, lg: { span:2, offset:0 }
         })
         .height("100%")
         .backgroundColor(0x66bbb2cb)
         Row() {
           Text('Center').fontSize(25)
         }
         .useSizeType({
           xs: { span:1, offset:0 }, sm: { span:2, offset:1 },
           md: { span:5, offset:1 }, lg: { span:7, offset:2 }
         })
         .height("100%")
         .backgroundColor(0x66b6c5d1)
         Row() {
           Text('Right').fontSize(25)
         }
         .useSizeType({
           xs: { span:1, offset:0 }, sm: { span:1, offset:3 },
           md: { span:2, offset:6 }, lg: { span:3, offset:9 }
         })
         .height("100%")
         .backgroundColor(0x66bbb2cb)
       }
       .height(200)
     }
     .backgroundColor(0xf1f3f5)
     .margin({ top:10 })
   }
 }

你可能感兴趣的文章

开源鸿蒙 一次开发,多端部署

开源鸿蒙 前言

开源鸿蒙 均分能力

开源鸿蒙 延伸能力

开源鸿蒙 隐藏能力

开源鸿蒙 自适应布局简介

开源鸿蒙 占比能力

开源鸿蒙 缩放能力

开源鸿蒙 拉伸能力

开源鸿蒙 折行能力

0  赞