2.4、相对布局（RelativeContainer）

已于 2024-03-22 11:41:25 修改
阅读量172 收藏
点赞数 1
分类专栏： 从零开始鸿蒙入门实战 文章标签： java 服务器 数据库
于 2024-03-20 16:49:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lujianfeiccie2009/article/details/136879050
版权
本文介绍了RelativeContainer布局，一种支持相对位置关系的容器。内容包括锚点设置，如以父组件或子元素为锚点，以及如何设置相对于锚点的水平对齐，如Start、Center和End。还提供了实战Demo的代码示例和场景应用展示。
摘要由CSDN通过智能技术生成

概述

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

我开发的 Demo 展示

在这里插入图片描述

以下代码均经过我 demo 的实战验证，确保代码和效果对应

设置依赖关系

锚点设置

RelativeContainer 父组件为锚点，container 代表父容器的 id。

在这里插入图片描述
对应代码

RelativeContainer() {
  Row()
    .width(100)
    .height(100)
    .backgroundColor(Color.Red)
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .id("row1")

  Row()
    .width(100)
    .height(100)
    .backgroundColor(Color.Orange)
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      right: { anchor: '__container__', align: HorizontalAlign.End }
    })
    .id("row2")
}
.width(300)
.height(300)
.borderWidth(1)
.borderColor(Color.Blue)
.margin({left:15})

以子元素为锚点。

row2 在 row1 之下
在这里插入图片描述

