鸿蒙os 开发中如何实现固定定位

最新推荐文章于 2025-03-20 14:09:04 发布

Kzzz666

最新推荐文章于 2025-03-20 14:09:04 发布

阅读量2.4k

点赞数 11

分类专栏：华为 arkts 鸿蒙os 文章标签： harmonyos 华为 css

本文链接：https://blog.csdn.net/Kzzz666/article/details/136722121

版权

华为同时被 3 个专栏收录

2 篇文章

订阅专栏

arkts

2 篇文章

订阅专栏

鸿蒙os

2 篇文章

订阅专栏

本文介绍了如何在ArkTS中利用Stack容器进行组件的固定定位，通过z轴排列和zIndex属性控制层级，特别提到了Row容器与Scroll容器的独立性在实现固定定位中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在ArkTS中，虽然有着position通用属性，但是仅仅支持绝对定位和相对定位，没有固定定位而想要实现固定定位：

需要用到Stack（层叠容器）：Stack容器将所包裹的组件以我们所说的z轴（立体轴）来排列组件，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置

同时Stack容器中兄弟组件显示层级关系可以通过Z序控制的zIndex属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方

因为Row容器在Scroll容器之上，它们互不影响，所以这里只需要将Row容器添加一个position即可完成固定定位

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Kzzz666

关注关注

11
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

鸿蒙界面开发（四）：层叠布局&绝对定位

littleyy666的博客

08-26

1346

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。层叠布局优先使用层叠布局Stack组件。如图1，Stack作为容器，容器内的子元素的顺序为Item1->Item2->Item3。图1 层叠布局。

在鸿蒙应用中实现位置定位

qq_31532979的博客

03-04

1127

通过以上步骤，就可以在鸿蒙应用中实现位置服务并获取设备的当前位置信息。

参与评论您还未登录，请先登录后发表或查看评论

鸿蒙NEXT开发：ArkTS组件-通用属性（位置设置）

最新发布

ZPYQAQ的博客

03-20

1093

设置组件的对齐方式、布局方向和显示位置。

Harmony OS Next应用开发基础篇（五）-进阶布局

2401_88463044的博客

10-28

1290

本文阐述了鸿蒙中进阶布局的绝对定位和相对定位概念。绝对定位通过明确指定组件相对于父容器的坐标来确定位置，组件可完全脱离常规布局流自由定位，但可能降低布局灵活性和适应性。相对定位基于组件在常规布局中的原始位置进行偏移，通过设置相对于父容器的偏移量来调整位置，有利于构建自适应和响应式布局。总之，绝对定位适用于精确固定位置，相对定位适用于适度调整并保持相对关系。

鸿蒙的布局以及绝对定位和层级

2301_81915581的博客

03-20

2044

Flex默认主轴水平往右，交叉轴垂直往下 → 右1.主轴方向：direction2.主轴对齐方式：justifyContent3.交叉轴对齐方式：alignltems单行或者单列的情况，优先还是使用线性布局（本质基于Flex设计的，且还做了性能优化）Flex布局：伸缩布局。当子盒子的总和溢出父盒子，默认进行压缩显示。4.布局换行：wrapwrap 属性：Flex 是单行布局还是多行布局1. FlexWrap.NoWrap 单行布局。

鸿蒙使用 scroll 让页面滚动 && 使用 position 定位盒子 [保姆级教程]

qq_52602294的博客

06-21

970

新手可以看看这个案例中间内容使用 scroll 滚动底部使用 position 固定

【鸿蒙学习笔记】位置设置・position・绝对定位・子组件相对父组件

张紫娃的博客

07-14

790

【代码】【鸿蒙学习笔记】位置设置・position・绝对定位。

HarmonyOS 鸿蒙应用开发( 五、快速实现ArkUI页面底部导航Tabs)

独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)

01-25

5980

对于底部导航栏，一般作为应用主页面功能区分，为了更好的用户体验，会组合文字以及对应语义图标表示页签内容，这种情况下，需要自定义导航页签的样式。图9自定义导航栏图系统默认情况下采用了下划线标志当前活跃的页签，而自定义导航栏需要自行实现相应的样式，用于区分当前活跃页签和未活跃页签。设置自定义导航栏需要使用tabBar的参数，以其支持的CustomBuilder的方式传入自定义的函数组件样式。

鸿蒙开发之导航栏

zzz777qqq的博客

05-02

1417

鸿蒙开发正当时，现在入手正是好时机。还在犹豫不决的朋友们，小编在这里建议大家早点入手！在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友，另外一些鸿蒙开发的资料文档也顺便分享给大家，扫下方二维码就能免费送呢！1、UI开发（ArkTS声明式开发范式）概述2、开发布局3、添加组件4、显示图片5、使用动画6、支持交互事件7、性能提升的推荐方法设置深色模式上传文件在新窗口中打开页面管理位置权限并发概述使用异步并发能力进行开发使用多线程并发能力容器类库。

