HarmonyOS应用开发学习笔记 UI布局学习 栅格布局(GridRow/GridCol)

这篇具有很好参考价值的文章主要介绍了HarmonyOS应用开发学习笔记 UI布局学习 栅格布局(GridRow/GridCol)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HarmonyOS应用开发学习笔记 UI布局学习 相对布局 (RelativeContainer)

官方文档:栅格布局(GridRow/GridCol)

一、代码示例

HarmonyOS应用开发学习笔记 UI布局学习 栅格布局(GridRow/GridCol),harmonyos,学习,笔记,ArkTS 栅格,arkTS 宫格布局,鸿蒙 GridRow,鸿蒙 GridCol

Row() {
  GridRow({ columns: 4 }) {
    ForEach(this.bgColors, (item, index) => {
      GridCol() {
        Row() {
          Text(`${index + 1}`)
        }.width('100%').height('50')
      }.backgroundColor(item)
    })
  }
  .width('100%').height('100%')
  .onBreakpointChange((breakpoint) => {
    this.currentBp = breakpoint
  })
}
.height(160)
.border({ color: Color.Blue, width: 2 })
.width('90%')
Row() {
  GridRow({ columns: 8 }) {
    ForEach(this.bgColors, (item, index) => {
      GridCol() {
        Row() {
          Text(`${index + 1}`)
        }.width('100%').height('50')
      }.backgroundColor(item)
    })
  }
  .width('100%').height('100%')
  .onBreakpointChange((breakpoint) => {
    this.currentBp = breakpoint
  })
}
.height(160)
.border({ color: Color.Blue, width: 2 })
.width('90%')

二、常用属性

1、排列方向

  • 通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向
代码 描述
GridRowDirection.Row 从左往右排列
GridRowDirection.RowReverse 从右往左排列
  • 左往右排列
//子组件默认从左往右排列
GridRow({ direction: GridRowDirection.Row }){}

HarmonyOS应用开发学习笔记 UI布局学习 栅格布局(GridRow/GridCol),harmonyos,学习,笔记,ArkTS 栅格,arkTS 宫格布局,鸿蒙 GridRow,鸿蒙 GridCol

  • 子组件从右往左排列
GridRow({ direction: GridRowDirection.RowReverse }){}

HarmonyOS应用开发学习笔记 UI布局学习 栅格布局(GridRow/GridCol),harmonyos,学习,笔记,ArkTS 栅格,arkTS 宫格布局,鸿蒙 GridRow,鸿蒙 GridCol

2、子组件间距

当gutter类型为number时,同时设置栅格子组件间水平和垂直方向边距且相等。下例中,设置子组件水平与垂直方向距离相邻元素的间距为10。

  • 垂直和水平间距都为10
 GridRow({ gutter: 10 }){}

HarmonyOS应用开发学习笔记 UI布局学习 栅格布局(GridRow/GridCol),harmonyos,学习,笔记,ArkTS 栅格,arkTS 宫格布局,鸿蒙 GridRow,鸿蒙 GridCol

  • x属性为水平方向间距,y为垂直方向间距
GridRow({ gutter: { x: 20, y: 50 } }){}

HarmonyOS应用开发学习笔记 UI布局学习 栅格布局(GridRow/GridCol),harmonyos,学习,笔记,ArkTS 栅格,arkTS 宫格布局,鸿蒙 GridRow,鸿蒙 GridCol

3、子组件GridCol

  • 通过给GridCol传参或者设置属性两种方式
代码 描述
span 占用列数
offset 偏移列数
order 元素序号

设置span

GridCol({ span: 2 }){}
GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.span(2)
GridCol(){}.span({ xs: 1, sm: 2, md: 3, lg: 4 })

设置offset

GridCol({ offset: 2 }){}
GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
GridCol(){}.offset(2)
GridCol(){}.offset({ xs: 1, sm: 2, md: 3, lg: 4 }) 

设置order

GridCol({ order: 2 }){}
GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
GridCol(){}.order(2)
GridCol(){}.order({ xs: 1, sm: 2, md: 3, lg: 4 })

三、不同尺寸的适配

GridRow为栅格容器组件,需与栅格子组件GridCol在栅格布局场景中联合使用。
栅格系统默认断点将设备宽度分为xs、sm、md、lg四类,尺寸范围如下:文章来源地址https://www.toymoban.com/news/detail-780311.html

断点名称 取值范围(vp) 设备描述
xs [0, 320) 最小宽度类型设备。
sm [320, 520) 小宽度类型设备。
md [520, 840) 中等宽度类型设备。
lg [840, +∞) 大宽度类型设备。
  • 例如,使用栅格的默认列数12列,通过断点设置将应用宽度分成六个区间,在各区间中,每个栅格子元素占用的列数均不同。
@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown];
...
GridRow({
  breakpoints: {
    value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
    reference: BreakpointsReference.WindowSize
  }
}) {
   ForEach(this.bgColors, (color, index) => {
     GridCol({
       span: {
         xs: 2, // 在最小宽度类型设备上,栅格子组件占据的栅格容器2列。
         sm: 3, // 在小宽度类型设备上,栅格子组件占据的栅格容器3列。
         md: 4, // 在中等宽度类型设备上,栅格子组件占据的栅格容器4列。
         lg: 6, // 在大宽度类型设备上,栅格子组件占据的栅格容器6列。
         xl: 8, // 在特大宽度类型设备上,栅格子组件占据的栅格容器8列。
         xxl: 12 // 在超大宽度类型设备上,栅格子组件占据的栅格容器12列。
       }
     }) {
       Row() {
         Text(`${index}`)
       }.width("100%").height('50vp')
     }.backgroundColor(color)
   })
}                                                                     

