目录
一、ArkUI 布局入门
在移动应用开发的领域中，构建一个美观、易用且响应式的用户界面（UI）是至关重要的。ArkUI 作为华为鸿蒙系统应用开发的关键框架，为开发者提供了一套强大且灵活的工具，用于创建引人入胜的用户界面。它不仅提供了简洁的 UI 语法和丰富的 UI 功能，还支持实时界面预览，极大地提升了开发效率和体验。
ArkUI 提供了两种主要的开发范式：基于 ArkTS 的声明式开发范式和兼容 JS 的类 Web 开发范式。其中，声明式开发范式因其更接近自然语义的编程方式，让开发者能够直观地描述 UI 的结构和样式，而无需过多关注底层的绘制和渲染细节，成为了开发新应用时的首选。在这种范式下，开发者通过 ArkTS 语言，从组件、动画和状态管理三个维度来构建 UI，使得代码更加简洁、易读和维护。
布局在 UI 开发中起着举足轻重的作用，它定义了组件在界面中的位置和排列方式，是构建用户界面的基础。一个好的布局能够使界面元素合理分布，提高界面的可读性和易用性，同时也能适应不同设备的屏幕尺寸和分辨率，为用户提供一致的体验。在 ArkUI 中，有多种布局方式可供选择，每种布局都有其独特的特点和适用场景 ，而今天我们要深入探讨的，是 ArkUI 中对子元素的约束以及布局位置相关的知识，这对于精准控制界面元素的呈现至关重要。
二、布局位置：精准操控元素的魔法棒
在 ArkUI 中，布局位置的控制是实现精美界面的关键环节，它决定了各个组件在屏幕上的呈现位置，直接影响着用户界面的整体布局和视觉效果。通过合理运用布局位置相关的属性和方法，开发者能够将组件精确地放置在所需的位置，实现各种复杂而独特的界面设计。接下来，我们将深入探讨 ArkUI 中布局位置控制的核心概念和实际应用。
2.1 绝对定位：灵活与缺陷并存
绝对定位是一种直接指定元素在父容器中确切位置的布局方式。在 ArkUI 中，使用position属性来实现绝对定位，通过设置元素左上角相对于父容器左上角的偏移位置x和y，可以将元素放置在父容器内的任意位置。例如：
@Entry
@Component
struct AbsolutePositionExample {
build() {
Stack() {
Text('绝对定位的文本')
.position({ x: 50, y: 100 })
.fontSize(20)
.backgroundColor(Color.Yellow)
}
.width('100%')
.height('100%')
}
}
在上述代码中，Text组件通过position属性被定位到距离父容器左上角x轴 50 像素，y轴 100 像素的位置。这种定位方式给予开发者极大的灵活性，能够轻松实现一些特殊的布局需求，比如在弹窗、提示框等场景中，将元素精确地放置在指定位置 。
然而，绝对定位并非完美无缺。由于它是基于固定的偏移量来确定位置，在不同尺寸设备上适配时会暴露出明显的缺陷。当应用在不同屏幕尺寸或分辨率的设备上运行时，使用绝对定位的元素可能会出现位置错乱、显示不全等问题。例如，在手机上通过绝对定位精心布局的界面，在平板或折叠屏设备上可能会因为屏幕尺寸的增大而导致元素分布不协调，原本紧凑排列的元素可能会变得过于分散，影响用户体验。这是因为绝对定位没有考虑到设备屏幕尺寸的变化，缺乏响应式的布局能力 。
2.2 相对定位：保留原位置的优雅偏移
相对定位是另一种常用的布局位置控制方式，它与绝对定位有着明显的区别。在相对定位中，元素并不脱离文档流，即原位置依然保留，元素仅相对于自身的原始位置进行偏移。在 ArkUI 中，使用offset属性可以实现相对定位，通过设置offset的dx（水平偏移量）和dy（垂直偏移量）来确定元素相对于自身原位置的偏移。例如：
@Entry
@Component
struct RelativePositionExample {
build() {
Column() {
Text('原始位置的文本')
.fontSize(20)
.backgroundColor(Color.LightGray)
Text('相对定位的文本')
.offset({ dx: 30, dy: 20 })
.fontSize(20)
.backgroundColor(Color.Blue)
}
.width('100%')
.height('100%')
}
}
在这个例子中，第二个Text组件通过offset属性设置了水平偏移 30 像素，垂直偏移 20 像素，它会在自身原本应在的位置基础上进行偏移，而不会影响其他元素的布局，原位置也会被保留。
相对定位在实际应用中有许多实用的场景。比如，在制作图文混排的界面时，可能需要将图片相对于文本进行一定的偏移，以达到更好的视觉效果；或者在实现一些动态效果时，通过改变相对定位的偏移量，让元素在原位置附近进行移动，而不会干扰整个页面的布局结构。由于它不脱离文档流，所以在保持页面整体布局的稳定性方面具有优势，适合用于一些对元素位置微调但又要保证整体布局有序的场景 。
三、对子元素的约束：打造整齐有序的布局
在 ArkUI 中，对子元素的约束是实现灵活且美观布局的关键。通过对子元素的尺寸、位置和显示状态进行精确控制，开发者能够创建出适应各种屏幕尺寸和设备类型的用户界面。接下来，我们将深入探讨 ArkUI 中对子元素的约束方式，包括拉伸、缩放、占比和隐藏等。
3.1 拉伸：随容器变化的自适应魔法
拉伸是一种使子组件能够根据父容器的尺寸变化自动调整大小的约束方式。在 ArkUI 中，通过flexGrow和flexShrink属性来实现子组件的拉伸和压缩。flexGrow属性定义了子组件在父容器剩余空间中的增长比例，当父容器有剩余空间时，具有较大flexGrow值的子组件会分配到更多的空间进行拉伸 。例如：
@Entry
@Component
struct StretchExample {
build() {
Flex() {
Text('拉伸组件1')
.backgroundColor(Color.LightBlue)
.flexGrow(1)
Text('拉伸组件2')
.backgroundColor(Color.LightGreen)
.flexGrow(2)
}
.width('100%')
.height(200)
}
}
在上述代码中，两个Text组件位于Flex容器中，flexGrow值分别为 1 和 2。这意味着在Flex容器有剩余空间时，第二个Text组件将获得比第一个Text组件更多的空间进行拉伸，其拉伸比例为 2:1 。
flexShrink属性则相反，它定义了子组件在父容器空间不足时的收缩比例。当父容器空间不足时，具有较大flexShrink值的子组件会收缩得更多 。通过合理设置这两个属性，可以实现子组件在不同容器尺寸下的灵活拉伸和压缩，确保界面布局在各种情况下都能保持合理和美观 。比如在一个包含多个按钮的工具栏中，当屏幕宽度变化时，通过设置按钮的flexGrow和flexShrink属性，可以使按钮自动调整大小，始终均匀地分布在工具栏中，不会出现按钮挤在一起或者间距过大的情况 。
3.2 缩放：固定宽高比的完美呈现
缩放约束允许子组件按照固定的宽高比进行大小调整，确保在不同尺寸的容器中，组件的形状不会发生变形。在 ArkUI 中，使用aspectRatio属性来指定组件的宽高比，即aspectRatio = width / height 。例如：
@Entry
@Component
struct ScaleExample {
build() {
Column() {
Image($r('app.media.example_image'))
.aspectRatio(1.5)
.width('100%')
}
.width('100%')
.height('100%')
}
}
在这个例子中，Image组件设置了aspectRatio为 1.5，并且宽度设置为父容器的 100%。这意味着无论父容器的高度如何变化，Image组件都会根据 1.5 的宽高比自动调整高度，以保持图片的原始比例显示 。这种方式在展示图片、视频等需要保持固定比例的组件时非常有用，能够避免因拉伸或压缩导致的图像失真问题 。比如在一个图片展示应用中，无论屏幕是竖屏还是横屏，通过设置aspectRatio属性，图片都能以正确的比例展示，为用户提供最佳的视觉体验 。
3.3 占比：按比例分配空间的智慧
占比约束使子组件的宽高能够按照预设的比例随父容器的变化而变化，从而实现灵活的空间分配。在 ArkUI 中，有两种常见的方式来实现占比约束。一种是将子组件的宽高设置为父组件宽高的百分比，例如：
@Entry
@Component
struct ProportionExample1 {
build() {
Column() {
Text('占比组件1')
.width('50%')
.height('30%')
.backgroundColor(Color.Yellow)
Text('占比组件2')
.width('30%')
.height('20%')
.backgroundColor(Color.Pink)
}
.width('100%')
.height('100%')
}
}
在上述代码中，两个Text组件的宽高分别设置
最低0.47元/天 解锁文章
扫一扫
846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