RelativeContainer() {
  Row()
    .width(100)
    .height(100)
    .backgroundColor(Color.Red)
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .id("row1")

  Row()
    .width(100)
    .height(100)
    .backgroundColor(Color.Orange)
    .alignRules({
      top: { anchor: 'row1', align: VerticalAlign.Bottom },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .id("row2")
}
.width(300)
.height(300)
.borderWidth(1)
.borderColor(Color.Blue)
.margin({left:15})

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

在水平方向上，对齐位置可以设置为

HorizontalAlign.Start

效果图
在这里插入图片描述

对应代码

RelativeContainer() {
   Text("RelativeContainer")
     .alignRules({
       top: { anchor: '__container__', align: VerticalAlign.Top },
       left: { anchor: '__container__', align: HorizontalAlign.Start }
     })
     .margin({left:5,top:5})
     .id("label")

   Text("锚点")
     .alignRules({
       top: { anchor: 'label', align: VerticalAlign.Bottom },
       middle: { anchor: '__container__', align: HorizontalAlign.Center },
       bottom: { anchor: 'label_bottom', align: VerticalAlign.Top }
     })
     .textAlign(TextAlign.Center)
     .width('90%')
     .backgroundColor('#9dc3e6')
     .margin({top:10, bottom:10})
     .id("anchor")

   Text("HorizontalAlign.Start")
     .alignRules({
       bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
       middle: { anchor: '__container__', align: HorizontalAlign.Center }
     })
     .margin({bottom:5})
     .id("label_bottom")
   
   // 红色条
   Stack()
     .width(5)
     .alignRules({
       left: { anchor: 'anchor', align: HorizontalAlign.Start }, // 关键代码
       top: { anchor: 'anchor', align: VerticalAlign.Top },
       bottom: { anchor: 'anchor', align: VerticalAlign.Bottom }
     })
     .margin({top:10, bottom:10})
     .backgroundColor(Color.Red)
     .id("divider")
 }
 .width('100%')
 .height(200)
 .backgroundColor('#f2f2f2')

HorizontalAlign.Center

效果图
在这里插入图片描述

对应代码

RelativeContainer() {
   ...
   
   // 红色条
   Stack()
     .width(5)
     .alignRules({
       left: { anchor: 'anchor', align: HorizontalAlign.Center},
       ...
     })
     ...
 }
...

HorizontalAlign.End

效果图
在这里插入图片描述
对应代码

RelativeContainer() {
   ...
   
   // 红色条
   Stack()
     .width(5)
     .alignRules({
       left: { anchor: 'anchor', align: HorizontalAlign.End},
       ...
     })
     ...
 }
...

场景实例

效果图
在这里插入图片描述

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)
 .borderWidth(1)
 .borderColor(Color.Blue)
 .margin({left:15})

上一篇：2.3、弹性布局（Flex）

IT乐手
关注
专栏目录
订阅专栏
博客
我的新作品《码农宝》App上线了
01-15 5809
主要功能：快速查看安卓设备信息 （手机屏幕分辨率，手机型号，设备id, 可用内存等等）各类开发过程中常用代码及效果 Demo, 分别有列表, 容器，对话框，动画，翻页，图表，编码及算法，多媒体，传感器，实用工具等官方网站http://www.yinghuofei.com/应用宝下载链接https://a.app.qq.com/o/simple.jsp?pkgname=com.lujianfei.phoneinfo界面展示首页默认展示手机系统的相关信息，点击某一个 Item , 可
博客
5.3 使用画布绘制自定义图形（Canvas）
06-23 119
可以由以下三种形式在画布绘制自定义图形使用对象在Canvas画布上绘制。@Entry@Component//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。build() {//在canvas中调用CanvasRenderingContext2D对象。//可以在这里绘制内容。
博客
5.2、绘制几何图形（Shape）
06-09 127
绘制组件支持通过各种属性对组件样式进行更改。通过fill可以设置组件填充区域颜色。Path()通过stroke可以设置组件边框颜色。Path()通过可以设置边框透明度。Path()通过可以设置线条拐角绘制样式。拐角绘制样式分为Bevel(使用斜角连接路径段)、Miter(使用尖角连接路径段)、Round(使用圆角连接路径段)。Polyline()// 设置折线拐角处为圆弧通过设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即属性的值。
博客
5.1、显示图片（Image）
05-22 611
显示图片（Image）开发者经常需要在应用中显示一些图片，例如：按钮中的icon、网络图片、本地图片等。在应用中显示图片需要使用Image组件实现，Image支持多种图片格式，包括png、jpg、bmp、svg和gif，具体用法请参考Image组件。Image该接口通过图片数据源获取图片，支持本地图片和网络图片的渲染展示。其中，src是图片的数据源，加载方式请参考加载图片资源。
博客
4.3、Tabs
05-21 126
对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。对应代码@Entry@Componentbuild() {Text('首页的内容').fontSize(30).fontColor(Color.White).tabBar(this.TabBuilder("首页", 0, $r('app.media.tab_home')))
博客
4.2、Navigation
05-14 127
Navigation组件一般作为页面的根容器，包括单页面、分栏和自适应三种显示模式。同时，Navigation提供了属性来设置页面的标题栏、工具栏、导航栏等。Navigation组件的页面包含主页和内容页。主页由标题栏、内容区和工具栏组成，可在内容区中使用NavRouter子组件实现导航栏功能。内容页主要显示子组件中的内容。NavRouter是配合Navigation使用的特殊子组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。NavRouter有且仅有两个子组件，其中第二个子组件必须是。是配合。
博客
4.1、页面路由（router）
05-08 131
自定义询问框的方式，可以使用弹窗或者自定义弹窗实现。这样可以让应用界面与系统默认询问框有所区别，提高应用的用户体验度。本文以弹窗为例，介绍如何实现自定义询问框。在使用页面路由Router相关功能之前，需要在代码中先导入Router模块。在事件回调中，调用弹窗的// 弹出自定义的询问框message: '您还没有完成支付，确定要返回吗？',buttons: [text: '取消',},text: '确认',// 用户点击了“取消”按钮// 用户点击了“确认”按钮。
博客
3.9、菜单（Menu）
04-26 142
当默认样式不满足开发需求时，可使用@Builder自定义菜单内容。可通过bindMenu接口进行菜单的自定义。
博客
3.8、气泡提示（Popup）
04-23 186
开发者可以使用构建器创建自定义气泡，@Builder中可以放自定义的内容。除此之外，还可以通过popupColor等参数控制气泡样式。})builder: this.popupBuilder(), // 气泡的内容placement:Placement.Bottom, // 气泡的弹出位置popupColor:Color.Pink, // 气泡的背景色onStateChange: (e)=> { // 返回当前的气泡状态if (!// popup构造器定义弹框内容。
博客
3.7、自定义弹窗（CustomDialog）
04-17 199
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。build() {Column() {Text('我是内容')3.创建构造器，与装饰器呼应相连。})4.点击与onClick事件绑定的组件使弹窗弹出})
博客
3.6、文本输入（TextInput/TextArea）
04-10 205
创建输入框、设置输入框类型、自定义样式
博客
3.5、文本显示（Text/Span）
04-08 190
创建文本、添加子组件、自定义文本样式
博客
3.4、进度条（Progress）
04-08 216
Progress是进度条显示组件，显示内容通常为某次目标操作的当前进度。具体用法请参考。
博客
3.3、切换按钮（Toggle）
04-02 161
通过属性设置Toggle打开选中后的背景颜色。通过属性设置Switch类型的圆形滑块颜色，仅对type为生效。
博客
3.2、单选框（Radio）
04-01 444
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。
博客
3.1、按钮 Button
04-01 258
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。以下代码均经过我 demo 的实战验证，确保代码和效果对应Button通过调用接口来创建，接口调用有以下两种形式：创建包含子组件的按钮设置按钮类型Button 有三种可选类型，分别为 Capsule（胶囊类型）、Circle（圆形按钮）和 Normal（普通按钮），通过type进行设置。圆形按钮普通按钮自定义样式设置边框
博客
2.10、创建轮播（Swiper）
03-28 84
Swiper 组件提供滑动轮播显示的能力。Swiper 本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。Swiper 作为一个容器组件，在自身尺寸属性未被设置时，会自动根据子组件的大小设置自身的尺寸。如果开发者对 Swiper 组件设置了固定的尺寸，则在轮播显示过程中均以该尺寸生效；否则，在轮播过程中，会根据子组件的大小自动调整自身的尺寸。通过 loop 属性控制是否循环播放，该属性默认值为 true。当 loop 为 t
博客
2.9、创建网格（Grid/GridItem）
03-26 161
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。
博客
2.8、下拉刷新与上拉加载
03-25 396
*** 实现思路* 监听手指按下事件，记录其初始位置的值。* 监听手指按压移动事件，记录并计算当前移动的位置与初始值的差值，大于0表示向下移动，同时设置一个允许移动的最大值。* 监听手指抬起事件，若此时移动达到最大值，则触发数据加载并显示刷新视图，加载完成后将此视图隐藏。*/@Component// 列表y坐标偏移量// 按下的y坐标// 上一次移动的y坐标// 当前列表首部的索引// 当前列表尾部的索引// 下拉刷新的布局高度。
博客
2.7、创建列表（List）
03-25 811
在初始化列表时，如需在列表项之间添加间距，可以使用space参数。例如，在每个列表项之间沿主轴方向添加55vp对应局部代码Stack()})
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值