鸿蒙HarmonyOS NEXT开发：位置设置（ArkTS组件事件）

shudaoshanBBQ的博客

08-07

1458

设置组件的对齐方式、布局方向和显示位置。

鸿蒙HarmonyOS项目实战：实现微信app效果（页面实现）_鸿蒙应用开发微信

2401_84181253的博客

04-21

1369

由于在上篇文章中，牵扯到的一些布局知识点，没有讲解到，我一个同事看了我的文章之后，建议，对于一些基础的知识，也带一带简单做个说明，所以本次会把上次和本地用到的布局相关知识进行一个简单说明，如果对相关的知识比较熟悉，这部分内容可以酌情阅读。在布局填充到flex中之后，我们可以通过对横向和纵向进行控制，用来实现容器内内容的横竖向排列方式，可以帮我们实现等分、居左、居右等很多种对其方式。的优势就出来了，使用它可以将布局进行层级平铺，通过布局间的依赖关系控制，实现整体的界面布局。是不是很简单，瞬间理解了，有没有。

【鸿蒙实战开发】HarmonyOS瀑布流的实现

HarmonyOS007的博客

07-24

614

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我两个小忙：●关注小编，同时可以期待后续文章ing ，不定期分享原创知识。

鸿蒙HarmonyOS NEXT开发：AlphabetIndexer（基础组件）

shudaoshanBBQ的博客

08-14

1097

可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。

鸿蒙HarmonyOS【应用开发四、布局介绍】

小北的博客

07-25

1070

组件按照布局的要求依次排列，构成应用的页面。在声明式UI中，所有的页面都是由自定义组件构成，开发者可以根据自己的需求，选择合适的布局进行页面开发。

arkts鸿蒙底部导航栏中间悬浮凸起按钮实例

qq_28303027的博客

05-30

797

2、Stack设置子元素底部对齐alignContent(Alignment.Bottom)，Tab组件宽高设置100%，把中间凸起按钮组件调整对齐方式alignSelf(ItemAlign.Center)为居中对齐。1、最外层使用Stack布局，Stack里面嵌套Tab组件和中间凸起按钮组件，Tab组件在前，凸起按钮组件在后，这样凸起按钮组件可以悬浮在Tab组件上方。使用Stack和Tab组件布局。

鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：位置设置）

m0_64420071的博客

03-01

5082

ArkTS声明式开发（通用属性：位置设置）

层叠布局（Stack）

01-13

1661

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。如图1，Stack作为容器，容器内的子元素（子组件）的顺序为Item1->Item2->Item3。图1层叠布局。

【鸿蒙开发】系统组件Grid

d312697510的博客

04-07

1392

鸿蒙开发arkui组件，Grid组件

鸿蒙开发系列（HarmonyOS）通过HttpRequest下载文件到本地实践

wqad23256的博客

11-27

1095

我们使用HttpRequest模拟了登录，同样，使用HttpRequest也可以下载文件，假设还是上文中提到的网站，在登录后会进入首页，在首页会显示下载列表，单击某一个文件就可以下载了，如图所示：

鸿蒙next中，如何让组件固定位置

10-29

在鸿蒙Next（HarmonyOS）的UI开发中，如果你想要让某个组件固定在屏幕上的特定位置，你可以利用Flex布局或者Position属性来实现。这里我会分别介绍这两种方法： 1. **使用Flexbox布局**：如果你希望组件水平或垂直居中，可以使用Flex容器。首先，给包含该组件的父视图设置 Flex 布局，然后给组件添加 `flex: 0 0 auto;` 的样式，使其在宽度和高度上占据固定的尺寸。例如： ```html <view class="parent-container" style="display: flex;"> <your-component/> </view> ``` 对于`your-component`，添加以下样式： ```css .your-component { position: flex; align-self: center; /* 水平居中 */ justify-content: center; /* 垂直居中 */ width: 200px; /* 设置固定宽度 */ height: 200px; /* 设置固定高度 */ } ``` 2. **使用Position属性**：如果需要更精确的位置控制，可以直接使用CSS的position属性。比如，使用`position: fixed`可以使组件相对于浏览器窗口定位。先确保设置了`z-index`，以便它位于其他动态位置的元素之上： ```html <your-component position-style="position: fixed; top: 50px; /* 上边界 */ left: 50px; /* 左边界 */ width: 200px; height: 200px;"></your-component> ``` 这里，你需要在组件标签上添加一个自定义属性`position-style`，并传入相应的CSS样式。需要注意的是，使用`fixed`时可能会受到滚动的影响，若要避免此影响，可以尝试配合`relative`或`absolute`定位，同时设置`top`, `right`, `bottom`, `left`值。