鸿蒙布局元素的初步了解

Nekros_ice

已于 2024-07-17 19:15:40 修改

阅读量233

点赞数 8

文章标签：鸿蒙

于 2024-07-17 19:11:40 首次发布

本文链接：https://blog.youkuaiyun.com/Nekros_ice/article/details/140503120

版权

先是了解了一下Kotlin里的Tablayout在ArkTs里是如何使用的：

其中Tabs就相当于之前所学的Tablayout控件，TabContent就相当于一个叠加的Fragment布局

相比于Kotlin的TabLayout和ViewPager的联动，ArkTs的Tabs相当简洁，只需要简单几步就能做出一个商品展示的模型

在TabContent里加入Row或者Column做一个简单的布局

在制作好的布局里使用Scroll来做一个可滑动的列表，Scroll属性要设置初始高度/宽度，只有当内部内容超出Scroll长度时才会产生滑动效果

完成一个简单的物品展示模板

相比于Kotlin我觉得ArtTs好用很多，简化了很多代码，但是个人感觉可读性有些欠缺，很容易混淆或记不清当前属性，还需要时间去磨合。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Nekros_ice

关注关注

8
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Swiper容器组件

weixin_47730343的博客

01-27

1627

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Swiper容器组件。

HarmonyOS实战开发指南：网格布局-（Grid）

maniu110的博客

07-12

1319

网格布局在特定场景（例如日历、计算器等）下是有较大优势的，它可以轻松的将页面进行均分，大大减少代码量，提高编码效率，而且做出来的页面会更加简洁美观。

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

鸿蒙Harmony应用开发—ArkTS声明式开发（画布组件：Matrix2D）

m0_64420071的博客

03-19

1050

ArkTS声明式开发（画布组件：Matrix2D）

鸿蒙（ArkTs）布局元素初步了解（3）

Nekros_ice的博客

07-19

239

记得路径要在resources/base/profile/main_pages文件中声明不然会报找不到路径的错误提示。可以进行不同页面的切换比如最常用的登录注册功能需要不同的页面来实现不同的功能。也可以通过InputType来设置输入类型比如不可见内容的密码Type。可以将内容像铁网的间隙一样（烧烤的那种网）分布的布局。通过pushUrl添加page路径可以达到跳转的效果。gutter 决定布局列之间的间隙（据说有bug）TextInput是一个可以输入内容的输入框。可以自己定义大小与输入内容。

鸿蒙（ArkTs）布局元素初步了解（2）

Nekros_ice的博客

07-18

479

在里面添加你要展示的图片数据就好，并且Swiper中的图片会自动适配大小，最后设置初始宽高做成自己想要的样子就算完成。今天所了解的控件是Swiper（轮播图），相比于Android Studio中的轮播图差距不大。pleaceholder属性用于定义未输入时的初始显示文字。子组件跨多层阶向父组件通信 @Consume。父组件跨多层阶向子组件通信 @Provide。根据上面的关系来看这张图其实并不复杂。Search用于做搜索框的简易控件。另外就是总结一下这张图的个人看法。父类向子类单向通信 @Prop。

鸿蒙5.0时代：原生鸿蒙应用市场引领开发者服务新篇章

热门推荐

11-04

27万+

在移动应用开发领域，我们时常面临着如何在保证应用质量的同时，快速响应市场需求，缩短上线周期的难题。同时，原生鸿蒙应用市场凭借其广泛的全球用户基础，为开发者提供了广阔的国际化运营舞台，助力开发者实现全球范围内的市场拓展和商业成功。按需加载，顾名思义是指用户只下载并安装应用的基础功能，而应用的增强功能或附加组件则根据用户的实际需求，在后续的使用过程中逐步加载。到原生鸿蒙应用市场为移动应用开发领域带来了新的机遇和挑战，我们应该充分利用这一机遇，不断提升自己的开发能力和水平，在竞争激烈的市场中取得成功。

HarmonyOS开发环境搭建移动开发鸿蒙开发 ArkTS

