【鸿蒙学习笔记】位置设置・position・绝对定位

news2024/9/21 12:31:59

官方文档:位置设置

目录标题

  • position:绝对定位,确定子组件相对父组件的位置。

position:绝对定位,确定子组件相对父组件的位置。

正→

@Entry
@Component
struct Loc_position {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Column({ space: 20 }) {
        Row() {
          Text('1').size({ width: '30%', height: '50' }).backgroundColor(Color.Red)
          Text('2').size({ width: '45%', height: '50' }).backgroundColor(Color.Gray)
          Text('3').size({ width: '50', height: '30' }).backgroundColor(Color.Orange)
            .position({ x: 0, y: 0 }) // 坐标(0,0)
          Text('4').size({ width: '60%', height: '30' }).backgroundColor(Color.Yellow)
            .position({ x: 50, y: 30 }) // 坐标(50,30)
          Text('5').size({ width: '20', height: '20' }).backgroundColor(Color.Red)
            .position({ x: -20, y: -20 }) // 坐标(-20,-30)
          Text('6').size({ width: '50%', height: '50' }).backgroundColor(Color.Pink)
            .position({ x: '50%', y: '70%' }) // 坐标
        }.width('80%').height(200).border({ width: 1, style: BorderStyle.Dashed })
      }.width('100%').margin({ top: 30 })
    }.width('100%')
  }
}

在这里插入图片描述

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

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

相关文章

汇编语言程序设计-8-汇编语言快速查阅

8. 汇编语言快速查阅 文章目录 8. 汇编语言快速查阅常用资料寄存器含义标志寄存器的含义Debug的使用汇编语法 本章列出一些需要经常查阅的知识点。 常用资料 参考视频:烟台大学贺利坚老师的网课《汇编语言程序设计系列专题》,或者是B站《汇编语言程序设计…

vue学习day08-v-model详解、sync修饰符、ref和$refs获取dom组件、Vue异步更新和$nextTick

25、v-model详解 (1)v-model原理 1)原理: v-model本质上是一个语法糖,比如:在应用于输入框时,就是value属性与input事件的合写。 2)作用 ①数据变,视图变 ②视图变&#xff0c…

【 C++ 】详解 (类和对象) 继承

继承的概念及定义 继承的概念 继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有类特性的基础上进行扩展,增加功能,这样产生新的类,称派生类。继承呈现了面向对象 程序设计的层次结构…

【Linux】Linux的账号和用户组

管理员的工作中,相当重要的一环就是【管理账号】。 因为整个系统都是你在管理,并且所有一般用户的账号申请,都必须要通过你的协助才行,所以你就必须要了解一下如何管理好一个服务器主机的账号。 在管理Linux主机的账号时&#xff…

Python应用开发——30天学习Streamlit Python包进行APP的构建(15):优化性能并为应用程序添加状态

Caching and state 优化性能并为应用程序添加状态! Caching 缓存 Streamlit 为数据和全局资源提供了强大的缓存原语。即使从网络加载数据、处理大型数据集或执行昂贵的计算,它们也能让您的应用程序保持高性能。 本页仅包含有关 st.cache_data API 的信息。如需深入了解缓…

AG32 的MCU与FPGA的主频可以达到568MHz吗

Customers: AG32/ AGRV2K 这个芯片主频和定时器最高速度是多少?用户期望 CPLD计时器功能0.1ns以下。 AGM RE: CPLD做不到 0.1ns的速率,这个需要10G以上的时钟。 那AGRV2K最高多少MHz呢? 一般200MHZ比较容易实现。 进一步说明&#xff1…

智慧校园服务监控功能

智慧校园系统中的服务监控功能,扮演着维护整个校园数字化生态系统稳定与高效运作的重要角色。它如同一位全天候的守护者,通过实时跟踪、分析并响应系统各层面的运行状况,确保教学、管理等核心业务流程的顺畅进行。 服务监控功能覆盖了智慧校园…

自动控制——变速积分的PID控制

变速积分的PID控制 PID控制(Proportional-Integral-Derivative Control)是工业控制中最常用的控制算法之一。标准的PID控制器由比例(P)、积分(I)和微分(D)三个部分组成,…

连锁直营店小程序赋能多店如何管理

