当前位置: 首页 > news >正文

鸿蒙学习笔记(3)-像素单位、this指向问题、RelativeContainer布局、@Style装饰器和@Extend装饰器

一、像素单位

物理像素:用px表示。

逻辑像素:在布局的时候,底层针对物理像素和屏幕尺寸关系进行转化的中间层。

分辨率:代表在屏幕上到底布局了多少了像素点(发光点)

官方同时也提供了相关单位,在开发中使用官方提供的来实现。

名称描述
px屏幕物理像素单位。
vp

屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素,当数值不带单位时,默认单位vp。

说明:

vp与px的比例与屏幕像素密度有关。

fp字体像素,与vp类似适用屏幕密度变化,随系统字体大小设置变化。
lpx视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度(通过designWidth配置)的比值,designWidth默认值为720。当designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。

 二、this指向问题

(1)使用场景

面向对象开发的时候,会出现this的使用;在进行事件绑定的时候,也会涉及this调用指向;在箭头函数中我们也会用到this,准确判断他的指向。

(2)注意事项

1、this永远指向一个对象,即new出来的一个实例。

2、普通函数中的this,谁调用这个函数,默认this就指向谁。

3、箭头函数默认没有this指向,如果箭头函数中有this出现,一定指向父级作用域。

(3)总结

1、类模板中this默认占位符,如果你没有通过类来new一个对象,实际上类中的this就没有意义。

2、当你执行new操作符的时候,通过类模板创建出一个对象,类中的this代表new出来对象。

3、类中的函数和属性要相互调用,都必须通过this来进行调用。

4、事件函数中绑定了普通函数过后,内部的this默认指向事件源对象。

5、箭头函数谁使用了this,就指向谁,也就是父级作用域。

(4)改变this指向

call:可以传递多个参数,第一个表示当前this环境,第二个往后就是参数。call(this,1,2,3)

apply:可以传递两个参数,第一个当前this环境,第二个是参数数组。apply(this,[1,2,3])

bind:参数跟call一样,传递多个,但是返回一个函数。接收一个函数const fun=bind(this,1,2,3)  再调用一下 fun()

三、RelativeContainer布局

(1)概念

使得容器布局更加多样化,尤其涉及多个组件层叠,设计各个子组件之间的位置调整。

  • 容器内子组件区分水平方向,垂直方向:
    • 水平方向为left, middle, right,对应容器的HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End。
    • 垂直方向为top, center, bottom,对应容器的VerticalAlign.Top, VerticalAlign.Center, VerticalAlign.Bottom。

注意理解:子组件相对于父容器位置变化时定位线的位置变化

(2)相对容器布局

1、相对父容器特性

1.1 在RelativeContainer容器中设置子元素,默认情况没有设置子元素的相对偏移,默认所有元素是层叠在一起的,对齐方式是容器左上角。

1.2 在RelativeContainer容器中,子元素可以设置偏移位置,难点:子元素可以以RelativeContainer父元素容器作为参考,当然也可以以其他子元素作为偏移参考。

anchor:参考锚点设置

