鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：位置设置）

news2024/12/25 9:13:56

设置组件的对齐方式、布局方向和显示位置。

说明：

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

align

align(value: Alignment)

设置容器元素绘制区域内的子元素的对齐方式。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueAlignment是设置容器元素绘制区域内的子元素的对齐方式。
只在Stack、Button、Marquee、StepperItem、text、TextArea、TextInput、FolderStack中生效，其中和文本相关的组件Marquee、text、TextArea、TextInput的align结果参考textAlign。
不支持textAlign属性的组件则无法设置水平方向的文字对齐。
默认值：Alignment.Center

direction

direction(value: Direction)

设置容器元素内主轴方向上的布局。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueDirection是设置容器元素内主轴方向上的布局。
例：Column组件的主轴为纵轴。
默认值：Direction.Auto

position

position(value: Position)

绝对定位，设置子元素左上角相对于父容器左上角偏移位置。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuePosition是绝对定位，设置子元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不参与父容器布局，即不占位，仅在绘制时进行位置调整。
适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。

markAnchor

markAnchor(value: Position)

设置子元素在位置定位时的锚点。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuePosition是设置子元素在位置定位时的锚点，以元素左上角作为基准点进行偏移。通常配合position和offset属性使用，单独使用时，效果类似offset
API version 9及以前，默认值为：
{
x: 0,
y: 0
}
API version 10：无默认值。

offset

offset(value: Position)

相对定位，设置子元素相对于自身的额外偏移量。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuePosition是相对定位，设置子元素相对于自身的额外偏移量。设置该属性后，子组件正常参与父容器布局，依然会占位，在绘制时基于父容器给予的offset做一次额外的偏移。
API version 9及以前，默认值为：
{
x: 0,
y: 0
}
API version 10：无默认值。

alignRules9+

alignRules(value: AlignRuleOption)

指定设置在相对容器中子组件的对齐规则，仅当父容器为RelativeContainer时生效。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueAlignRuleOption是指定设置在相对容器中子组件的对齐规则。

AlignRuleOption对象说明

从API version 9开始，该接口支持在ArkTS卡片中使用。

名称类型描述
left{ anchor: string, align: HorizontalAlign }设置左对齐参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
right{ anchor: string, align: HorizontalAlign }设置右对齐参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
middle{ anchor: string, align: HorizontalAlign }设置横向居中对齐方式的参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
top{ anchor: string, align: VerticalAlign }设置顶部对齐的参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
bottom{ anchor: string, align: VerticalAlign }设置底部对齐的参数。
- anchor：设置作为锚点的组件的id值。
- align：设置相对于锚点组件的对齐方式。
center{ anchor: string, align: VerticalAlign }设置纵向居中对齐方式的参数。
bias{ horizontal: number, vertical: number }设置组件在锚点约束下的偏移参数，其值为到左/上侧锚点的距离与锚点间总距离的比值。
- horizontal：水平方向上的bias值。
- vertical：垂直方向上的bias值。
- 当子组件的width可以确定并且有2个水平方向的锚点时生效。
- 当子组件的height可以确定并且有2个垂直方向的锚点时生效。
默认值：{
horizontal: 0.5,
vertical: 0.5
}。

示例

示例1

// xxx.ets
@Entry
@Component
struct PositionExample1 {
  build() {
    Column() {
      Column({ space: 10 }) {
        // 元素内容<元素宽高，设置内容在与元素内的对齐方式
        Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Stack() {
          Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C)
          Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9)
        }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4)
        .align(Alignment.BottomEnd)
        Stack() {
          Text('top start')
        }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4)
        .align(Alignment.TopStart)

        // 父容器设置direction为Direction.Ltr，子元素从左到右排列
        Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%')
        Row() {
          Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
          Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
          Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3)
          Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C)
        }
        .width('90%')
        .direction(Direction.Ltr)
        // 父容器设置direction为Direction.Rtl，子元素从右到左排列
        Row() {
          Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End)
          Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End)
          Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End)
          Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End)
        }
        .width('90%')
        .direction(Direction.Rtl)
      }
    }
    .width('100%').margin({ top: 5 })
  }
}

align.png

示例2

