HarmonyOS 组件通用属性之位置设置

本文 我们来说 通用属性中的位置设置

主要是针对组件的对齐方式 布局方向 显示位置
做过WEB开发的 对流式布局应该都不陌生 就是 一行放内容 不够放就换行

我们可以先这样写

@Entry
@Component
struct Index {build() {Row() {Column() {Stack(){Text("你好")Text("html")Text("java")}.width('100%').height('100%')}.width('100%')}.height('100%')}
}

Stack是一个用来布局的组件
运行代码
在这里插入图片描述
会发现 所有内容重叠在一起了
这个时候 我们可以用一个属性 align 设置对齐方式

我们直接在元素下面 输入 .align(Alignment.); 就会弹出对齐方式的提示
在这里插入图片描述
比较明显的 top center bottom
上中下 起始点的提示

我们先来个top
但我们要 TopStart
这样 内容就顶到左上角去了
在这里插入图片描述
如果是 top 会在顶部 但会居中
在这里插入图片描述
TopEnd 简单说 右上角对齐
在这里插入图片描述
然后 直接 Start
简单说 水平左对齐 垂直居中
在这里插入图片描述
BottomStart 左下角
在这里插入图片描述
其他几个也基本都是一个意思
center 就是双方向居中
也就是 默认这个效果
在这里插入图片描述
然后 我们来看下一个属性 我们改写代码如下

@Entry
@Component
struct Index {build() {Row() {Column() {Row(){Text("你好")Text("html")Text("java")}.width('100%').height('100%')}.width('100%')}.height('100%')}
}

先用 Row 元素
在这里插入图片描述
我们还是 在元素下面 加上 .direction(Direction.) 就会弹出它的属性提示了
在这里插入图片描述
Auto 就是 自动 也是它的默认值
Ltr 这个简单说 从左至右 也是默认的这个效果
Rtl 从右至左 我们加上 他就反过来了
在这里插入图片描述
然后 来看 position
学习过 WEB端的定位的朋友 看到这个会比较熟悉
我们将代码改成这样

@Entry
@Component
struct Index {build() {Row() {Column() {Row(){Text("你好")Text("html")Text("java")}.width('100%').height('100%')}.width('100%')}.height('100%')}
}

一个行容器 Row 里面放了多个 Text组件
在这里插入图片描述
我们可以这样写

Row(){Text("你好").position({x: 0,y: 0})Text("html").position({x: 30,y: 20})Text("java").position({x: "70%",y: "50%"})
}.width('100%')
.height('100%')

鸿蒙的 position也是定位语法 他是 x y两个轴方向控制 针对自己的父元素
例如 Text(“你好”).position({x: 0,y: 0})
x 0 就是 最左边 y 0就是最上面 所以这个元素就在左上角
然后 从第三个可以看出 我们这个是可以用百分比的
它的位置是相对父元素的
在这里插入图片描述
markAnchor 这个是相对于自身的
我们先将代码改成这样

@Entry
@Component
struct Index {build() {Row() {Column() {Stack({alignContent: Alignment.TopStart}){Text("你好")Text("html")Text("java")}.width('100%').height('100%')}.width('100%')}.height('100%')}
}

我们用个 Stack 设置 TopStart 让全部元素到 左上角
在这里插入图片描述
我们可以这样写

Stack({alignContent: Alignment.TopStart}){Text("你好").markAnchor({x: 0,y: 0})Text("html").markAnchor({x: -20,y: -30})Text("java").markAnchor({x: -10,y: -50})
}.width('100%')
.height('100%')

这个markAnchor 它是相对于自己去移动的 说个词 相对定位 当然 它不会留自己原来的位置 但是 它是相对自己原来的位置 移动的 而且 它的 x y是反的 x 正值向左 负值向右 y正值向上 负值向下
在这里插入图片描述
最后一个 offset
我们可以先这样写

@Entry
@Component
struct Index {build() {Row() {Column() {Row(){Text("你好").width(100)Text("html").width(100)Text("java").width(100)}.width('100%').height('100%')}.width('100%')}.height('100%')}
}

在这里插入图片描述
然后 我们给子元素都设置 offset

 Row(){Text("你好").width(100).offset({x: 0,y: 0})Text("html").width(100).offset({x: 0,y: 0})Text("java").width(100).offset({x: 0,y: 0})
}.width('100%')
.height('100%')

我们会发现 并没有什么明显的效果
在这里插入图片描述
但我们改一改
将第二个的 x 改 50 你会发现 它自己会相对位移 但他不会影响其他元素 自己动
在这里插入图片描述
你把 y改一下 会发现一个很奇葩的事
x是正的 正右 负左 y轴 反的 正下 负上
在这里插入图片描述

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

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

相关文章

Springboot整合MQ学习记录

Mq介绍 RabbitMQ是由erlang语言开发,基于AMQP(Advanced Message Queue 高级消息队列协议)协议实现的消息队列,它是一种应用程序之间的通信方法,消息队列在分布式系统开发中应用非常广泛。支持Windows、Linux/Unix、MA…

<HarmonyOS主题课>1~3课后习题汇总

<HarmonyOS第一课>1~10课后习题汇总 1使用DevEco Studio高效开发 单选题 用哪一种装饰器修饰的组件可作为页面入口组件?(B) A. ComponentB. EntryC. PreviewD. Builder ArkTS Stage模型支持API Version 9&#xf…

智能座舱的下一个价值“爆点”——让“光”更智能

汽车智能化快速升级,智能座舱作为人机交互的主要窗口,交互模态、用户体验也呈现多维度升级。 例如,今年下半年上市的多款高端智能车型纷纷基于高性能座舱硬件平台,集成了AR-HUD、DMS/OMS等高阶功能,同时结合超大屏/多…

