0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkUI开发:常用布局【相对布局】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-05-14 20:50 次阅读

相对布局(RelativeContainer)

  1. 相对布局可以让子元素指定兄弟元素或父容器作为锚点,基于锚点做位置布局
  2. 必须为RelativeContainer及其子元素设置ID,用于指定锚点信息。未设置ID的子元素不会显示
  3. RelativeContainer ID为“ container ”,其余子元素的ID通过id属性设置。
  4. 子元素通过 alignRules 指定相对布局规则
  5. 开发前请熟悉鸿蒙开发指导文档:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

锚点的对齐位置示意图

image.png

一个示例

typescript
复制代码
@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 })
  }
}

`HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿`

搜狗高速浏览器截图20240326151450.pngimage.png

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 鸿蒙
    +关注

    关注

    57

    文章

    2339

    浏览量

    42811
收藏 人收藏

    评论

    相关推荐

    HarmonyOS开发ArkUI案例:【常用布局容器对齐方式】

    基于ArkTS扩展的声明式开发范式,实现Flex、Column、Row和Stack四种常用布局容器对齐方式。
    的头像 发表于 05-08 16:47 1581次阅读
    HarmonyOS<b class='flag-5'>开发</b><b class='flag-5'>ArkUI</b>案例:【<b class='flag-5'>常用布局</b>容器对齐方式】

    鸿蒙ArkUI开发常用布局【主轴】

    线性布局的子元素在线性方向上(水平方向和垂直方向)依次排列
    的头像 发表于 05-13 17:33 857次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>:<b class='flag-5'>常用布局</b>【主轴】

    请问相对布局和线性布局有啥不同?

    请问相对布局和线性布局有啥不同?
    发表于 04-09 09:25

    ArkUI新能力,助力应用开发更便捷

    、灵活锚点,让绝对定位能力更强大 除了以上介绍的布局能力外,ArkUI还提供了绝对定位和相对定位能力,让开发者实现更灵活的定位,现已提供了2个方法,position和markAncho
    发表于 02-15 11:40

    OpenHarmony使用ArkUI Inspector分析布局

    本文转载自《#2023 盲盒+码 # OpenHarmony使用ArkUI Inspector分析布局》,作者:zhushangyuan_ ● 摘要:视图的嵌套层次会影响应用的性能,开发者应该移除
    发表于 09-04 15:27

    鸿蒙应用ui布局

    请问,在用java开发鸿蒙用布局UI时,怎么才能全屏布局(不显示labelb标题)
    发表于 09-20 22:09

    鸿蒙强势布局2021 库克对苹果做出战略布局

    随着华为对鸿蒙系统的进一步战略布局,苹果却也作出了战略布局,看似是在阻挡鸿蒙的发展。
    的头像 发表于 01-20 11:24 1382次阅读
    <b class='flag-5'>鸿蒙</b>强势<b class='flag-5'>布局</b>2021 库克对苹果做出战略<b class='flag-5'>布局</b>

    鸿蒙ArkUI开发-Tabs组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用
    的头像 发表于 01-19 16:01 1877次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>-Tabs组件的使用

    鸿蒙ArkUI之【如何选择布局?】

    声明式UI提供了以下9种常见布局开发者可根据实际应用场景选择合适的布局进行页面开发
    的头像 发表于 05-13 15:37 456次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>之【如何选择<b class='flag-5'>布局</b>?】

    鸿蒙ArkUI开发常用布局【交叉轴】

    垂直于主轴方向的轴线。Row容器交叉轴为纵向,Column容器交叉轴为横向。
    的头像 发表于 05-14 09:52 580次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>:<b class='flag-5'>常用布局</b>【交叉轴】

    鸿蒙ArkUI开发常用布局【弹性布局方向图】

    FlexDirection.Row(默认值):主轴为水平方向,子组件从起始端沿着水平方向开始排布
    的头像 发表于 05-14 09:23 362次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>:<b class='flag-5'>常用布局</b>【弹性<b class='flag-5'>布局</b>方向图】

    鸿蒙ArkUI开发常用布局【 创建列表(List)】

    列表容器是为了高效处理长列表的容器,能支持横向、竖向滚动,数据分组,分组头悬浮等功能
    的头像 发表于 05-15 15:30 766次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>:<b class='flag-5'>常用布局</b>【 创建列表(List)】

    鸿蒙ArkUI开发常用布局【创建网格(Grid/GridItem)】

    网格布局主要用于处理固定行列的UI,也支持动态调整。很类似iOS中的UICollectionView。
    的头像 发表于 05-15 16:24 754次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b><b class='flag-5'>开发</b>:<b class='flag-5'>常用布局</b>【创建网格(Grid/GridItem)】

    鸿蒙用布局ArkUI【基础运用案例】

    平级导航的复合网格视图常出现在同时展示多种不同内容的界面。
    的头像 发表于 05-17 11:19 452次阅读
    <b class='flag-5'>鸿蒙</b>应<b class='flag-5'>用布局</b><b class='flag-5'>ArkUI</b>【基础运用案例】

    鸿蒙ArkUI-X跨平台开发:【 编写第一个ArkUI-X应用】

    通过构建一个简单的ArkUI页面跳转示例,快速了解资源创建引用,路由代码编写和UI布局编写等应用开发流程。
    的头像 发表于 05-21 17:36 693次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>-X跨平台<b class='flag-5'>开发</b>:【 编写第一个<b class='flag-5'>ArkUI</b>-X应用】