如商超便利店卖货线下场景,也有不少品牌以同城多店和多地开店经营为主,获取店铺周围客户和散流,如今线上重要性凸显,品牌电商发展是经营的重要方式之一,也是完善同城和外地客户随时便捷消费的方式之一。 多个门店管理…

Js 前置,后置补零的原生方法与补字符串 padStart及padEnd

在工作中,遇到了需要将不满八位的一个字符串进行后补0的操作,所以就在网上学习了关于js原生补充字符串的方法,然后用这篇博客记录下来。 目录 前置补充字符串 String.prototype.padStart() 后置补充字符串String.prototype.padEnd() 前置补…

OpenGL笔记十之Shader类的封装

OpenGL笔记十之Shader类的封装 —— 2024-07-10 晚上 bilibili赵新政老师的教程看后笔记 code review! 文章目录 OpenGL笔记十之Shader类的封装1.运行2.目录结构3.main.cpp4.application4.1.CMakeLists.txt4.2.Application.h4.3.Application.cpp 5.assets5.1.shaders&#xf…

虚拟机:VMware功能,安装与使用

目录 一、虚拟机介绍 二、VMware 1.介绍 2.安装 (1)根据提示按步骤安装​编辑 (2)更改软件的安装地址​编辑 (3)根据自己的需求选择是否需要软件更新​编辑 (4)根据需求选择…

20240715 每日AI必读资讯

🌐 代号“ 草莓 ”,OpenAI 被曝研发新项目:将 AI 推理能力提至新高度 - OpenAI 公司被曝正在研发代号为“ 草莓 ”的全新项目,进一步延伸去年 11 月宣布的 Q* 项目,不断提高 AI 推理能力,让其更接近人类的…

27.数码管的驱动,使用74HC595移位寄存器芯片

PS:升腾A7pro系列FPGA没有数码管外设,因此以AC620FPGA为例展开实验。 (1)共阳极数码管和共阴极数码管示意图: AC620中的数码管属于共阳极数码管,段选端口(dp,g,f,e,d,c,b,a)低电平即可点亮led。人眼的视觉…

Flink CDC 同步表至Paimon 写数据流程,write算子和commit算子。

Flink CDC 同步表至Paimon 写数据流程,write算子和commit算子。(未吃透版) 流程图 一般基本flink cdc 任务同步数据至paimon表时包含3个算子,source、write、global commit。 source端一般是flink connector实现的连接源端进行获取数据的过程,本文探究的是 source算子获…

算法学习笔记(8.6)-编辑距离问题

目录 Question: 动态规划思路: 第一步:思考每轮的决策,定义状态,从而得到dp表 第二步:找出最优子结构,进而推导出状态转移方程 第三步:确定边界条件和状态转移顺序 代码实现&#xf…

BUUCTF逆向wp [FlareOn4]login

按老规矩先查壳&#xff0c;但本题是html文件&#xff0c;查壳会报错 在网上查了一下&#xff0c;可以用vscode查看源代码&#xff0c;我们用VS code打开。 <!DOCTYPE Html /> <html> <head> <title>FLARE On 2017</title> </head> <…

d3dcompiler_47.dll缺失怎么修复,一步步分析d3dcompiler_47.dll文件

d3dcompiler_47.dll缺失怎么修复&#xff1f;快速教大家解决出现d3dcompiler_47.dll问题的方法&#xff0c;一步步教大家快速有效的将丢失的d3dcompiler_47.dll如何修复。 一步步修复d3dcompiler_47.dll分析 1. 重新安装受影响的程序 如果是特定程序报告缺少d3dcompiler_47.d…

Vue实现滚动元素始终固定在最底部

1. 应用场景——聊天 在聊天的时候&#xff0c;展示聊天内容的元素是可以滚动的&#xff0c;通过上下滚动来查看过往消息。不过在首次打开聊天页面以及发送新消息时需要固定在滚动的最底部以及时展示最新的消息&#xff0c;这样才能获得比较好的用户体验。 效果&#xff1a; …

每日一练,java

目录 描述示例 总结 描述 题目来自牛客网 •输入一个字符串&#xff0c;请按长度为8拆分每个输入字符串并进行输出&#xff1b; •长度不是8整数倍的字符串请在后面补数字0&#xff0c;空字符串不处理。 输入描述&#xff1a; 连续输入字符串(每个字符串长度小于等于100) 输…