44.HarmonyOS鸿蒙系统 App(ArkUI)栅格布局介绍

栅格布局是一种通用的辅助定位工具,对移动设备的界面设计有较好的借鉴作用。主要优势包括:

  1. 提供可循的规律:栅格布局可以为布局提供规律性的结构,解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数,可以方便地对页面元素进行定位和排版。
  2. 统一的定位标注:栅格布局可以为系统提供一种统一的定位标注,保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度,提高工作效率。
  3. 灵活的间距调整方法:栅格布局可以提供一种灵活的间距调整方法,满足特殊场景布局调整的需求。通过调整列与列之间和行与行之间的间距,可以控制整个页面的排版效果。
  4. 自动换行和自适应:栅格布局可以完成一对多布局的自动换行和自适应。当页面元素的数量超出了一行或一列的容量时,他们会自动换到下一行或下一列,并且在不同的设备上自适应排版,使得页面布局更加灵活和适应性强。

GridRow为栅格容器组件,需与栅格子组件GridCol在栅格布局场景中联合使用。

栅格容器GridRow

栅格系统断点

栅格系统以设备的水平宽度(屏幕密度像素值,单位vp)作为断点依据,定义设备的宽度类型,形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。

栅格系统默认断点将设备宽度分为xs、sm、md、lg四类,尺寸范围如下:

断点名称

取值范围(vp)

设备描述

xs

[0, 320)

最小宽度类型设备。

sm

[320, 520)

小宽度类型设备。

md

[520, 840)

中等宽度类型设备。

lg

[840, +∞)

大宽度类型设备。

在GridRow栅格组件中,允许开发者使用breakpoints自定义修改断点的取值范围,最多支持6个断点,除了默认的四个断点外,还可以启用xl,xxl两个断点,支持六种不同尺寸(xs, sm, md, lg, xl, xxl)设备的布局设置。

断点名称

设备描述

xs

最小宽度类型设备。

sm

小宽度类型设备。

md

中等宽度类型设备。

lg

大宽度类型设备。

xl

特大宽度类型设备。

xxl

超大宽度类型设备。

  • 针对断点位置,开发者根据实际使用场景,通过一个单调递增数组设置。由于breakpoints最多支持六个断点,单调递增数组长度最大为5。

     
    1. breakpoints: {value: ['100vp', '200vp']}

    表示启用xs、sm、md共3个断点,小于100vp为xs,100vp-200vp为sm,大于200vp为md。

     
    1. breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']}

    表示启用xs、sm、md、lg、xl共5个断点,小于320vp为xs,320vp-520vp为sm,520vp-840vp为md,840vp-1080vp为lg,大于1080vp为xl。

  • 栅格系统通过监听窗口或容器的尺寸变化进行断点,通过reference设置断点切换参考物。 考虑到应用可能以非全屏窗口的形式显示,以应用窗口宽度为参照物更为通用。

如,使用栅格的默认列数12列,通过断点设置将应用宽度分成六个区间,在各区间中,每个栅格子元素占用的列数均不同。

 

 

