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

news/2024/7/20 22:32:26 标签: harmonyos, 华为, android, 鸿蒙, 鸿蒙系统, ios, ArkTS

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

说明：

从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多媒体技术

  • 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.niftyadmin.cn/n/5401590.html

相关文章

RedisTemplate 序列化成功，反序列化失败List, Set, Map失败

RedisTemplate 序列化成功，反序列化失败List, Set, Map失败

RedisTemplate 序列化成功&#xff0c;反序列化失败List, Set, Map失败 异常信息RedisTemplate配置异常原因错误代码示例解决方法 序列化成功&#xff0c;反序列化失败 异常信息 Caused by: com.fasterxml.jackson.databind.exc.InvalidTypeIdException: Could not resolve ty…
阅读更多...
rust学习（tokio协程分析一）

rust学习（tokio协程分析一）

代码&#xff1a; async fn doAsyncPrint(v:u32) {println!("start doAsyncPrint,v is {},tid is {:?}",v,system::myTid());//thread::sleep(Duration::from_secs(1));time::sleep(Duration::from_secs(10)).await;println!("end,v is {},tid is {:?}"…
阅读更多...
spring boot整合cache使用memcached 优化将配置信息放入 application中管理

spring boot整合cache使用memcached 优化将配置信息放入 application中管理

上文 spring boot整合cache使用memcached 我们简单做了个 spring boot 整合cache 使用 memcached 缓存的案例 但 我们是将地址这类信息 放在了config 目录下的一个 配置类中了 这样 可维护性肯定是很低的 其实 memcached 是有一系列配置的 我们还是正确将 配置信息 写进 appli…
阅读更多...
如何利用Flutter来写后端 服务端应用

如何利用Flutter来写后端 服务端应用

前言 Flutter是谷歌推出的一款跨平台开发框架&#xff0c;现在属于此领域star最多的框架&#xff0c;其被广泛应用于构建前台界面&#xff0c;但或许很少人知道&#xff0c;他也可以写后端应用。 本文主角 flutter非常著名的getx库推出的get server jonataslaw/get_server:…
阅读更多...
构造pop链

构造pop链

反序列化视频笔记 第一步&#xff1a;找到目标触发echo调用$flag 第二步&#xff1a;触发_invoke函数调用appeng函数$varflag.php&#xff08;把对象当成函数&#xff09; 第三步&#xff1a;给$p赋值为对象&#xff0c;即function成为对象Modifier却被当成函数调用&#xff…
阅读更多...
【前端素材】推荐优质后台管理系统网页my-Task平台模板（附源码）

【前端素材】推荐优质后台管理系统网页my-Task平台模板（附源码）

一、需求分析 1、系统定义 后台管理系统是一种用于管理网站、应用程序或系统的工具&#xff0c;通常由管理员使用。后台管理系统是一种用于管理和控制网站、应用程序或系统的管理界面。它通常被设计用来让网站或应用程序的管理员或运营人员管理内容、用户、数据以及其他相关功…
阅读更多...
QMessageBox用法及技巧

QMessageBox用法及技巧

一&#xff0e;QMessageBox是什么&#xff1f; QMessageBox类为用户提供了主要的警告信息&#xff0c;用户可以根据需求选择需要的响应&#xff1b; QMessageBox 还提供了一些常用的按钮&#xff0c;例如"确定"、"取消"、"是"、"否"…
阅读更多...
禁止涉密电脑插U盘

禁止涉密电脑插U盘

某国家机关在日常工作中发现&#xff0c;一台涉密电脑受到了不明攻击&#xff0c;大量机密文件被非法访问和复制。 经过调查&#xff0c;原来是一名工作人员在不知情的情况下&#xff0c;将感染病毒的U盘插入涉密电脑&#xff0c;导致机密数据被窃取。 事件发生后&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023