鸿蒙HarmonyOS NEXT开发：RelativeContainer（容器组件）

于 2024-08-22 15:24:47 发布
阅读量595 收藏 17
点赞数 13
分类专栏： ArkTS 鸿蒙 文章标签： harmonyos 华为 list 鸿蒙 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanBBQ/article/details/141429281
版权
鸿蒙 同时被 2 个专栏收录
155 篇文章 0 订阅
订阅专栏
ArkTS
150 篇文章 0 订阅
订阅专栏

RelativeContainer

相对布局组件，用于复杂场景中元素对齐的布局。

说明：

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

规则说明

  • 容器内子组件区分水平方向，垂直方向：
    • 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。
    • 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。
  • 子组件可以将容器、guideline、barrier或者其他子组件设为锚点：
    • 参与相对布局的容器内组件，不设置id的组件能显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知；容器id固定为__container__；guideline和barrier的id不能与组件重复，重复的话按照组件 > guideline > barrier的优先级生效。
    • 此子组件某一方向上的三个位置（水平方向为left、middle、right，垂直方向为top、center、bottom）可以指定容器或其他子组件同方向的三个位置（水平方向为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，垂直方向为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom）为锚点。若同方向上设置两个以上锚点，水平方向Start和Center优先，垂直方向Top和Center优先。例如，水平方向上指定了left以容器的HorizontalAlign.Start为锚点，middle以容器的HorizontalAlign.Center为锚点，又指定right的锚点为容器的HorizontalAlign.End，当组件的width和容器的width不能同时满足3条约束规则时，优先取Start和Center的约束规则。
    • 当同时存在前端页面设置的子组件尺寸和相对布局规则时，子组件的绘制尺寸取决于约束规则。从API Version 11开始，该规则发生变化，子组件绘制尺寸取决于前端页面设置的尺寸。
    • 对齐后需要额外偏移可设置offset(API Version 11上新增了bias， 不建议再使用offset)。
    • 从API Version 11开始，在RelativeContainer组件中，width、height设置auto表示自适应子组件。
    • 当width设置auto时，如果水平方向上子组件以容器作为锚点，则auto不生效，垂直方向上同理。
    • 相对布局容器内的子组件的margin含义不同于通用属性的margin，其含义为到该方向上的锚点的距离。若该方向上没有锚点，则该方向的margin不生效。
    • guideline的位置在不声明或者声明异常值(如undefined)时，取start：0的位置；start和end两种方式声明一种即可，同时声明时仅start生效。
    • 当容器在某个方向的size声明为“auto”时，该方向上guideline的位置只能使用start的方式声明(不可使用百分比)。
    • 垂直方向的guideline和barrier只能作为组件水平方向的锚点，作为垂直方向的锚点时取0；水平方向的guideline和barrier只能作为组件垂直方向的锚点，作为水平方向的锚点时取0。
    • 链的形成依靠组件间的依赖关系。以一个组件A、组件B组成的最小水平链为例，需要有锚点1 <-- 组件A <—> 组件B --> 锚点2的依赖关系，即A具有left锚点，B具有right锚点，同时A的right锚点是B的HorizontalAlign.Start，B的left锚点是A的HorizontalAlign.End。
    • 链的方向和格式声明在链头组件的chainMode接口；链内元素的bias属性全部失效，链头元素的bias作为整个链的bias生效。
    • 链内所有元素的size如果超出链的锚点约束，超出的部分将均分在链的两侧。在Packed链中，超出部分的分布可以通过bias来设置。
  • 特殊情况
    • 根据约束条件和子组件本身的size属性无法确定子组件大小，则子组件不绘制。
    • 互相依赖、环形依赖时容器内子组件全部不绘制。
    • 同方向上两个及以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。

子组件

支持多个子组件。

接口

RelativeContainer()

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

属性

除支持通用属性外，还支持如下属性：

guideLine12+

guideLine(value: Array<GuideLineStyle>)

设置RelativeContainer容器内的辅助线，Array中每个项目即为一条guideline。

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

参数：

参数名类型必填说明
valueArray<GuideLineStyle>是RelativeContainer容器内的辅助线。

barrier12+

barrier(value: Array<BarrierStyle>)

设置RelativeContainer容器内的屏障，Array中每个项目即为一条barrier。

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

参数：

参数名类型必填说明
valueArray<BarrierStyle>是RelativeContainer容器内的屏障。

