鸿蒙Harmony-相对布局(RelativeContainer)详解

这篇具有很好参考价值的文章主要介绍了鸿蒙Harmony-相对布局(RelativeContainer)详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

成年人的世界,从来没有容易二字,想要什么,就得凭自己的努力去拿,遇到事情就得自己生生的硬抗,希望你即使再辛苦,但还是会选择这滚烫的人生,加油陌生的朋友们

目录

一,定义

二,设置依赖关系

2.1 锚点设置

2.2 设置相对于锚点的对齐位置

一,定义

RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。下图是一个RelativeContainer的概念图,图中的虚线表示位置的依赖关系。

鸿蒙Harmony-相对布局(RelativeContainer)详解,harmonyos,华为,鸿蒙,android

子元素并不完全是上图中的依赖关系。比如,Item4可以以Item2为依赖锚点,也可以以RelativeContainer父容器为依赖锚点。

锚点:通过锚点设置当前元素基于哪个元素确定位置。

对齐方式:通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。

 

二,设置依赖关系

2.1 锚点设置

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上,可以设置left、middle、right的锚点。在竖直方向上,可以设置top、center、bottom的锚点。为了明确定义锚点,必须为RelativeContainer及其子元素设置ID,用于指定锚点信息。ID默认为“container”,其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。

注意:

在使用锚点时要注意子元素的相对位置关系,避免出现错位或遮挡的情况。

 

@Entry
@Component
struct RelativeContainerTest {

  build() {
    RelativeContainer(){
      Column() {
        Text('袁震1').textAlign(TextAlign.End).fontSize(20)
      }
      .width(100)
      .height(100)
      .backgroundColor(0xffd306)
      .id("column1")
      .alignRules({
        top:{'anchor':'__container__',align:VerticalAlign.Top},
        left:{'anchor': '__container__', align: HorizontalAlign.Start}
      })

      Column() {
        Text('袁震2').fontSize(20)
      }
      .width(100)
      .height(100)
      .backgroundColor(Color.Pink)
      .id("column2")
      .alignRules({
        top:{'anchor':'column1',align:VerticalAlign.Top},
        left:{'anchor': 'column1', align: HorizontalAlign.End}
      })

    }
    .backgroundColor(Color.Grey)
    .width(300)
    .height(300)
  }
}

鸿蒙Harmony-相对布局(RelativeContainer)详解,harmonyos,华为,鸿蒙,android

2.2 设置相对于锚点的对齐位置

设置了锚点之后,可以通过align设置相对于锚点的对齐位置。

在水平方向上,对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

鸿蒙Harmony-相对布局(RelativeContainer)详解,harmonyos,华为,鸿蒙,android

在竖直方向上,对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

鸿蒙Harmony-相对布局(RelativeContainer)详解,harmonyos,华为,鸿蒙,android

 

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FF3333')
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },  //以父容器为锚点,竖直方向顶头对齐
            middle: { anchor: '__container__', align: HorizontalAlign.Center }  //以父容器为锚点,水平方向居中对齐
          })
          .id('row1')  //设置锚点为row1

        Row() {
          Image($r('app.media.icon'))
        }
        .height(100).width(100)
        .alignRules({
          top: { anchor: 'row1', align: VerticalAlign.Bottom },  //以row1组件为锚点,竖直方向低端对齐
          left: { anchor: 'row1', align: HorizontalAlign.Start }  //以row1组件为锚点,水平方向开头对齐
        })
        .id('row2')  //设置锚点为row2

        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FFCC00')
          .alignRules({
            top: { anchor: 'row2', align: VerticalAlign.Top }
          })
          .id('row3')  //设置锚点为row3

        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FF9966')
          .alignRules({
            top: { anchor: 'row2', align: VerticalAlign.Top },
            left: { anchor: 'row2', align: HorizontalAlign.End },
          })
          .id('row4')  //设置锚点为row4

        Row()
          .width(100)
          .height(100)
          .backgroundColor('#FF66FF')
          .alignRules({
            top: { anchor: 'row2', align: VerticalAlign.Bottom },
            middle: { anchor: 'row2', align: HorizontalAlign.Center }
          })
          .id('row5')  //设置锚点为row5
      }
      .width(300).height(300)
      .border({ width: 2, color: '#6699FF' })
    }
    .height('100%').margin({ left: 30 })
  }
}

鸿蒙Harmony-相对布局(RelativeContainer)详解,harmonyos,华为,鸿蒙,android文章来源地址https://www.toymoban.com/news/detail-789623.html