到了这里,关于HarmonyOS应用开发学习笔记 UI布局学习 栅格布局(GridRow/GridCol)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • UI开发布局-HarmonyOS应用UI开发布局

    UI页面的构建不用再像Android开发过程中在.xml文件中书写,可直接在页面上使用声明式UI的方式按照布局进行排列,构建应用的页面。 如下代码使用Row、Column构建一个页面布局,在页面布局中添加组件Text、Button,共同构成页面: 在实际开发的过程中,按照如下流程进行页面的

    2024年04月13日
    浏览(67)
  • HarmonyOS应用开发学习笔记 UIAbility组件与UI的数据同步 EventHub、globalThis

    1、 HarmoryOS Ability页面的生命周期 2、 @Component自定义组件 3、HarmonyOS 应用开发学习笔记 ets组件生命周期 4、HarmonyOS 应用开发学习笔记 ets组件样式定义 @Styles装饰器:定义组件重用样式 @Extend装饰器:定义扩展组件样式 5、HarmonyOS 应用开发学习笔记 state状态管理概述 6、HarmonyO

    2024年02月03日
    浏览(54)
  • HarmonyOS 应用开发学习笔记 状态管理概述

    移动端开发,最重要的一点就是数据的处理,并且正确的显示渲染UI。 变量在页面和组件、组件和组件之间有时候并不能实时共享,而有时候,又不需要太多的作用域(节省资源),作用就需要根据不同场景,设置不同状态的变量。 官方文档 在声明式UI编程框架中,UI是程序

    2024年02月03日
    浏览(49)
  • 鸿蒙HarmonyOS4.0开发应用学习笔记

    鸿蒙harmony开发文档指南 DevEco Studio下载地址 选择或者安装环境 选择和下载SDK 安装总览 编辑器界面 2.1变量声明 2.2条件控制 2.3循环迭代 2.4函数 2.5类和接口 2.6模块开发 通用功能抽取到单独的ts文件,每个文件都是一个模块(module)。 模块可以相互加载,提高代码复用性。 crea

    2024年02月04日
    浏览(72)
  • HarmonyOS应用开发者高级认证学习认证知识答疑笔记

    1. 判断题 1. 云函数打包完成后,需要到APPGallery Connect创建对应函数的触发器才可以在端侧中调用 错 2. 每一个自定义组件都有自己的生命周期 对 3. 基于端云一体化开发,开发者需要精通前端,后端不同的开发语言。 错 4. 首选项preferences是以key-value形式存储数据,其中key是可

    2024年02月04日
    浏览(61)
  • HarmonyOS鸿蒙开发指南:基于ArkTS开发 轻量级智能穿戴 体验应用、构建布局、绘制样式​​​​​​​和交互事件

    目录 体验应用 构建布局 绘制样式​​​​​​​ 交互事件 HelloWorld工程目录如下图所示: 图1  目录结构 pages/index/index.hml

    2024年02月01日
    浏览(56)
  • HarmonyOS/OpenHarmony应用开发-ArkTS语言声明式UI描述

    ArkTS以声明方式组合和扩展组件来描述应用程序的UI,同时还提供了基本的属性、事件和子组件配置方法,帮助开发者实现应用交互逻辑。 一、创建组件 根据组件构造方法的不同,创建组件包含有参数和无参数两种方式。 说明,创建组件时不需要new运算符。 1.无参数 如果组

    2024年02月08日
    浏览(87)
  • HarmonyOS应用开发者基础笔记

    HOS认证基础笔记 HarmonyOS应用开发者高级认证笔记 华子鸿蒙开发认证(认证链接),粗略看了看感觉还行,遂1h22min速通 首选项preferences是以Key-Value形式存储数据,其中Key是可以重复。(错) 使用http模块发起网络请求时,必须要使用on(‘headersReceive’)订阅请求头,请求才会成

    2024年02月02日
    浏览(65)
  • 《HarmonyOS开发 – OpenHarmony开发笔记(基于小型系统)》第4章 OpenHarmony应用开发实例

    开发环境 : 开发系统:Ubuntu 20.04 开发板:Pegasus物联网开发板 MCU:Hi3861 OpenHarmony版本:3.0.1-LTS 1.新建工程及源码 新建目录 在applications/sample/myapp中新建src目录以及myapp.c文件,代码如下所示。 新建编译组织文件 新建applications/sample/myapp/BUILD.gn文件,内容如下所示: static_libr

    2024年02月09日
    浏览(82)
  • 鸿蒙应用开发学习路线(OpenHarmony/HarmonyOS)

    作者:坚果 团队:坚果派 公众号:“大前端之旅” 润开鸿技术专家,华为HDE,InfoQ签约作者,OpenHarmony布道师,擅长HarmonyOS应用开发、熟悉服务卡片开发,在“战码先锋”活动中作为大队长,累计培养三个小队长,带领100+队员完成Pr的提交合入。 欢迎通过主页或者私信联系

    2024年02月15日
    浏览(91)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包