ooo

04-21

2603

HarmonyOS Dev环境搭建， HelloWorld，组件（ Row Column List ListItem TabContent Swiper SwiperController Grid GridItem Text TextInput Button Image），后端接口测试

HarmonyOS鸿蒙应用开发——ArkUI组件封装最佳实践

学习，思考，输出

06-04

2417

静态注册属性封装UI组件的特点：使用简单，由于要手动定义属性，导致在可维护性和可扩展性上有很大的局限性，对于简单的UI组件，静态注册可能是可行的封装方式，易用易理解，但是比较复杂的组合式ui组件，尤其是那些对动态设置要求较高的场景时，静态注册就显得不那么适用了，需要定义众多的成员属性，无法根据实际需求灵活地按需注册属性。动态注册属性封装UI组件的特点：是通过组件的AttributeModifier来实现的，相较于静态注册方式，尽管操作更为复杂，但可以弥补静态注册的缺陷。

HarmonyOS入门学习

yong_19930826的博客

03-20

2437

我们除了上述这个单独抽取到文件的组件方法之外我们还可以使用自定义函数，我们可以通过自定义函数来达到类似组件封装的目的，而且自定义函数做内部的体验封装更合适一点。全局自定义函数全局自定义函数是写在组件外面的，所有的组件都可以调用，作为函数可以传参!局部自定义函数：相比较全局自定义函数，少了function字段，并且只能组件内部调用，调用时需要加this我们可以发现，在上述的代码中我们有很多可以用公用的样式，假如样式有变动，可能会导致我们修改的地方很多，代码很难维护。

OpenHarmony实战开发-鸿蒙ArkTS语言入门（网格布局）

m0_70749039的博客

05-27

1202

首先我们来对Grid进行一个初步的认识：网格布局（Grid）是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。上面的内容是官方给出的对Grid的文字定义，不难看出，网格布局在特定场景（例如日历、计算器等）下是有较大优势的，它可以轻松的将页面进行均分，大大减少代码量，提高编码效率，而且做出来的页面会更加简洁美观。

【鸿蒙HarmonyOS核心组件与框架】用户界面开发基础控件与布局管理