.alignRules({

//可以给子组件设置一个属性,代表子元素设置相对位置,组要提供参考元素和子元素指定水平方向哪一边作为参考线,以及父级元素的参考线

.alignRules({

top: { anchor: "__container__", align: VerticalAlign.Top },//子组件顶部以container父容器作为参考,以父容器垂直方向顶部对齐

right: { anchor: "__container__", align: HorizontalAlign.End }//子组件右边以container父容器作为参考,以父容器水平方向右边对齐

})

ps:跟学过的相对定位有点类似,position:绝对定位,确定子组件相对父组件的位置(相对父组件)。

可以使用offset来设置子元素定位好以后的细节

.offset({

x:-10,y:10             //向左偏移,向下偏移10

})

2、相对子元素特性 

如果想要以子元素作为参考,需要给你的子组件设置一个id作为唯一标识,anchor锚点参考改为你想参考的子组件的唯一标识id,其余用法思路根父组件是一样的。

每次移动一个子元素时,参考的那个子元素要固定下来,如果参考的子元素的位置发生了变化,其他以它作为参考对象的子元素都会受到影响。

四、@Style装饰器

一、简介

在我们页面开发的过程中,将一个页面中重复的一些样式代码提取出来实现公用,并且只负责当前页面的样式复用,有组件内定义和组件外定义两种,组件外定义记得加fuction。

二、注意事项

1、不是所有的样式都有可以提取到@Style装饰器装饰器中,只可以抽取公共样式事件。

2、@Style不支持传参

3、可以在组件下继续添加一样的样式来覆盖掉@Style装饰器复用的样式。

五、@Extend装饰器

一、简介

定义扩展组建的样式,主要用于鸿蒙中原生组件的样式和事件进行扩展,换句话说,就是可以用这个装饰器对原生组件进行重定义,在页面实现复用,类似于@Style装饰器效果。

二、注意事项

1、必须指定对哪个原生组件进行拓展。

2、和@Styles不同,@Extend仅支持在全局定义,不支持在组件内部定义。

3、和@Styles不同,@Extend装饰的方法支持参数,开发者可以在调用时传递参数,调用遵循TS方法传值调用。

4、@Extend的参数可以为状态变量,当状态变量改变时,UI可以正常的被刷新渲染。

相关文章:

鸿蒙学习笔记(3)-像素单位、this指向问题、RelativeContainer布局、@Style装饰器和@Extend装饰器

一、像素单位 物理像素:用px表示。 逻辑像素:在布局的时候,底层针对物理像素和屏幕尺寸关系进行转化的中间层。 分辨率:代表在屏幕上到底布局了多少了像素点(发光点) 官方同时也提供了相关单位,在开发中…...

Selenium之简介

Selenium简介 首先,让我们看看官网是怎么定义的 Selenium是一个支持web浏览器自动化的一系列工具和库的综合项目,提供了扩展来模拟用户和浏览器的交互,用于扩展浏览器分配的分发服务器;用于W3C WebDriver规范的基础架构 其实&a…...

使用Ollama(自定义安装位置)与RagFlow构建本地知识库

目录 1. 为什么不直接使用网页版DeepSeek?2. 如何实现网页版DeepSeek不能实现的需求?3. 目标效果预览4. 为什么要使用RAG技术?RAG和模型微调的区别?5. 什么是Embedding?为什么需要“Embedding模型”?6. 本地部署全流程6.1 下载ollama,通过olama将DeepSeek模型…...

基于ssm的医院预约挂号系统

一、系统架构 前端:jsp | bootstrap | jquery | css | ajax 后端:spring | springmvc | mybatis 环境:jdk1.8 | mysql | maven | tomcat 二、代码及数据 三、功能介绍 01. 注册 02. 登录 03. 首页 04. 医院挂号 05. …...

如何通过less在vue2中达到切换皮肤的目的

先装less npm install less less-loader --save-dev 然后将该 loader 添加到 webpack 的配置中去,例如: webpack.config.js module.exports {module: {rules: [{test: /\.less$/i,use: [// compiles Less to CSSstyle-loader,css-loader,less-loade…...

DeepSeek概述

一、DeepSeek概述 1.1 DeepSeek是什么 DeepSeek是一家专注 通用人工智能(AGI,Artificial General Intelligence)的中国科技公司,主攻大数据研发与应用。DeepSeek-R1是其开源的推理模型,擅长处理复杂任务且可免费商用…...

生成模型速通(Diffusion,VAE,GAN)

基本概念 参考视频https://www.bilibili.com/video/BV1re4y1m7gb/?spm_id_from333.337.search-card.all.click&vd_sourcef04f16dd6fd058b8328c67a3e064abd5 生成模型其实是主要是依赖概率分布,对输入特征的概率密度函数建模 隐空间(latent space)…...

linux/android 如何获取当前系统启动时长

uptime 指令获取 trinket:/ # uptime12:03:31 up 3 min, 0 users, load average: 1.02, 0.68, 0.29...

Elasticsearch客户端工具初探--kibana

1 Kibana简介 Kibana是Elastic Stack(ELK)中的可视化工具,用于对Elasticsearch中存储的数据进行搜索、分析和可视化展示。它提供了直观的Web界面,支持日志分析、业务监控、数据探索等功能,广泛应用于运维监控、安全分析…...

深克隆和浅克隆(建造者模式,内含简版)

让我们来看一个例子: 设计一个客户类Customer,其中客户地址存储在地址类Address中,用浅克隆和深克隆分别实现Customer对象的复制并比较这两种克隆方式的异同。 代码实现 Customer类和Address类都是实现的Java 内置的 java.lang.Cloneable …...

吴恩达机器学习笔记复盘(十二)逻辑回归的梯度下降和拟合问题

梯度下降算法推导过程 一、逻辑回归模型基础 逻辑回归用于二分类问题,其假设函数为sigmoid函数: 其中,是模型参数向量,是特征向量。输出表示样本属于正类的概率。 二、损失函数 逻辑回归的损失函数采用 对数损失(交…...

OSPF五种报文分析(仅部分比较重要的)

OSPF五种报文分别是: hello报文,DBD数据库描述报文,LSR链路状态请求报文,LSU链路状态更新报文,LSACK链路状态确认包 以下是这五种报文的详细解读: 1. Hello报文 作用: 用于邻居的发现、建立和…...

Ubuntu 22.04 二进制安装单节点 MySQL

Ubuntu 22.04 二进制安装 MySQL LTS(长期支持版)完整教程 MySQL LTS 版本选择: 目前 MySQL 8.4.4 是长期支持(LTS)版本,持续更新并保持稳定。 下载版本: 你也可以在 MySQL 官方网站确认最新稳…...

python处理音频相关的库

1 音频信号采集与播放 pyaudio import sys import pyaudio import wave import timeCHUNK 1024 FORMAT pyaudio.paInt16 CHANNELS 1#仅支持单声道 RATE 16000 RECORD_SECONDS 3#更改录音时长#录音函数,生成wav文件 def record(file_name):try:os.close(file_…...

python+ffmpeg给音频添加背景音乐

说明: 我希望用python,将name.mp3这段录音文件,添加背景音乐,bg.mp3,然后生成新的文件 step1: 添加依赖 pip install pydubstep2:下载ffmpeg 1.打开windows powershell ,管理员运行 2.winget install ff…...

《TypeScript 面试八股:高频考点与核心知识点详解》

“你好啊!能把那天没唱的歌再唱给我听吗? ” 前言 因为主包还是主要学习js,ts浅浅的学习了一下,在简历中我也只会写了解,所以我写一些比较基础的八股,如果是想要更深入的八股的话还是建议找别人的。 Ts基…...

鸡生蛋还是蛋生鸡? 基于python的CCM因果关系计算

文章目录 前言一、安装二、代码1.全部代码2.结果展示总结前言 因果推断在科学研究中起着重要的作用,尤其是在复杂系统中,例如生态学、气候学、经济学等领域。在这些领域中,了解变量之间的因果关系可以帮助我们更好地理解系统的动态行为和相互作用。传统的相关性分析并不足以…...

PyBluez2 的详细介绍、安装指南、使用方法及配置说明

PyBluez2:Python 蓝牙开发的核心库 一、PyBluez2 简介 PyBluez2 是 Python 的开源蓝牙编程库,支持蓝牙 2.0、BLE(低功耗蓝牙)和传统蓝牙协议栈的开发。它提供了对蓝牙硬件适配器的底层控制,适用于设备发现、配对、数…...

鸿蒙HarmonyOS NEXT之无感监听

鸿蒙中存在一些无感监听,这些监听经过系统API封装使用很简单,但是对实际业务开发中有很重要,例如埋点业务、数据统计、行为上报、切面拦截等。 Navigation的页面切换 在鸿蒙中Navigation被用来作为路由栈进行页面跳转,如果你想知…...

质检LIMS系统在食品生产加工企业的应用 如何保证食品生产企业的安全

在食品生产加工领域,质量安全是贯穿全产业链的生命线。随着《食品安全法》对全过程追溯要求的深化,传统实验室管理模式已难以满足高效、精准的质量管控需求。质检实验室信息管理系统(LIMS)作为数字化升级的核心工具,正…...

linux中如何获取其他进程的退出状态

进程的退出状态至关重要,用wait系列函数,父进程可以捕捉到子进程的退出状态,若给定任意进程,其父进程已经确定,无法改变,自己如何获取到其退出状态呢。 可以用ptrace系统api attach到相应的进程&#xff0c…...

【android】补充

3.3 常用布局 本节介绍常见的几种布局用法,包括在某个方向上顺序排列的线性布局,参照其他视图的位置相对排列的相对布局,像表格那样分行分列显示的网格布局,以及支持通过滑动操作拉出更多内容的滚动视图。 3.3.1 线性布局Linea…...

Unix Domain Socket、IPC、RPC与gRPC的深度解析与实战

Unix Domain Socket、IPC、RPC与gRPC的深度解析与实战 引言 在分布式系统和本地服务通信中,进程间通信(IPC)与远程过程调用(RPC)是核心能力。本文将深入剖析 Unix Domain Socket(UDS)、IPC、RP…...

从 MySQL 到时序数据库 TDengine:Zendure 如何实现高效储能数据管理?

小T导读:TDengine 助力广州疆海科技有限公司高效完成储能业务的数据分析任务,轻松应对海量功率、电能及输入输出数据的实时统计与分析,并以接近 1 : 20 的数据文件压缩率大幅降低存储成本。此外,taosX 强大的 transform 功能帮助用…...

华为OD机试A卷 - 积木最远距离(C++ Java JavaScript Python )

最新华为OD机试 真题目录:点击查看目录 华为OD面试真题精选:点击立即查看 题目描述 小华和小薇一起通过玩积木游戏学习数学。 他们有很多积木,每个积木块上都有一个数字,积木块上的数字可能相同。 小华随机拿一些积木挨着排成一排,请小薇找到这排积木中数字相同且所处…...

Zerotier虚拟局域网在树莓派的应用和Syncthing配合Zerotier实现端到端文件同步

一、Zerotier的部署 1、官网注册账号 https://my.zerotier.com/i 2、选择linux系统,执行安装Zerotier curl -s https://install.zerotier.com | sudo bash3、将树莓派网络加入Zerotier zerotier-cli join DB62228FEDF6CE55DB62228FEDF6CE55 为你的Zerotier IP 需…...

C++设计模式-桥梁模式:从基本介绍,内部原理、应用场景、使用方法,常见问题和解决方案进行深度解析

一、桥梁模式基本介绍 桥梁模式(Bridge Pattern)是一种结构型设计模式,又叫桥接模式,其核心思想是将抽象部分与实现部分分离,使它们可以独立变化。这种模式通过组合代替继承,有效解决了多层继承导致的类爆…...

系统转换、系统维护、净室软件工程、构件软件工程(高软51)

系列文章目录 系统转换、系统维护、净室软件工程、构件软件工程 文章目录 系列文章目录前言一、系统转换二、系统维护三、净室软件工程四、基于构件的软件工程总结 前言 本节讲明遗留系统的系统转换、系统维护、净室软件工程、基于构件软件工程相关知识。 一、系统转换 就是讲…...

自然语言处理(13:RNN的实现)

系列文章目录 第一章 1:同义词词典和基于计数方法语料库预处理 第一章 2:基于计数方法的分布式表示和假设,共现矩阵,向量相似度 第一章 3:基于计数方法的改进以及总结 第二章 1:word2vec 第二章 2:word2vec和CBOW模型的初步实现 第二章 3:CBOW模型…...

Docker镜像迁移方案

Docker镜像迁移方案 文章目录 Docker镜像迁移方案一:背景二:操作方式三:异常原因参考: 一:背景 比如机器上已经有先有的容器,但是docker pull的时候是失败的二:操作方式 1、停止正在运行的容器…...

深度学习框架PyTorch——从入门到精通(10)PyTorch张量简介

这部分是 PyTorch介绍——YouTube系列的内容,每一节都对应一个youtube视频。(可能跟之前的有一定的重复) 创建张量随机张量和种子张量形状张量数据类型 使用PyTorch张量进行数学与逻辑运算简单介绍——张量广播关于张量更多的数学操作原地修改…...

Springboot 集成 Flowable 6.8.0

1. 创建 Spring Boot 项目 通过 Spring Initializr(https://start.spring.io/ )创建一个基础的 Spring Boot 项目,添加以下依赖: Spring WebSpring Data JPAMySQL DriverLombok(可选,用于简化代码&#x…...

Vue3 项目通过 docxtemplater 插件动态渲染 .docx 文档(带图片)预览,并导出

Vue3 项目通过 docxtemplater 插件动态渲染 .docx 文档(带图片)预览,并导出 预览安装插件示例代码项目目录结构截图实际效果截图 动态渲染 .docx 文档(带图片),预览、导出安装插件docx 模板文件内容完整代码…...

实验一、Linux环境下实现进度条小程序:深入解析核心实现与关键技术细节

目录 引言:为什么需要进度条?环境准备与项目结构分析原理剖析:从终端输出到动态刷新代码逐行解析(附完整代码) 4.1 头文件与宏定义4.2 进度条的动态构建逻辑4.3 关键转义字符:\r与\n的深度对比4.4 缓冲机制…...

生活电子常识——cmd不能使用anaconda的python环境,导致输入python打开应用商店

前言 电脑已经安装了anaconda,从自带的Anaconda Prompt (Anaconda3)中是可以识别python环境的,然而切换到cmd时,突然发现cmd中无法识别anaconda的python环境,竟然打开了应用商店让我安装Python,这当然是不对的。 解决 这是因为…...

TypeScript中的声明合并:与JavaScript的对比与实践指南

引言 在大型项目开发中,代码的可维护性和可扩展性至关重要。TypeScript作为JavaScript的超集,通过静态类型系统带来了更强大的代码组织能力。其中声明合并(Declaration Merging) 是TypeScript独有的重要特性,本文将深…...

数据结构初阶-二叉树链式

目录 1.概念与结构 2.二叉数链式的实现 2.1遍历规则 2.2申请内存空间 2.3手动构建一棵二叉树 2.4二叉树结点的个数 2.5二叉树叶子结点的个数 2.6二叉树第K层结点个数 2.7二叉树的高度 2.8二叉树中查找值为x的结点 2.9二叉树的销毁 3.层序遍历 3.1概念 3.2层序遍历…...

2024年认证杯SPSSPRO杯数学建模B题(第二阶段)神经外科手术的定位与导航全过程文档及程序

2024年认证杯SPSSPRO杯数学建模 B题 神经外科手术的定位与导航 原题再现: 人的大脑结构非常复杂,内部交织密布着神经和血管,所以在大脑内做手术具有非常高的精细和复杂程度。例如神经外科的肿瘤切除手术或血肿清除手术,通常需要…...

Linux程序性能分析

为什么程序会慢? 在深入工具和方法之前,我们先来聊聊为什么程序会慢。一个程序主要在三个方面消耗资源: CPU时间 - 计算太多、算法效率低 内存使用 - 内存泄漏、频繁申请释放内存 I/O操作 - 文件读写、网络通信太频繁 今天我们主要聚焦C…...

【开题报告+论文+源码】基于SpringBoot的智能安全与急救知识科普系统设计与实现

项目背景与意义 在全球范围内,安全与急救知识的普及已成为提升公众安全素养、减少意外伤害发生率、提高突发事件应对能力的重要举措。尤其是在当今社会,人们面临的生活、工作环境日益复杂,交通事故、火灾、溺水、突发疾病等各种意外事件的发生…...

Linux shift 命令使用详解

简介 在 Bash 脚本中,shift 命令用于将命令行参数向左移动,有效地丢弃第一个参数并将其他参数向下移动。 基础语法 shift [N]N(可选)→ 要移动的位置数。默认值为 1 示例用法 移动参数 #!/bin/bash echo "Before shift…...

【C++网络编程】第5篇:UDP与广播通信

一、UDP协议核心特性 1. UDP vs TCP ​特性 ​UDP​TCP连接方式无连接面向连接(三次握手)可靠性不保证数据到达或顺序可靠传输(超时重传、顺序控制)传输效率低延迟,高吞吐相对较低(因握手和确认机制&…...

C++11QT复习 (五)

文章目录 **Day6-2 成员访问运算符重载(2025.03.25)****1. 复习****2. 成员访问运算符重载****2.1 箭头运算符 (->) 重载****(1) 语法** **2.2 解引用运算符 (*) 重载****(1) 语法** **3. 代码分析****3.1 代码结构****3.2 代码解析****(1) Data 类**…...

Python项目-基于Python的网络爬虫与数据可视化系统

1. 项目简介 在当今数据驱动的时代,网络爬虫和数据可视化已成为获取、分析和展示信息的重要工具。本文将详细介绍如何使用Python构建一个完整的网络爬虫与数据可视化系统,该系统能够自动从互联网收集数据,进行处理分析,并通过直观…...

SpringCloud Zuul 使用教程

SpringCloud Zuul 使用教程 目录 Zuul 简介环境准备搭建 Zuul 网关 • 3.1 Maven 依赖 • 3.2 配置文件 • 3.3 启动类注解基本路由配置 • 4.1 简单路由 • 4.2 基于路径的路由 • 4.3 基于服务的路由Zuul 高级配置 • 5.1 过滤器配置 • 5.2 限流与熔断 • 5.3 负载均衡 •…...

介绍一款基于MinerU的PDF翻译工具

一。简介 Fast pdf translate是一款pdf翻译软件,基于MinerU实现pdf转markdown的功能,接着对markdown进行分割, 送给大模型翻译,最后组装翻译结果并由pypandoc生成结果pdf。 git地址: https://github.com/kv1830/fast…...

轻量级TLS反向代理工具TLS-reverse-proxy:打造安全通信桥梁

在数字化浪潮席卷全球的今天,数据隐私与传输安全已成为企业及个人的核心关切。TLS(传输层安全协议)作为互联网通信的"隐形卫士",承担着保护数据在传输过程中不被窃取或篡改的重要使命。然而,对于许多传统服务…...

SQL问题分析与诊断(8)——前提

8.1. 前提 与其他关系库类似,SQL Server中,当我们对存在性能问题的SQL语句进行分析和诊断时,除了获取该SQL语句本身外,还需要获取SQL语句相应的查询计划及其相关的数据环境。这里,所谓数据环境,具体是指SQ…...

关于cmd中出现无法识别某某指令的问题

今天来解决以下这个比较常见的问题,安装各种软件都可能会发生,一般是安装时没勾选注册环境变量,导致cmd无法识别该指令。例如mysql,git等,一般初学者可能不太清楚。 解决这类问题最主要的是了解环境变量的概念&#x…...

如何处理不同输入类型(例如邮箱、电话号码)的验证?

处理不同输入类型(如邮箱、电话号码)的验证可以通过多种方法实现,包括使用 HTML5 内置验证、JavaScript/jQuery 自定义验证和正则表达式。以下是一些常用的验证方法和示例。 1. 使用 HTML5 内置验证 HTML5 提供了一些内置的输入类型,可以自动处理基本的验证。 示例 <…...