// xxx.ets
@Entry
@Component
struct PositionExample2 {
  build() {
    Column({ space: 20 }) {
      // 设置子组件左上角相对于父组件左上角的偏移位置
      Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%')
      Row() {
        Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center)
        Text('2 position(30, 10)')
          .size({ width: '60%', height: '30' })
          .backgroundColor(0xbbb2cb)
          .border({ width: 1 })
          .fontSize(16)
          .align(Alignment.Start)
          .position({ x: 30, y: 10 })
        Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center)
        Text('4 position(50%, 70%)')
          .size({ width: '50%', height: '50' })
          .backgroundColor(0xbbb2cb)
          .border({ width: 1 })
          .fontSize(16)
          .position({ x: '50%', y: '70%' })
      }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })

      // 相对于起点偏移，其中x为最终定位点距离起点水平方向间距，x>0往左，反之向右。
      // y为最终定位点距离起点垂直方向间距，y>0向上，反之向下
      Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%')
      Stack({ alignContent: Alignment.TopStart }) {
        Row()
          .size({ width: '100', height: '100' })
          .backgroundColor(0xdeb887)
        Text('text')
          .fontSize('30px')
          .textAlign(TextAlign.Center)
          .size({ width: 25, height: 25 })
          .backgroundColor(Color.Green)
          .markAnchor({ x: 25, y: 25 })
        Text('text')
          .fontSize('30px')
          .textAlign(TextAlign.Center)
          .size({ width: 25, height: 25 })
          .backgroundColor(Color.Green)
          .markAnchor({ x: -100, y: -25 })
        Text('text')
          .fontSize('30px')
          .textAlign(TextAlign.Center)
          .size({ width: 25, height: 25 })
          .backgroundColor(Color.Green)
          .markAnchor({ x: 25, y: -25 })
      }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed })

      // 相对定位，x>0向右偏移，反之向左，y>0向下偏移，反之向上
      Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%')
      Row() {
        Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center)
        Text('2  offset(15, 30)')
          .size({ width: 120, height: '50' })
          .backgroundColor(0xbbb2cb)
          .border({ width: 1 })
          .fontSize(16)
          .align(Alignment.Start)
          .offset({ x: 15, y: 30 })
        Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
          .textAlign(TextAlign.Center)
        Text('4 offset(-5%, 20%)')
          .size({ width: 100, height: '50' })
          .backgroundColor(0xbbb2cb)
          .border({ width: 1 })
          .fontSize(16)
          .offset({ x: '-5%', y: '20%' })
      }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
    }
    .width('100%').margin({ top: 25 })
  }
}

position.png

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

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

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

相关文章

判断子序列[简单]

判断子序列[简单]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给定字符串s和t&#xff0c;判断s是否为t的子序列。字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如ace是abcde的一个子序列&#xff0c…
阅读更多...
html样式排版

html样式排版

<template><div class"box"><div class"header">头部</div><div class"main"><div class"left">菜单</div><div class"right"><div class"right-contentr"&g…
阅读更多...
C++菱形继承_多态

C++菱形继承_多态

&#x1f493;博主CSDN主页:麻辣韭菜-CSDN博客&#x1f493;   ⏩专栏分类&#xff1a;http://t.csdnimg.cn/362T6⏪   &#x1f69a;代码仓库:要相信光/C高阶&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多C知识   &#x1f51d;&#x1f51d; 目录 前言…
阅读更多...
容联云入选IDC生成式AI图谱，多个案例被评典型应用

容联云入选IDC生成式AI图谱，多个案例被评典型应用

随着生成式AI进入商业化初期&#xff0c;国际数据公司&#xff08;IDC&#xff09;于近日发布了《IDC Market Glance: 中国生成式AI市场概览》报告&#xff0c;报告分析了当前市场的整体情况以及市场格局&#xff0c;通过中国生成式AI市场生态图谱V1.0和代表厂商分析&#xff0…
阅读更多...
BUUCTF---另外一个世界1

BUUCTF---另外一个世界1

1.这是一道杂项题&#xff0c;也是我觉得最值得记录的一道题。 2.话不多说&#xff0c;题目描述&#xff08;真的是另一个世界&#xff09; 3.下载附件&#xff0c;是一张图片 4.尝试了查看属性&#xff0c;以及在记事本中打开看看有没有什么有用的信息&#xff0c;发现没什么…
阅读更多...
C# WPF如何自定义控件ComboBox

C# WPF如何自定义控件ComboBox

在WPF开发中&#xff0c;经常遇到需要修改原生ComboBox的控件样式。 对于新手来说&#xff0c;修改控件样式比较麻烦。 修改的最终样式如下&#xff1a; 你可以利用如下代码模板&#xff0c;修改为你自己想要的样式。 <Style TargetType"{x:Type ComboBox}"&…
阅读更多...
CSP-202112-3-登机牌条码

CSP-202112-3-登机牌条码

CSP-202112-3-登机牌条码 解题思路 一、.处理大小写和数字 初始化变量&#xff1a;flag: 用来标识当前处理的字符类型&#xff0c;0代表大写字母&#xff0c;1代表小写字母&#xff0c;2代表数字。 大小写字母和数字的处理&#xff1a; 小写字母(a < it && it &l…
阅读更多...
新一代湖仓集存储，多模型统一架构，高效挖掘数据价值

新一代湖仓集存储，多模型统一架构，高效挖掘数据价值

星环科技TDH一直致力于给用户带来高性能、高可靠的一站式大数据基础平台&#xff0c;满足对海量数据的存储和复杂业务的处理需求。 同时在易用性方面持续深耕&#xff0c;降低用户开发和运维成本&#xff0c;让数据处理平民化&#xff0c;助力用户以更便捷、高效的方式去挖掘数…
阅读更多...
基带信号处理设计原理图：2-基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板

基带信号处理设计原理图：2-基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板