@Entry
@Componentstruct Index {@State message: string = 'Hello World'@State name2:string = '文本内容'@State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Blue, Color.Grey, Color.Brown];build() {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+1}`)  ////Text('${this.name2}')Text(`${this.name2}`)}.width("100%").height('50vp')}.backgroundColor(color)})}}
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/816676.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

我五年减脂历程中应用的数据指标

对于减脂,理论说的再多无益,关键是要行动起来。只有坚持过,才有资格说:我尽力了。 每天跑步5公里,是改变一个人体态的分水岭。记住是每天,不管春夏秋冬、酷暑寒雪。 我常在想,如何才能变成一个更…

【JavaEE多线程】理解和管理线程生命周期

目录 ThreadThread类的常用构造方法Thread类的常见属性启动一个线程-start()终止一个线程等待一个线程-join()线程的状态 Thread Thread 就是在 Java 中,线程的代言人。系统中的一个线程,就对应到 Java 中的一个 Thread 对象。围绕线程的各种操作&#…

Java 设计模式系列:模板方法模式

简介 模板方法模式是一种行为型设计模式,它定义一个操作中的算法骨架,将一些步骤推迟到子类中。模板方法模式使得子类可以不改变一个算法的结构,即可重定义该算法的某些特定步骤。 在模板方法模式中,抽象类中定义了一系列基本操…

申请OV SSL证书的好处

什么是OV SSL证书: OV SSL证书也叫组织验证型SSL证书,是众多SSL证书当中最受广大用户欢迎的一种类型。因为它不仅需要验证域名的所有权,还需要对企业的相关身份信息进行审核,确保企业是一个真实存在的合法实体。除了这些&#xf…

Rust取代C++? 保守了!关于未来的讨论

当各种平台在大肆讨论rust即将取代C/C的时候,已经有不少人意识到这种讨论是聒噪而无聊的。笔者和老师们通过周末茶会的讨论,认为现今世界常见的大多数编程语言都会在50-80年内被AI取代,同时供人类审计而诞生的“审计语言”会兴起。届时计算机…

Beego 使用教程 1:项目创建

beego 是一个用于Go编程语言的开源、高性能的 web 框架 beego 被用于在Go语言中企业应用程序的快速开发,包括RESTful API、web应用程序和后端服务。它的灵感来源于Tornado, Sinatra 和 Flask beego 官网:http://beego.gocn.vip/ 上面的 beego 官网如果访问不到,看这篇文章…

华为机考入门python3--(15)牛客15-求int型正整数在内存中存储时1的个数

分类:二进制 知识点: int转二进制 binary bin(n)[2:] 题目来自【牛客】 def count_ones_in_binary(n): # 将输入的整数转换为二进制字符串 # bin(n)为0b11011binary bin(n)[2:]# 初始化计数器为0 count 0 # 遍历二进制字符串的每一位 fo…

YOLOv9/YOLOv8算法改进【NO.117】 使用Wasserstein Distance Loss改进小目标的检测效果

前 言 YOLO算法改进系列出到这,很多朋友问改进如何选择是最佳的,下面我就根据个人多年的写作发文章以及指导发文章的经验来看,按照优先顺序进行排序讲解YOLO算法改进方法的顺序选择。具体有需求的同学可以私信我沟通: 首推…

多线程(51)忙等待

忙等待(Busy-waiting)是一种同步机制,其中一个进程或线程重复检查某个条件是否满足以便继续执行,而不是进入休眠或阻塞状态。这个条件通常与某种资源或锁的可用性有关。忙等待常常与自旋锁相关联,因为自旋锁就是通过忙…

StarUML笔记之从UML图生成C++代码

StarUML笔记之从UML图生成C代码 —— 2024-04-14 文章目录 StarUML笔记之从UML图生成C代码1.Add Diagram2.在TOOLBOX中左键点击Class,松开,然后在中间画面再左键点击,即可出现UML3.修改类图,并添加接口,方法,属性,我…

webpack-(plugin,本地服务器,路径别名,安装vue)

安装vue npm i vue-loader -D npm i vue 编写一个vue文件: 在index.html中设置 一个id为app的div 将vue文件挂载到app中 vue比较特殊,除了使用loader外,还使用了plugin const path require("path"); const { VueLoaderPlugin …

数据库-Redis(11)

目录 51.什么是Redis事务? 52.Redis事务相关命令? 53.Redis事务的三个阶段?

将图片数据转换为张量(Go并发处理)

在Go语言中,将图片数据转换成Tensor通常需要依赖一些外部库,编写一个简单的程序,该程序批量同时处理图片,将其转换为对应的浮点数张量。 假设图片是单通道(灰度图)或者三通道(彩色图&#xff0…

论文笔记:SmartPlay : A Benchmark for LLMs as Intelligent Agents

iclr 2024 reviewer评分 5688 引入了 SmartPlay,一种从 6 种不同游戏中提取的基准 衡量LLM作为智能体的能力 1 智能代理所需的能力 论文借鉴游戏设计的概念,确定了智能LLM代理的九项关键能力,并为每项能力确定了多个等级: 长文…

Unity WebGL 2022 Release-Notes

🌈WebGL 2022 Release-Notes 版本更新内容2022.3.16WebGL: Fixed a bug that causes a parsing error due to misplaced regex.(UUM-21896)2022.3.15WebGL: Fixed a bug that caused for input to not be released when focus was removed from canvas on Windows C…

一个基于单片机内存管理-开源模块

概述 此模块是一位大佬写的应用于单片机内存管理模块mem_malloc,这个mem_malloc的使用不会产生内存碎片,可以高效利用单片机ram空间。 源码仓库:GitHub - chenqy2018/mem_malloc mem_malloc介绍 一般单片机的内存都比较小,而且没有MMU,malloc 与free的使用容易造成内存碎…

27、滑动窗口

滑动窗口 题目描述 给定一个大小为 n ≤ 1 0 6 n≤10^6 n≤106 的数组。 有一个大小为k的滑动窗口,它从数组的最左边移动到最右边。 您只能在窗口中看到k个数字。 每次滑动窗口向右移动一个位置。 以下是一个例子: 该数组为[1 3 -1 -3 5 3 6 7]…

《由浅入深学习SAP财务》:第2章 总账模块 - 2.7 总账模块报表 -2.7.2 对外报表:现金流量表

2.7.2 对外报表:现金流量表 现金流量表包括直接法和间接法。使用SAP出具现金流量表,一般只能出具直接法报表。间接法是指按照净利润倒推出现金流量的发生额,由于其中存在人为“分析”的因素,很难直接通过科目的加加减减得出所需要…

神经网络模型底层原理与实现10-softmax的实现

import torch from IPython import display from d2l import torch as d2l batch_size256 #定义训练和验证数据集 train_iter,test_iterd2l.load_data_fashion_mnist(batch_size) #参数初始化,把输入图片看成长度784的向量,这个数据集有十个类别,输出为1…

小蚕爬树问题

小蚕爬树问题 问题描述: 编写一个函数 int day(int k,int m,int n),其功能是:返回小蚕需要多少天才能爬到树顶(树高 k 厘米,小蚕每天白天向上爬 m 厘米,每天晚上下滑 n 厘米,爬到树顶后不再下滑&#xff0…