简单介绍Java 的内存泄漏

java最明显的一个优势就是它的内存管理机制。你只需简单创建对象,java的垃圾回收机制负责分配和释放内存。然而情况并不像想像的那么简单,因为在Java应用中经常发生内存泄漏。 本教程演示了什么是内存泄漏,为什么会发生内存泄漏以及如何预防…

SpringMVC通用后台管理系统源码

整体的SSM后台管理框架功能已经初具雏形,前端界面风格采用了结构简单、 性能优良、页面美观大的Layui页面展示框架 数据库支持了SQLserver,只需修改配置文件即可实现数据库之间的转换。 系统工具中加入了定时任务管理和cron生成器,轻松实现系统调度问…

Glide加载不出图片与请求浏览器资源时中文转码问题

报错代码如图:Image load failed: Failed to load resourse 首先确保你的图片 URL 地址是正确的,可以通过在浏览器中直接访问这个 URL 来测试。另外,确保 URL 地址不包含特殊字符或空格,以免影响加载。 然后确定依赖库没有问题&am…

地平面--高速布线

https://baijiahao.baidu.com/s?id1764139038516816855&wfrspider&forpc 概念 回顾传输线,由任意两条有一定长度的导线组成,一条为信号路径,一条为返回路径。基本电路理论告诉我们,信号是由电流传播的,明确的…

目标检测-One Stage-YOLOv2

文章目录 前言一、YOLOv2的网络结构和流程二、YOLOv2的创新点预处理网络结构训练 总结 前言 根据前文目标检测-One Stage-YOLOv1可以看出YOLOv1的主要缺点是: 和Fast-CNN相比,速度快,但精度下降。(边框回归不加限制)…

高并发如何保证接口的幂等性?

前言 接口幂等性问题,对于开发人员来说,是一个跟语言无关的公共问题。本文分享了一些解决这类问题非常实用的办法,绝大部分内容我在项目中实践过的,给有需要的小伙伴一个参考。 不知道你有没有遇到过这些场景: 有时我…

Docker(八)Python+旧版本chrome+selenium+oss2+fastapi镜像制作

目录 一、背景二、能力三、核心流程图四、制作镜像1.资源清单2.Dockerfile3.制作镜像 五、启动测试 一、背景 近几年我们线下的创业团队已从零到一开发过好几个小程序项目,都是和体育相关。其中生成海报分享图片好像都是不可或缺的功能。之前的项目老板给的时间都比…

如何让CHAT使用python绘制概率密度图像?

问CHAT:用python绘制概率密度图像 CHAT回复:你可以使用Python的matplotlib库和numpy库进行概率密度的绘制。 以下是一个简单的例子: python import numpy as np import matplotlib.pyplot as plt #随机生成1000个正态分布的数 data np.rand…

《微机原理与应用》期末考试题库(附答案解析)

第1章 微型计算机概述 1.微型计算机的硬件系统包括___A _____。 A.控制器、运算器、存储器和输入输出设备 B.控制器、主机、键盘和显示器 C.主机、电源、CPU和输入输出 D.CPU、键盘、显示器和打印机 2.微处…

安装Keras用于影像分割

conda create -n tfkeras2024 python3.9.18 activate tfkeras2024 pip install tensorflow-gpu2.9.0 pip install keras pip install scipy pip install ipykernel ipython python -m ipykernel install --name tfkeras2024 删除环境conda remove -n tfkeras2024 --all

构建高效秒杀系统的设计原理及注意事项

😄 19年之后由于某些原因断更了三年,23年重新扬帆起航,推出更多优质博文,希望大家多多支持~ 🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…

G4周:CGAN,手势生成

本文为🔗365天深度学习训练营 中的学习记录博客 原作者:K同学啊|接辅导、项目定制 我的环境: 1.语言:python3.7 2.编译器:pycharm 3.深度学习框架Pytorch 1.8.0cu111 一、CGAN介绍 条件生成对抗网络(…

transforms图像增强(一)

一、数据增强 数据增强(Data Augmentation)是一种常用的数据预处理技术,通过对训练集进行各种变换和扩增操作,可以增加训练数据的多样性和丰富性,从而提高模型的泛化能力。 数据增强的目的是通过对训练集中的图像进行…

安装PyTorch及环境配置(应用于Python上的YOLO)

这个基本都是Bilibili网站里面叫“小手丫子”up的视频教程,此前自己需要装了好几次又卸载了好几次,现在根据视频教学整理出来自己所理解的文档。 注意事项 1.安装的pycharm版本和anaconda版本无要求。 2.运行pycharm尽量以管理员身份运行。 3.Cuda是独…

使用CentOS 7.6搭建HTTP隧道代理服务器

在现代网络环境中,HTTP隧道代理服务器因其灵活性和安全性而受到广泛关注。CentOS 7.6,作为一个稳定且功能强大的Linux发行版,为搭建此类服务器提供了坚实的基础。 首先,我们需要明确HTTP隧道代理的基本原理。HTTP隧道代理允许客户…

Mac解决node-sass: Command failed 问题

1.以为Command failed 错误是因为缺少依赖项或者版本不兼容导致的(不适用我) 此项目的package版本,node版本14.21.3为版本对应正确 "node-sass": "^4.13.0","sass": "^1.24.2","sass-loader&q…

【Pytorch】学习记录分享10——TextCNN用于文本分类处理

【Pytorch】学习记录分享10——PyTorchTextCNN用于文本分类处理 1. TextCNN用于文本分类2. 代码实现 1. TextCNN用于文本分类 具体流程: 2. 代码实现 # coding: UTF-8 import torch import torch.nn as nn import torch.nn.functional as F import numpy as np…