GuideLineStyle12+

guideLine参数，用于定义一条guideline的id、方向和位置。

参数：

名称类型必填描述
idstring是guideline的id，必须是唯一的并且不可与容器内组件重名。
directionAxis是指定guideline的方向。
默认值：Axis.Vertical
positionGuideLinePosition是指定guideline的位置。
默认值：
{
start: 0
}

GuideLinePosition12+

guideLine位置参数，用于定义guideline的位置。

参数：

名称类型必填描述
startDimension否guideline距离容器左侧或者顶部的距离。
endDimension否guideline距离容器右侧或者底部的距离。

BarrierStyle12+

barrier参数，用于定义一条barrier的id、方向和生成时所依赖的组件。

参数：

名称类型必填描述
idstring是barrier的id，必须是唯一的并且不可与容器内组件重名。
directionBarrierDirection是指定barrier的方向。
默认值：BarrierDirection.LEFT
referencedIdArray<string>是指定生成barrier所依赖的组件。

示例

示例1

本示例展示了以容器和容器内组件作为锚点进行布局的用法。

@Entry
@Component
struct Index {
  build() {
    Row() {

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

        Row().width(100).height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row2")

        Row().height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            top: {anchor: "row1", align: VerticalAlign.Bottom},
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row2", align: HorizontalAlign.Start}
          })
          .id("row3")

        Row()
          .backgroundColor("#FF9966")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right: {anchor: "row1", align: HorizontalAlign.End}
          })
          .id("row4")

        Row()
          .backgroundColor("#FF66FF")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "row2", align: HorizontalAlign.Start},
            right: {anchor: "__container__", align: HorizontalAlign.End}
          })
          .id("row5")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}

ts

示例2

本示例展示了容器内子组件设置margin的用法。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            left: {anchor: "__container__", align: HorizontalAlign.Start}
          })
          .id("row1")
          .margin(10)

        Row().width(100).height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            left: {anchor: "row1", align: HorizontalAlign.End},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row2")

        Row().width(100).height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            left: {anchor: "row1", align: HorizontalAlign.Start},
            top: {anchor: "row1", align: VerticalAlign.Bottom}
          })
          .id("row3")

        Row().width(100).height(100)
          .backgroundColor("#FF9966")
          .alignRules({
            left: {anchor: "row3", align: HorizontalAlign.End},
            top: {anchor: "row2", align: VerticalAlign.Bottom}
          })
          .id("row4")
          .margin(10)
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}

ts

示例3

本示例展示了容器大小适应内容（声明size为"auto"）的用法。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .id("row1")

        Row().width(100).height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            left: {anchor: "row1", align: HorizontalAlign.End},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row2")

        Row().width(100).height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            left: {anchor: "row1", align: HorizontalAlign.Start},
            top: {anchor: "row1", align: VerticalAlign.Bottom}
          })
          .id("row3")

        Row().width(100).height(100)
          .backgroundColor("#FF9966")
          .alignRules({
            left: {anchor: "row3", align: HorizontalAlign.End},
            top: {anchor: "row2", align: VerticalAlign.Bottom}
          })
          .id("row4")
      }
      .width("auto").height("auto")
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}
ts

示例4

本示例展示了bias的用法。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            bottom : {anchor : "__container__", align : VerticalAlign.Bottom},
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right : {anchor : "__container__", align: HorizontalAlign.End},
            bias : {vertical : 0.3}
          })
          .id("row1")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}

ts

示例5

本示例展示了guideline的声明和以guideline为锚点的用法。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            left: {anchor: "guideline1", align: HorizontalAlign.End},
            top: {anchor: "guideline2", align: VerticalAlign.Top}
          })
          .id("row1")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
      .guideLine([{id:"guideline1", direction: Axis.Vertical, position:{start:50}},
        {id:"guideline2", direction: Axis.Horizontal, position:{start:50}}])
    }
    .height('100%')
  }
}

ts

示例6