到了这里,关于鸿蒙Harmony-相对布局(RelativeContainer)详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS鸿蒙开发常用4种布局详细说明

    一直会分享,虽然鸿蒙目前来没有多大发展,但不可否然以后发展,华为的技术是一大突破,存在即合理 可以现在没有多大发展。但不可否定未来的发展。 1、线性布局 2、层叠布局 3、网格布局 4、列表布局 线性布局(LinearLayout)是开发中最常用的布局,通过线性容器Row(行

    2024年04月14日
    浏览(54)
  • HarmonyOS鸿蒙开发指南:构建用户界面 构建布局

    目录 布局说明 添加标题行和文本区域 添加图片区域 添加留言区域 添加容器

    2024年02月22日
    浏览(55)
  • 鸿蒙:Harmony开发基础知识详解

    工欲善其事,必先利其器。 上一篇博文实现了一个 \\\"Hello Harmony\\\" 的Demo,今天这篇博文就以 \\\"Hello Harmony\\\"  为例,以官网开发文档为依据,从鸿蒙开发主要的几个方面入手,详细了解一下鸿蒙开发所需的基础知识。 HarmonyOS提供了一套UI开发框架,即 方舟开发框架 ( ArkUI框架 )

    2024年02月05日
    浏览(53)
  • 鸿蒙Harmony-页面路由(router)详解

    慢慢理解世界,慢慢更新自己,希望你的每一个昨天,今天,和明天都会很快乐,你知道的,先好起来的从来都不是生活,而是你自己  目录 一,定义 二,页面跳转 2.1使用router.pushUrl 2.2 使用router.replaceUrl 2.3 使用Single模式 2.4 带参数的跳转  三,页面返回  3.1返回到上一个页

    2024年01月20日
    浏览(47)
  • 鸿蒙Harmony-列表组件(List)详解

    不要和别人比生活,每个人阶段不同,追求不同,活法自然也不同。只要今天的你能比昨天的你快乐一点点,那你就是自己人生赢家。 目录 一,定义 二,布局与约束 2.1 布局 2.2 约束 三,开发布局 3.1 设置主轴方向 3.2设置交叉轴布局 四,迭代列表内容 五,自定义列表样式

    2024年01月17日
    浏览(46)
  • HarmonyOS鸿蒙基于Java开发: Java UI 自定义布局

    当Java UI框架提供的布局无法满足需求时,可以创建自定义布局,根据需求自定义布局规则。 Component类相关接口  表1  Component类相关接口 接口名称 作用 setEstimateSizeListener 设置测量组件的侦听器 setEstimatedSize 设置测量的宽度和高度 onEstimateSize 测量组件的大小以确定宽度和高度

    2024年02月19日
    浏览(54)
  • 鸿蒙harmony--数据库sqlite详解

    今天是1月20号星期六,早安,岁末大寒至,静后春归来。愿他乡故人,漂泊有归宿,前程有奔赴,愿人间不寒,温暖常伴,诸事顺利,喜乐长安。  目录 一,定义 二,运作机制 三,约束限制 四,接口说明 五,开发步骤 5.1 获取数据库 5.2 创建数据库表 5.3 数据库升降级 5.4插

    2024年01月21日
    浏览(41)
  • 鸿蒙Harmony--状态管理器--@Prop详解

    纵横千里独行客,何惧前路雨潇潇。夜半浊酒慰寂寞,天明走马入红尘。且将新火试新茶,诗酒趁年华。青春以末,壮志照旧,生活以悟,前路未明。时间善变,可执着翻不了篇。时光磨我少年心,却难灭我少年志,壮士活古不活皮。加油。 目录 一,定义 二,装饰器使用规

    2024年02月01日
    浏览(68)
  • HarmonyOS鸿蒙基于Java开发: Java UI 常用布局 DependentLayout

    目录 支持的XML属性 排列方式 相对于同级组件的对齐 相对于父级组件的对齐 场景示例 DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比,拥有更多的排布方式,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置。 图1  DependentLayout示

    2024年02月21日
    浏览(50)
  • 鸿蒙Harmony--LocalStorage--页面级UI状态存储详解

    走的太急疼的是脚,逼的太紧累的是心,很多时候,慢一点也没关系,多给自己一些耐心和等待,保持热爱,当下即是未来,生活自有安排!  目录 一,定义 二,@LocalStorageProp定义 三,@LocalStorageProp装饰器使用规则说明  四,@LocalStorageProp变量的传递/访问规则说明  五,@Loc

    2024年01月20日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包