基于6U VPX的双TMS320C6678Xilinx FPGA K7 XC7K420T的图像信号处理板 综合图像处理硬件平台包括图像信号处理板2块&#xff0c;视频处理板1块&#xff0c;主控板1块&#xff0c;电源板1块&#xff0c;VPX背板1块。 一、板卡概述 图像信号处理板包括2片TI 多核DSP处理…
阅读更多...
anaconda简介以及安装（Windows）

anaconda简介以及安装（Windows）

介绍 Anaconda是一个开源的Python发行版本&#xff0c;它是一个打包的集合&#xff0c;里面预装了conda、Python、众多packages、科学计算工具等。Anaconda的目的是方便使用Python进行数据科学研究&#xff0c;它涵盖了数据科学领域常见的Python库&#xff0c;并且自带了专门用…
阅读更多...
Linux之gcc和makefile的使用详细解析

Linux之gcc和makefile的使用详细解析

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言进阶 数据结构初阶 Linux C初阶 算法 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂 目录 一.gcc/g安装 二.gcc运行代码 三.gcc是如何完成的 3.1预处…
阅读更多...
matlab图像仿射变换

matlab图像仿射变换

在Matlab中进行图像的仿射变换通常使用imwarp函数。下面是一个简单的示例代码&#xff0c;以及对应的说明&#xff1a; % 读取图像 image imread(lena.png);% 设置仿射变换矩阵 theta 30; % 旋转角度 scale_factor 1.5; % 缩放因子 shear_factor 0.5; % 剪切因子% 构造仿射…
阅读更多...
Ps：海绵工具

Ps：海绵工具

海绵工具 Sponge Tool可用于调整图像中特定区域的饱和度&#xff0c;常用于增加或减少颜色的饱和度。 快捷键&#xff1a;O 在特别的灰度图像上&#xff0c;则可用于调整对比度&#xff0c;这可以开发出更多的创意技巧。 ◆ ◆ ◆ 常用操作方法与技巧 1、海绵工具主要用于调整…
阅读更多...
二百二十五、海豚调度器——用DolphinScheduler调度执行Flume数据采集任务

二百二十五、海豚调度器——用DolphinScheduler调度执行Flume数据采集任务

一、目的 数仓的数据源是Kafka&#xff0c;因此离线数仓需要用Flume采集Kafka中的数据到HDFS中 在实际项目中&#xff0c;不可能一直在Xshell中启动Flume任务&#xff0c;一是项目的Flume任务很多&#xff0c;二是一旦Xshell页面关闭Flume任务就会停止&#xff0c;这样非常不…
阅读更多...
【数据结构与算法】动态规划法解题20240302

【数据结构与算法】动态规划法解题20240302

这里写目录标题 一、198. 打家劫舍1、动态规划五部曲 二、213. 打家劫舍 II 一、198. 打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间…
阅读更多...
iOS消息发送流程

iOS消息发送流程

Objc的方法调用基于消息发送机制。即Objc中的方法调用&#xff0c;在底层实际都是通过调用objc_msgSend方法向对象消息发送消息来实现的。在iOS中&#xff0c; 实例对象的方法主要存储在类的方法列表中&#xff0c;类方法则是主要存储在原类中。 向对象发送消息&#xff0c;核心…
阅读更多...
vscode 引入外部依赖包

vscode 引入外部依赖包

背景 我要在vscode中写一些antlr代码生成的cpp代码&#xff0c;但是在引入头文件#include "antlr4-runtime.h"的时候&#xff0c;出现报错&#xff0c;显示没有这个头文件&#xff0c;显然这是我们没有导入相关的包&#xff0c;因此我首先尝试了将antlr4的依赖源码在…
阅读更多...
超链接和导航：网页互动的艺术

超链接和导航：网页互动的艺术

引言 在上一篇文章中&#xff0c;我们探索了HTML中多媒体的交互体验&#xff0c;本次我们将学习如何通过超链接和导航栏提升网页的用户体验&#xff0c;让用户在网页访问时更高效&#xff1b; 一、介绍 在这个信息爆炸的时代&#xff0c;如何让用户在第一时间找到他们需要的信…
阅读更多...
相机格式化了还能恢复照片吗？内存卡数据恢复方法

相机格式化了还能恢复照片吗？内存卡数据恢复方法

相机已成为我们记录生活、工作和学习的重要工具。然而当相机意外格式化后&#xff0c;许多珍贵的照片可能会瞬间消失&#xff0c;这无疑给我们的生活和工作带来不小的困扰。那么相机格式化后&#xff0c;我们是否还有机会找回那些丢失的照片呢&#xff1f; 首先我们需要了解相机…
阅读更多...
CSS的弹性布局

CSS的弹性布局

CSS 的弹性布局 前言 前端中为了实现页面的布局效果&#xff0c;采用的一个技术手段&#xff0c;它在前端开发的技术场景是非常广泛的 实现上述区域的页面相关的布局效果&#xff0c;就可以使用弹性布局来完成 弹性布局(flex布局) flex 是 flexible box 的缩写&#xff0c;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023