本示例展示了barrier的声明和以barrier为锚点的用法。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .id("row1")

        Row().width(100).height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            middle: {anchor: "row1", align: HorizontalAlign.End},
            top: {anchor: "row1", align: VerticalAlign.Bottom}
          })
          .id("row2")

        Row().width(100).height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            left: {anchor: "barrier1", align: HorizontalAlign.End},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row3")

        Row().width(50).height(50)
          .backgroundColor("#FF9966")
          .alignRules({
            left: {anchor: "row1", align: HorizontalAlign.Start},
            top: {anchor: "barrier2", align: VerticalAlign.Bottom}
          })
          .id("row4")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
      .barrier([{id: "barrier1", direction: BarrierDirection.RIGHT, referencedId:["row1", "row2"]},
        {id: "barrier2", direction: BarrierDirection.BOTTOM, referencedId:["row1", "row2"]}])
    }
    .height('100%')
  }
}

ts

示例7

本示例通过chainMode接口实现了水平方向的SPREAD链。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(80).height(80)
          .backgroundColor("#FF3333")
          .alignRules({
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right: {anchor: "row2", align : HorizontalAlign.Start},
            center: {anchor: "__container__", align: VerticalAlign.Center}
          })
          .id("row1")
          .chainMode(Axis.Horizontal, ChainStyle.SPREAD)

        Row().width(80).height(80)
          .backgroundColor("#FFCC00")
          .alignRules({
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row3", align : HorizontalAlign.Start},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row2")

        Row().width(80).height(80)
          .backgroundColor("#FF6633")
          .alignRules({
            left: {anchor: "row2", align: HorizontalAlign.End},
            right: {anchor: "__container__", align : HorizontalAlign.End},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row3")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}

ts

示例8

本示例通过chainMode接口实现了水平方向的SPREAD_INSIDE链。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(80).height(80)
          .backgroundColor("#FF3333")
          .alignRules({
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right: {anchor: "row2", align : HorizontalAlign.Start},
            center: {anchor: "__container__", align: VerticalAlign.Center}
          })
          .id("row1")
          .chainMode(Axis.Horizontal, ChainStyle.SPREAD_INSIDE)

        Row().width(80).height(80)
          .backgroundColor("#FFCC00")
          .alignRules({
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row3", align : HorizontalAlign.Start},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row2")

        Row().width(80).height(80)
          .backgroundColor("#FF6633")
          .alignRules({
            left: {anchor: "row2", align: HorizontalAlign.End},
            right: {anchor: "__container__", align : HorizontalAlign.End},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row3")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}

ts

示例9

本示例通过chainMode接口实现了水平方向的PACKED链。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(80).height(80)
          .backgroundColor("#FF3333")
          .alignRules({
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right: {anchor: "row2", align : HorizontalAlign.Start},
            center: {anchor: "__container__", align: VerticalAlign.Center}
          })
          .id("row1")
          .chainMode(Axis.Horizontal, ChainStyle.PACKED)

        Row().width(80).height(80)
          .backgroundColor("#FFCC00")
          .alignRules({
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row3", align : HorizontalAlign.Start},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row2")

        Row().width(80).height(80)
          .backgroundColor("#FF6633")
          .alignRules({
            left: {anchor: "row2", align: HorizontalAlign.End},
            right: {anchor: "__container__", align : HorizontalAlign.End},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row3")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}

ts

示例10

本示例通过chainMode和bias接口实现了水平方向的带bias的PACKED链。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(80).height(80)
          .backgroundColor("#FF3333")
          .alignRules({
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right: {anchor: "row2", align : HorizontalAlign.Start},
            center: {anchor: "__container__", align: VerticalAlign.Center},
            bias : {horizontal : 0}
          })
          .id("row1")
          .chainMode(Axis.Horizontal, ChainStyle.PACKED)

        Row().width(80).height(80)
          .backgroundColor("#FFCC00")
          .alignRules({
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row3", align : HorizontalAlign.Start},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row2")

        Row().width(80).height(80)
          .backgroundColor("#FF6633")
          .alignRules({
            left: {anchor: "row2", align: HorizontalAlign.End},
            right: {anchor: "__container__", align : HorizontalAlign.End},
            top: {anchor: "row1", align: VerticalAlign.Top}
          })
          .id("row3")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}

ts

最后

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

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

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

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

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

 

  •  HarmonOS基础技能

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

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

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

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

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

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

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

图片

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

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

图片

 《鸿蒙开发基础》

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

图片

 《鸿蒙开发进阶》

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

图片

《鸿蒙进阶实战》

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

图片

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

总结

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

蜀道叁QAQ
关注
  • 13
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
HarmonyOS应用开发：RelativeContainer（容器组件）
situnanQAQ的博客
06-18 886
相对布局组件，用于复杂场景中元素对齐的布局。
鸿蒙HarmonyOS NEXT开发：位置设置（ArkTS组件事件）
shudaoshanBBQ的博客
08-07 846
设置组件的对齐方式、布局方向和显示位置。
鸿蒙HarmonyOS NEXT开发：尺寸设置（ArkTS组件事件）
shudaoshanBBQ的博客
08-07 782
用于设置组件的宽高、边距。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：RelativeContainer）
m0_64420071的博客
03-15 1971
ArkTS声明式开发（容器组件：RelativeContainer）
HarmonyOS Next开发学习手册——相对布局 (RelativeContainer)
maniuT的博客
07-09 871
在应用的开发过程中，经常需要设计复杂界面，此时涉及到多个相同或不同组件之间的嵌套。如果布局组件嵌套深度过深，或者嵌套组件数过多，会带来额外的开销。如果在布局的方式上进行优化，就可以有效的提升性能，减少时间开销。RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。
鸿蒙HarmonyOS实战指南：合理使用布局组件-（ArkUI开发）
m0_64422261的博客
07-12 811
在使用ArkUI开发中，我们通过布局组件和基础组件进行界面描述，这些描述会呈现出一个组件树的结构，基础组件在其中为叶子结点，布局组件则是中间节点，可以把这棵树称之为应用组件树。当用户执行交互（滑动，点击等行为）时会触发界面修改，界面的修改本质上是通过触发这棵组件树的重新渲染，来实现应用界面更新的过程。
【鸿蒙开发】详解HarmonyOS中的容器组件
HarmonyOS_001的博客
06-23 1114
有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。
HarmonyOS ArkUI容器类组件-相对布局容器（RelativeContainer）
m0_71263309的博客
04-22 509
ArkUI 开发框架提供了 RelativeContainer 组件实现相对布局的能力，该布局适用于复杂场景下多元素对齐的情况。该组件可以包含多个子组件，本节笔者简单介绍一下 RelativeContainer 的使用。
鸿蒙HarmonyOS应用开发者认证 题库+答案案
01-18
本资源提供了鸿蒙HarmonyOS应用开发者认证的题库和答案，涵盖了HarmonyOS应用开发的多个方面，包括容器组件、 Ability、Web组件、网络请求、首选项、自定义组件、弹窗组件、图片加载、网络权限等。通过学习和理解...
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
本教程旨在帮助初学者从零开始学习鸿蒙 HarmonyOS NEXT 星河版的开发技术。首先，我们需要准备开发环境。鸿蒙系统是由华为公司主导开发的一款面向未来、基于微内核的分布式操作系统，它适用于多种智能设备，如手机、...
黑马HarmonyOS-NEXT星河版实战-课程网盘链接提取码下载 .txt
06-03
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计，通过实战项目提升技能。课程注重实践与理论相结合，为...
HarmonyOS 地图服务：深度解析其丰富功能与精准导航实力
白晓明的博客
08-21 793
HarmonyOS为开发者和用户带来了强大的地图功能支持，其中包括地图组件MapComponent以及地图组件的主要功能入口类MapComponentController。
HarmonyOS应用四之页面加载构建以及数据请求
zouyang920的博客
08-19 351
【代码】HarmonyOS应用四之页面加载及构建。
鸿蒙内核源码分析(信号生产篇) | 注意结构体的名字和作用.
黎程雨的博客
08-21 452
关于信号篇，本只想写一篇，但发现把它想简单了，内容不多，难度极大.整理了好长时间，理解了为何要单独为它开一章，原因有二
鸿蒙UIAbility组件概述(一)
gitzzp的博客
08-17 837
UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口。一个应用可以包含一个或者多个UIAbility组件。每一个UIAbility组件都会在最近任务列表中显示一个对应的任务。
深入解析HarmonyOS中的媒体查询及其高级用法
最新发布
A1551143530的博客
08-21 457
通过本文的介绍，你应该对HarmonyOS中的媒体查询有了更深入的了解。媒体查询不仅可以处理常见的屏幕尺寸和方向，还可以针对设备类型和系统模式进行更精细的控制。这些高级特性使得在不同设备上实现统一而定制化的用户体验成为可能。在实际开发中，充分利用这些特性，将帮助你打造出更加响应式和用户友好的应用。通过探索这些高级特性，你能够在多样化的设备环境中实现更为精准的响应式设计，从而为用户提供最佳的交互体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值