鸿蒙开发-一多开发之媒体查询功能

在HarmonyOS中,使用ArkTS语法实现响应式布局的媒体查询是一个强大的功能,它允许开发者根据不同的设备特征(如屏幕尺寸、屏幕方向等)动态地调整UI布局和样式。以下是一个使用媒体查询实现响应式布局的实例:

1. 导入必要的模块

首先,需要导入媒体查询相关的模块。在ArkTS中,这通常是通过import语句来完成的。

typescript复制代码import { mediaquery } from '@kit.ArkUI';

2. 创建媒体查询监听器

接下来,需要创建媒体查询监听器来监听屏幕尺寸的变化。这可以通过mediaquery.matchMediaSync方法来实现,该方法接受一个条件字符串作为参数,并返回一个MediaQueryListener对象。

@Entry
@Component
struct TestPage {listenerXS: mediaquery.MediaQueryListener | null = null;listenerSM: mediaquery.MediaQueryListener | null = null;aboutToAppear(): void {// 创建监听器,监听不同的屏幕尺寸范围this.listenerXS = mediaquery.matchMediaSync('(0vp <= width < 320vp)');this.listenerSM = mediaquery.matchMediaSync('(320vp <= width < 600vp)');// 注册监听器,当屏幕尺寸变化时执行相应的逻辑this.listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {console.log('changeRes:', JSON.stringify(res));// 执行小屏幕下的布局逻辑});this.listenerSM.on('change', (res: mediaquery.MediaQueryResult) => {console.log('changeRes:', JSON.stringify(res));// 执行中等屏幕下的布局逻辑});}// 移除监听器,避免性能浪费aboutToDisappear(): void {this.listenerXS?.off('change');this.listenerSM?.off('change');}build() {// 构建UI结构Column() {// 在这里根据屏幕尺寸动态调整UI布局}.height('100%')}
}

3. 在UI中使用媒体查询结果

build方法中,可以根据媒体查询的结果动态地调整UI布局。例如,可以使用条件渲染来根据不同的屏幕尺寸显示不同的组件或样式。

build() {return Column() {if (/* 条件:判断当前屏幕尺寸是否在小屏幕范围内 */) {// 小屏幕下的布局Text('小屏幕下的内容').fontSize(24).fontWeight(FontWeight.Bold);} else if (/* 条件:判断当前屏幕尺寸是否在中等屏幕范围内 */) {// 中等屏幕下的布局Text('中等屏幕下的内容').fontSize(32).fontWeight(FontWeight.Normal);} else {// 大屏幕下的布局Text('大屏幕下的内容').fontSize(40).fontWeight(FontWeight.Light);}}.height('100%');
}

注意:在实际代码中,需要根据媒体查询监听器的结果来设置上述条件。例如,可以通过状态变量来记录当前屏幕尺寸所处的范围,并在build方法中使用这些状态变量来进行条件渲染。

4. 注意事项

  • 媒体查询的条件字符串使用的是vp(视口宽度单位)作为单位,这是因为vp单位能够更好地适应不同屏幕尺寸的设备。
  • 在使用媒体查询时,需要注意性能问题。过多的媒体查询监听器可能会导致性能下降,因此建议在不需要时及时移除监听器。
  • 响应式布局不仅仅依赖于媒体查询,还可以结合其他布局方式(如Grid、Flex等)来实现更复杂的布局效果。

通过以上步骤,就可以在HarmonyOS中使用ArkTS语法实现响应式布局的媒体查询功能了。
在这里插入图片描述

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

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

相关文章

火语言RPA--列表项内容获取

【组件功能】&#xff1a;获取列表中某项数据内容 配置预览 配置说明 获取 获取数据方式 首项&#xff1a;列表第一条数据 末项&#xff1a;列表最后一条数据 随机项&#xff1a;随机获取列表中一条数据 指定索引项&#xff1a;根据索引获取列表对象中数据。 索引项目位置 …

基于Python+Flask+MySQL+HTML的爬取豆瓣电影top-250数据并进行可视化的数据可视化平台

FlaskMySQLHTML 项目采用前后端分离技术&#xff0c;包含完整的前端&#xff0c;以flask作为后端 Pyecharts、jieba进行前端图表展示 通过MySQL收集格列数据 通过Pyecharts制作数据图表 这是博主b站发布的详细讲解&#xff0c;感兴趣的可以去观看&#xff1a;【Python爬虫可…

解锁MySQL 8.0.14源码调试:Mac 11.6+CLion 2024.3.4实战指南

文章目录 解锁MySQL 8.0.41源码调试&#xff1a;Mac 11.6CLion 2024.3.4实战指南前期准备环境搭建详细步骤安装 CLion安装 CMake 3.30.5准备 MySQL 8.0.14 源码配置 CMake 选项构建 MySQL 项目 调试环境配置与验证配置 LLDB 调试器启动调试验证调试环境 总结与拓展 解锁MySQL 8…

81.HarmonyOS NEXT 状态管理与响应式编程:@Observed深度解析

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; HarmonyOS NEXT 状态管理与响应式编程&#xff1a;Observed深度解析 文章目录 HarmonyOS NEXT 状态管理与响应式编程&#xff1a;Observed深度解析…

【快速入门】MyBatis

一.基础操作 1.准备工作 1&#xff09;引入依赖 一个是mysql驱动包&#xff0c;一个是mybatis的依赖包&#xff1a; <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><vers…

RabbitMQ可靠性进制

文章目录 1.生产者可靠性生产者重连生产者确认小结 2. MQ的可靠性数据持久化LazyQueue小结 3. 消费者的可靠性消费者确认机制消费者失败处理方案业务幂等性唯一消息ID业务判断 兜底方案业务判断 兜底方案 1.生产者可靠性 生产者重连 在某些场景下由于网络波动&#xff0c;可能…

【专项测试】限流测试

简介 限流的目的是防止恶意请求、恶意攻击&#xff0c;或者防止流量超出系统峰值时保护系统免受灭顶之灾。 限流的具体做法是是通过对并发访问/请求进行限速或者对一个时间窗口的请求进行限速在保护系统&#xff0c;一旦达到限制速率则可以拒绝服务&#xff08;定向到错误页&a…

Qt-D指针与Q指针的设计哲学

文章目录 前言PIMLP与二进制兼容性D指针Q指针优化d指针继承Q_D和Q_Q 前言 在探索Qt源码的过程中会看到类的成员有一个d指针&#xff0c;d指针类型是一个private的类&#xff0c;这种设计模式称为PIMPL&#xff08;pointer to implementation&#xff09;&#xff0c;本文根据Q…

ctf web入门知识合集

文章目录 01做题思路02信息泄露及利用robots.txt.git文件泄露dirsearch ctfshow做题记录信息搜集web1web2web3web4web5web6web7web8SVN泄露与 Git泄露的区别web9web10 php的基础概念php的基础语法1. PHP 基本语法结构2. PHP 变量3.输出数据4.数组5.超全局变量6.文件操作 php的命…

LangChain 工作流编排

文章目录 LCEL流式调用案例invoke的异步调用异步流中的事件 LCEL LangChain Expression Language&#xff0c;是一种强大的工作流编排工具&#xff0c;可以从基本组件构建复杂的任务链&#xff08;Chain&#xff09;&#xff0c;有如下亮点&#xff1a; 流式支持&#xff1b;…

PyTorch 深度学习实战(14):Deep Deterministic Policy Gradient (DDPG) 算法

在上一篇文章中&#xff0c;我们介绍了 Proximal Policy Optimization (PPO) 算法&#xff0c;并使用它解决了 CartPole 问题。本文将深入探讨 Deep Deterministic Policy Gradient (DDPG) 算法&#xff0c;这是一种用于连续动作空间的强化学习算法。我们将使用 PyTorch 实现 D…

3.14-1列表

列表 一.列表的介绍和定义 1 .列表 类型: <class list> 2.符号:[] 3.定义列表: 方式1:[] 通过[] 来定义 list[1,2,3,4,6] print(type(list)) #<class list> 方式2: 通过list 转换 str2"12345" print(type(str2)) #<class str> list2lis…

Java集合 - HashMap

HashMap 是 Java 集合框架中的一个重要类&#xff0c;位于 java.util 包中。它实现了 Map 接口&#xff0c;基于哈希表的数据结构来存储键值对&#xff08;key-value pairs&#xff09;。HashMap 允许使用 null 作为键和值&#xff0c;并且是非同步的&#xff08;非线程安全的&…

有效的山脉数组 力扣941

一、题目 给定一个整数数组 arr&#xff0c;如果它是有效的山脉数组就返回 true&#xff0c;否则返回 false。 让我们回顾一下&#xff0c;如果 arr 满足下述条件&#xff0c;那么它是一个山脉数组&#xff1a; arr.length > 3在 0 < i < arr.length - 1 条件下&am…

本地部署Spark集群

部署Spark集群大体上分为两种模式&#xff1a;单机模式与集群模式 大多数分布式框架都支持单机模式&#xff0c;方便开发者调试框架的运行环境。但是在生产环境中&#xff0c;并不会使用单机模式。 下面详细列举了Spark目前支持的部署模式。 &#xff08;1&#xff09;Local…

前端---初识HTML(前端三剑客)

1.HTML 先为大家介绍几个学习前端的网站&#xff1a;菜鸟教程&#xff0c;w3school&#xff0c;CSS HTML&#xff1a;超文本标记语言 超⽂本: ⽐⽂本要强⼤. 通过链接和交互式⽅式来组织和呈现信息的⽂本形式. 不仅仅有⽂本, 还可能包含图⽚, ⾳频, 或者⾃已经审阅过它的学者…

AcWing 4905. 面包店 二分

类似还有一个题是二分&#xff0c;用区间来判断是否有解 这个爆long long 有点坑了 const int N 1e2 10;LL n,tc,Tm; LL a[N],b[N],c[N];bool check(LL mid) {LL minx max(0LL,mid 1 - Tm),maxx min(tc - 1LL,mid);//将y转为x的函数,此时判断x是否有解//枚举所有客户的需…

SpringBoot 第一课(Ⅲ) 配置类注解

目录 一、PropertySource 二、ImportResource ①SpringConfig &#xff08;Spring框架全注解&#xff09; ②ImportResource注解实现 三、Bean 四、多配置文件 多Profile文件的使用 文件命名约定&#xff1a; 激活Profile&#xff1a; YAML文件支持多文档块&#xff…

2025年西安交通大学少年班招生考试初试数学试题(初中组)

1、已知正整数 x 、 y 、 z x、y、z x、y、z 满足 x y z 2025 xyz2025 xyz2025 &#xff0c; x 2 y y 2 z z 2 x x y 2 y z 2 z x 2 x^2yy^2zz^2xxy^2yz^2zx^2 x2yy2zz2xxy2yz2zx2&#xff0c;则 x 、 y 、 z x、y、z x、y、z 共有 ___ 组解。 2、在数 1 、 2 、 …

开发、科研、日常办公工具汇总(自用,持续更新)

主要记录汇总一下自己平常会用到的网站工具&#xff0c;方便查阅。 update&#xff1a;2025/2/11&#xff08;开发网站补一下&#xff09; update&#xff1a;2025/2/21&#xff08;补充一些AI工具&#xff0c;刚好在做AI视频相关工作&#xff09; update&#xff1a;2025/3/7&…