[【鸿蒙HarmonyOS核心组件与框架】用户界面开发基础控件与布局管理](https://www.huaweicentral.com/wp-content/uploads/2021/06/huawei-harmonyos-brand-img-1-1000x600.jpg) # 1. 鸿蒙HarmonyOS用户界面开发概述 ...

深入鸿蒙HarmonyOS UI设计：打造极致用户体验的秘诀

![深入鸿蒙HarmonyOS UI设计：打造极致...本章将为读者提供一个关于HarmonyOS UI设计的初步了解，涵盖了HarmonyOS的设计基础、界面元素、设计理念及其在多设备生态中的应用。我们将从以下几个方面对HarmonyOS UI设计

HarmonyOS NEXT实战开发：ArkUI操作响应时延类性能问题案例

2401_84917132的博客

08-28

1060

点击操作响应时延的性能衡量的起点为用户点击应用元素离手帧时间，终点为应用界面发生变化的首帧。推荐值：100ms

基于多目标粒子群算法的冷热电联供型综合能源系统运行优化

最新发布

05-05

内容概要：本文详细介绍了基于多目标粒子群（MOPSO）算法的冷热电联供（CCHP）综合能源系统运行优化的方法和技术细节。文章首先构建了一个涵盖冷、热、电负荷的优化调度模型，该模型不仅考虑了多种能源资源如燃气轮机、电制冷机、锅炉和风光机组，还包括与上级电网的购售电交易。随后，文章展示了MOPSO算法的具体实现步骤，包括粒子初始化、迭代更新、惯性权重调整、非支配排序和拥挤度计算等关键技术环节。此外，文中还讨论了MATLAB仿真平台的优势及其在处理多时间尺度耦合、风光出力波动等方面的应用。最终，通过Pareto前沿分析，揭示了系统在不同条件下的最优运行模式。适用人群：适用于从事能源系统优化的研究人员、工程师以及对多目标优化算法有兴趣的学习者。使用场景及目标：①帮助研究人员理解和应用MOPSO算法进行CCHP系统的优化；②为工程师提供具体的代码实现和仿真工具，以便更好地设计和管理实际的能源系统；③促进学术交流和技术进步，推动可持续能源的发展。其他说明：文章提供了详细的MATLAB代码片段，便于读者理解和复现实验结果。同时，强调了多目标优化在解决复杂能源系统问题中的重要性和优越性。

山东大学项目实训-创新实训-法律文书专家系统-项目报告（二）

05-05

原始数据集

5小时精通Go与ApacheRanger：权限管理集成.pdf

05-05

文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。编译闪电般迅速，并发性能卓越，部署轻松简单！Go 语言以极简设计理念和出色工程性能，成为云原生时代的首选编程语言。从 Docker 到 Kubernetes，全球顶尖科技企业都在采用 Go。点击了解 Go 语言的核心优势、实战窍门和未来走向，开启高效编程的全新体验！

数据库相关学习资源，数据库

05-05

数据库

异步电机矢量控制系统仿真模型（基于MATLAB 21a版本）：电流滞环控制及详细精美报告

05-05

内容概要：本文详细介绍了基于Matlab 2021a的异步电机矢量控制系统中电流滞环控制的实现过程。首先，文章解释了电流环的整体结构，包括定子电流的坐标变换、转矩分量和励磁分量的分离以及旋转变压器模块的应用。接着，展示了电流滞环控制的核心代码，强调了带积分修正的滞环控制机制，并讨论了SVPWM模块的实现技巧。此外，文章探讨了速度环PI参数的自整定设计、谐波分析、磁链观测器的改进方案以及仿真加速技巧。最后，分享了一些实用的调试经验和仿真优化方法，如参数自适应调整、变步长求解器的选择和数据存储格式的优化。适合人群：从事电机控制领域的研究人员和技术人员，尤其是对异步电机矢量控制和电流滞环控制感兴趣的读者。使用场景及目标：适用于希望深入了解异步电机矢量控制系统中电流滞环控制实现细节的研究人员和技术人员。目标是帮助读者掌握电流滞环控制的关键技术和调试技巧，提高仿真实践能力。其他说明：文中提供了丰富的代码片段和调试经验，有助于读者更好地理解和应用所介绍的技术。同时，报告中还包括详细的故障分析和解决方案，确保读者能够避免常见陷阱并顺利进行仿真。

鸿蒙开发相对布局，子元素居中

03-11

<think>嗯，用户问的是鸿蒙开发中的相对布局子元素居中。我需要先回忆一下鸿蒙的相对布局相关知识。相对布局在鸿蒙里是通过DirectionalLayout实现的吗？或者是不是叫做DependentLayout？可能记错了，应该确认一下。对了，HarmonyOS中的相对布局是DependentLayout，它允许子组件相对于父容器或兄弟组件进行定位。这点和Android的RelativeLayout类似吧。用户想知道如何让子元素居中。常见的居中方式有水平居中和垂直居中，还有同时水平垂直居中。在相对布局中，通常需要设置子组件的对齐方式相对于父容器。比如，设置水平居中可能需要设置center_horizontal属性为true，垂直居中则是center_vertical。或者是不是通过设置对齐方式到父容器的中间？需要确认HarmonyOS的XML属性名称。比如，在DependentLayout中，子组件可以使用ohos:alignment属性，可能的值像center、top_center、bottom_center等。或者是否有单独的horizontal_center和vertical_center属性？另外，是否有例子可以参考？比如，在XML布局中，父容器是DependentLayout，子元素比如一个Text组件，设置其alignment为center，这样就能在父容器中居中显示。或者是否需要设置相对于父容器的左右和上下约束？还有可能，用户可能遇到了无法居中的问题，需要检查是否正确设置了对父容器的依赖。例如，是否设置了子组件的align_parent_left、align_parent_right等属性，导致居中失效？这时候可能需要去掉这些属性，单独设置居中。另外，代码示例会有帮助。比如，展示一个DependentLayout中包含一个居中的按钮或文本。同时，可能需要用ohos:width和ohos:height设置匹配父容器或者固定值。比如，子组件的宽度和高度设置为match_content，然后对齐到父容器中心。还需要考虑不同版本的鸿蒙系统是否有差异，但可能用户使用的是较新的版本，所以按最新文档来写。另外，是否还有其他方式实现居中，比如使用PositionLayout或者StackLayout，但用户明确问的是相对布局，所以应集中在DependentLayout上。总结步骤应该是：1. 使用DependentLayout作为父容器；2. 在子组件中设置alignment属性为center；3. 可能需要设置子组件的宽高为match_content或固定值；4. 检查是否有其他约束属性冲突。可能还需要提醒用户，如果子元素有多个，需要处理它们之间的相对位置，否则多个居中元素会重叠。或者如果子元素需要同时相对于其他兄弟元素定位，这时候居中可能需要不同的设置。最后，给出一个完整的XML示例，说明如何实现水平和垂直居中，可能还要提到通过代码动态设置的方法，比如使用Java或JS的API。但用户可能主要使用XML布局，所以重点放在XML配置上。</think>在鸿蒙（HarmonyOS）开发中，**相对布局（DependentLayout）** 通过子组件与父容器或兄弟组件的相对关系实现定位。要实现子元素居中，需明确以下两种场景： --- ### 一、单个子元素居中若需让子元素在父容器中**水平垂直居中**，可通过以下步骤实现： 1. **父容器设置** 使用 `DependentLayout` 作为根布局，并指定宽高（通常为父容器的宽高）。 2. **子元素属性** 子组件需设置以下属性： - `ohos:width` 和 `ohos:height`：定义子元素宽高（如 `match_content` 或固定值） - `ohos:alignment`：设置为 `center`（水平垂直居中） ```xml <DependentLayout ohos:width="match_parent" ohos:height="match_parent"> <Text ohos:width="match_content" ohos:height="match_content" ohos:text="居中文本" ohos:alignment="center" /> </DependentLayout> ``` --- ### 二、多个子元素居中若多个子元素需居中且**不重叠**，需结合相对布局的依赖规则： 1. **父容器设置** 同样使用 `DependentLayout`，并设置宽高。 2. **子元素居中策略** 通过 `ohos:center_in_parent` 属性实现： - 水平居中：`ohos:horizontal_center="true"` - 垂直居中：`ohos:vertical_center="true"` ```xml <DependentLayout ohos:width="match_parent" ohos:height="match_parent">  <Button ohos:width="100vp" ohos:height="40vp" ohos:text="按钮" ohos:horizontal_center="true" ohos:vertical_center="true" /> </DependentLayout> ``` --- ### 三、注意事项 1. **属性冲突** 若子元素设置了其他相对定位属性（如 `ohos:align_parent_left`），可能覆盖居中效果。需确保仅保留居中相关属性。 2. **动态居中** 若需通过代码动态调整，可使用 `Component#setAlignment(int alignment)` 方法： ```java Component component = findComponentById(ResourceTable.Id_text); component.setAlignment(Component.CENTER); // 水平垂直居中 ``` --- ### 四、完整示例 ```xml <DependentLayout ohos:width="match_parent" ohos:height="match_parent" xmlns:ohos="http://schemas.huawei.com/res/ohos"> <Text ohos:width="match_content" ohos:height="match_content" ohos:text="Hello HarmonyOS" ohos:text_size="30fp" ohos:horizontal_center="true" ohos:vertical_center="true" /> </DependentLayout> ``` --- 通过以上方法，可灵活实现子元素在相对布局中的居中效果。若有更复杂的布局需求，可结合 `DependentLayout` 的兄弟组件依赖规则（如 `ohos:below`、`ohos:above`）进一步调整。