首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach

鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach

原创
作者头像
猫林老师
发布于 2024-12-23 03:55:26
发布于 2024-12-23 03:55:26
2760
举报

鸿蒙应用开发从入门到入行

第四天 - 层叠布局、自定义组件、ForEach循环生成组件

导读:在本篇文章里,您将掌握层叠布局、自定义组件的用法,特别是自定义组件将来的开发中必然会用,其中应该特别关注自定义组件的一些规范与装饰器。

Stack - 层叠容器组件

  • 在App效果中,我们经常看到一些阴影蒙版、加载中遮罩等,如下图列表所示:
fig:
fig:
fig:
fig:
  • 像这种:把某个组件堆叠到另外一个组件上的效果,称之为层叠效果或者堆叠效果(就像小时候玩的叠罗汉,一个人叠在另一个人上面)
fig:
fig:
  • 温馨提示:成都网友请勿看上图
  • 使用语法
  • Stack() { item1() item2() item3() }
  • 默认情况下:越在后面的组件越叠在最高层(就像叠罗汉,后来的在最上),所以上述代码后的层级效果如下图
fig:
fig:
  • 默认情况下:子组件都在Stack容器内居中堆叠,如果需要修改,需要通过alignContent参数实现位置的相对移动,一共有9种方式如下图
fig:
fig:
  • 修改方法
  • Stack({ alignContent: Alignment.TopStart }) { // 改成在左上对齐堆叠 ..... }
  • 如果需要手动指定谁在最上层,可以使用zIndex属性,修改层级。zIndex的值越大越叠在最上面
  • Stack({ alignContent: Alignment.BottomStart }) { Column() { Text('Stack子元素1').fontSize(20) }.width(100).height(100).backgroundColor(0xffd306).zIndex(2) Column() { Text('Stack子元素2').fontSize(20) }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1) Column() { Text('Stack子元素3').fontSize(20) }.width(200).height(200).backgroundColor(Color.Grey) }.width(350).height(350).backgroundColor(0xe0e0e0)
    • 此时,虽然子元素1是一开始写的,但是它的zIndex最大,所以会在最上层。子元素2的zIndex值小一点,所以在中间。子元素3因为没有写zIndex,层级最低,所以在最里层。效果如下图
    fig:
    fig:

自定义组件

为什么需要
  • 很多时候我们需要自定义一些由其他组件布局组合在一起的组件,方便在界面上复用,例如上期布置的附加作业年度待办目标
fig:
fig:
  • 待办列表区里的每一项组成元素比较多,比如有Row、Checkbox、Text等。而且这些元素组合起来的部分,多次需要使用。那么为了更好的维护、修改、复用,可以把这一部分封装成自定义组件
组件怎么创建
  • 一般情况下,为了更好的管理项目中的文件,我们会把自定义组件放到一个跟pages目录同级的新的文件夹里,起名叫components或者view。文件夹起名每个人都有自己的喜好,这里我不强求。但是本文后面以view起名作为存放组件的文件夹
    • 华为鸿蒙官网的Codelabs上大部分示例代码都是以view作为文件夹,所以这里猫林老师也保持同步
fig:
fig:
  • 组件将来我们都以.ets文件结尾,接下来,我们在view文件夹里创建一个组件文件:对着view文件夹鼠标右键->新建->ArkTS File->然后输入组件名即可
fig:
fig:
fig:
fig:
  • 注意:组件名应该使用多单词大驼峰形式,建好后如下图
fig:
fig:
  • 那么如何快速生成一个组件结构呢?输入comp出提示后按回车即可
fig:
fig:
  • 此时本文件会生成如下代码
  • @Component struct { build() { } }
  • 注意看会发现,代码中还没有组件名字,因此我们还需要手动填入名字。名字跟文件名应该保持一致,因此改完后如下
  • @Component struct ToDoItem { build() { } }
  • 这样就建好一个空组件了
装饰器 - @Component与@Entry
  • 大家通过代码可以发现,无论是新建项目默认生成的Index.ets文件,或者是我们刚刚创建的ToDoItem自定义组件,都有struct关键字。
  • 这里先对它做个说明
    • struct代表结构体,也是一种数据类型(有兴趣详细了解可以去学习TS语法)
    • 但对于我们目前的鸿蒙应用开发中,暂时只要知道。不管是页面还是自定义组件(页面也可以理解为就是个很大的组件),都用struct修饰,即都为以下格式
    • struct 组件名{ build() { } }
    • 每个组件(页面也是组件),内都必须有个build函数,在这个函数里写描述界面的代码
      • 提示:别忘了,每个build里有且只有一个根容器哦
    • 学过TS或者Java或者C的都知道,struct只是一个结构体,怎么就跟组件扯上关系了呢?
    • 这就跟它上面的@Component有关
  • @Component说明
    • 这是一个装饰器
    • 通过上一篇的学习我们了解到装饰器可以让某个数据具备特殊功能,例如@State可以让数据驱动UI更新
    • 所以@Component这个装饰器就是能让struct这个数据具备组件的功能
    • 因此你会发现默认生成的Index.ets和我们自定义的组件TOdoItem都有这个装饰器
    fig:
    fig:
  • @Entry又是什么呢?
    • 入口的意思
    • 作用:把某个组件作为这个页面的第一个入口组件启动
    • 一个页面有很多自定义组件,那么启动这个页面到底以哪个组件作为入口组件呢?就是通过@Entry来指定的
    • 并且,加了@Entry的组件,也能被预览器预览
预览自定义组件
  • 自定义组件创建完,我们需要一边写代码一边看效果。可是默认情况下自定义组件无法在预览器里进行预览,这时候需要加一个装饰器@Preview
  • @Preview @Component struct ToDoItem { build() { } }
  • 这样我们就能进行界面编写,并且在预览器看到预览效果了
构建TodoItem自定义组件的界面
fig:
fig:
  • 根据效果图分析发现这个组件根容器应该是一个Row,里面两个子组件:Checkbox与Text
  • 且Row需要设置圆角、背景色、最好给个高度,Checkbox需要给左右外间距
  • 代码如下
  • build() { Row() { Checkbox() .margin({ left: 20, right: 20 }) Text('中彩票500万') } .width('100%') .height(40) .backgroundColor(Color.White) .borderRadius(20) }
如何使用自定义组件
  • 需要先导出、再导入,即可使用
  • 导出:
    • 只要在struct前加一个export即可
  • export struct ToDoItem { .... }
  • 导入:
    • import语法
  • import { 组件名 } from '路径' // 例 import { ToDoItem } from '../view/ToDoItem'
  • 使用:
  • ToDoItem()
  • DevEco非常强大,我们也可以不写导入的代码,让DevEco自动生成
    • 做法:给组件加完export后,来到需要用到组件的地方,直接写组件名,出提示后按回车
    fig:
    fig:
    fig:
    fig:
  • 至此,我们完成了TodoItem组件的简单编写。并通过它学习了装饰器、组件创建和使用的相关知识。等接下来完成“年度待办”案例时,还会回来丰富它,但目前就到此为止吧

ForEach循环生成组件

  • 若需要根据数组数据生成一堆同类型的组件,则需要用到ForEach
  • 作用:根据数组生成组件,数组有多少个元素,就生成多少个组件
  • 语法:
  • ForEach (数组, (item: 类型, index: number) => { // 组件 })
  • 例:
  • @State arr: string[] = ['a', 'b', 'c', 'd'] ForEach (this.arr, (item: string, index: number) => { // 组件 Row () { Text(`item的值是:${item},index是:${index}`) } })
  • 结果如下
fig:
fig:

注:ForEach有第三个参数,是键值生成函数。作用:为数据源arr的每个数组项生成唯一且持久的键值。有点类似vue里的v-bind:key,这里我就不细讲了,等哪一天专门出一篇技术文讲解。本系列文章主要是侧重于教会开发技能,理论细节及各种原理和性能优化等内容,未来会偶尔写文说明,所以敬请关注本号,免得错过最新内容。

  • 提示:ArkTS是一种强类型语言,所以每种数据必须声明类型,比如(item: string, index: number),不能省略类型
  • 试一试,大家可以用ForEach生成我们刚刚封装的TodoItem看看

总结内容

  • 本篇文章我们主要学习了三个方面:Stack、自定义组件、ForEach
  • Stack:
    • 层叠组件,只要是实现一个组件叠在另外一个组件上面的都可以用Stack包起来
    • 默认越后面写的组件层级越高
    • 可以通过zIndex属性方法修改,数字越大层级越高
  • 自定义组件
    • 当某个界面区域可能要多次复用时,封装成自定义组件方便复用
    • 其次,自定义组件也能更好的管理代码文件、让界面更清爽、利于维护
    • @Component 修饰的结构体才算组件
    • @Entry是入口的意思,代表某个页面启动的第一个组件
    • @Preview可以预览自定义组件
    • 导出组件:export
    • 导入组件:import
  • ForEach
    • 根据数组生成组件

课后练习

  • 判断题
    • 自定义组件可以直接预览
  • 问答题
    • 请说出下列代码的层级
    • Stack() { 组件A().zIndex(2) 组件B().zIndex(0) 组件C() }
  • 今天又补全了一些知识,大家可以把上一篇文章的年度待办计划作业的布局给完成了,下一期会讲组件传值的相关知识
  • 附:年度待办计划初始数据
  • @State totalTasks: Array<TodoModal> = [ { text: "月入5万", finished: false }, { text: "中彩票500万", finished: false }, { text: "找个富婆", finished: false }, { text: "买套别墅", finished: false }, { text: "改掉爱做梦的习惯", finished: false }, ];
  • class TodoModal { text: string = '' finished: boolean = false }

互动环节

  • 看到那个赞了吗?给我狠狠点下去!

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
鸿蒙应用开发从入门到入行 - 篇5:组件化开发思想开发鸿蒙案例(详解父子组件传值)
导读:在本篇文章里,您将掌握组件化开发、组件传值等相关知识。并能彻底弄懂鸿蒙父子组件数据的同步机制。本篇干货很多,特别是有些关于组件的细节,需要好好掌握。
猫林老师
2024/12/23
4360
鸿蒙应用开发从入门到入行 - 篇5:组件化开发思想开发鸿蒙案例(详解父子组件传值)
鸿蒙应用开发从入门到入行 - 篇6:数据监听器、滚动、侧滑功能
导读:在本篇文章里,您将掌握监听器、滚动、侧滑等相关内容,助力你开发出更具交互的案例。
猫林老师
2024/12/23
2880
鸿蒙应用开发从入门到入行 - 篇6:数据监听器、滚动、侧滑功能
HarmonyOS Next快速入门:@Component自定义组件
##HarmonyOS Next快速入门##HarmonyOS应用开发##教育##
中雨
2025/06/24
1390
OpenHarmony装饰指定自定义组件:@BuilderParam装饰器
当开发者创建了自定义组件,并想对该组件添加特定功能时,例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法,将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题,ArkUI引入了@BuilderParam装饰器,@BuilderParam用来装饰指向@Builder方法的变量,开发者可在初始化自定义组件时对此属性进行赋值,为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素,类似slot占位符。
小帅聊鸿蒙
2025/05/12
1210
鸿蒙 Stack 组件深度解析:层叠布局的核心应用与实战技巧
在鸿蒙应用开发中,Stack 组件作为层叠布局的核心容器,通过「后入栈先显示」的堆叠机制,为开发者提供了创建复杂视觉层次的强大能力。这种类似「卡片堆叠」的布局模式,能够让子组件按照添加顺序依次层叠,后添加的组件覆盖先添加的组件,完美适配需要视觉叠加效果的场景,如浮层提示、图片蒙层、状态覆盖等。本文将从核心概念、接口属性、实战案例到性能优化,全面解析 Stack 组件的应用技巧。
谢道韫
2025/06/24
1220
【HarmonyOS开发】ArkUI中的自定义弹窗
自定义弹窗的使用更加灵活,适用于更多的业务场景,在自定义弹窗中您可以自定义弹窗内容,构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog 定义的组件来实现,然后结合 CustomDialogController 来控制自定义弹窗的显示和隐藏。
小帅聊鸿蒙
2024/07/05
6440
【HarmonyOS开发】ArkUI中的自定义弹窗
鸿蒙(HarmonyOS)应用开发之性能优化实战-组件复用
若开发者的应用中存在以下场景,并成为UI线程的帧率瓶颈,应该考虑使用组件复用机制提升应用性能:
小帅聊鸿蒙
2024/10/16
4580
鸿蒙(HarmonyOS)应用开发之性能优化实战-组件复用
HarmonyOS应用开发——页面布局技巧
我们将对于多页面以及更多有趣的功能展开叙述,这次我们对于 HarmonyOS 的很多有趣常用组件并引出一些其他概念以及解决方案、页面跳转传值、生命周期、启动模式(UiAbility),样式的书写、状态管理以及动画等方面进行探讨
小帅聊鸿蒙
2024/06/25
5120
HarmonyOS应用开发——页面布局技巧
鸿蒙特效教程05-鸿蒙很开门
屏幕上有一个双开门,点击中间的按钮后,两侧门会向打开,露出开门后面的内容。当用户再次点击按钮时,门会关闭。
苏杰豪
2025/03/26
1210
鸿蒙特效教程05-鸿蒙很开门
HarmonyOS Next 自定义Scroll滑动指示器
最近项目中有个需求,关于滑动组件 Scroll 底部指示器跟随手势滑动等比例展示的效果,下图展示了要实现的效果。
儿歌八万首
2025/03/12
1960
HarmonyOS Next 自定义Scroll滑动指示器
四、HarmonyOS应用开发-ArkTS开发语言介绍
TypeScript 是一个开源的编程语言,本章节只介绍了TypeScript的基础语法知识,更多内容大家可以参考 TypeScript 的官方教程(https://www.typescriptlang.org/docs/)。大家在学习过程中,如果没有搭建TypeScript的开发环境,也可以直接使用在线 Playground 平台(https://www.typescriptlang.org/play)进行编码练习。没有接触过 TypeScript 的同学可以先补齐相关的语法基础,再进入 HarmonyOS 的相关开发学习之旅。
跟着飞哥学编程
2024/05/24
1.1K0
四、HarmonyOS应用开发-ArkTS开发语言介绍
【愚公系列】2023年12月 HarmonyOS教学课程 006-ArkUI组件(Stack)
HarmonyOS中的层叠布局Stack是一种可以将多个组件按照一定顺序叠放的布局。Stack布局中的组件可以是任意类型的组件,且每个组件都可以设置在哪个位置叠放。在叠放时,后添加的组件会自动覆盖前面添加的组件。
愚公搬代码
2025/06/02
1100
【愚公系列】2023年12月 HarmonyOS教学课程 006-ArkUI组件(Stack)
鸿蒙(HarmonyOS)应用性能优化实战-组件复用四板斧
在滑动场景下,常常会对同一类自定义组件的实例进行频繁的创建与销毁。此时可以考虑通过组件复用减少频繁创建与销毁的能耗。组件复用时,可能存在许多影响组件复用效率的操作,本篇文章将重点介绍如何通过组件复用四板斧提升复用性能。
小帅聊鸿蒙
2024/10/16
2690
鸿蒙(HarmonyOS)应用性能优化实战-组件复用四板斧
HarmonyOS NEXT 鸿蒙实现自定义组件插槽
在HarmonyOS NEXT中,如何实现类似Vue-Slot或React-RenderProps的功能?即允许将UI结构的函数(被@Builder修饰的函数)作为参数传递给组件,并在组件内的指定位置渲染,可以使用@BuilderParam装饰器。
一梦南柯
2025/03/12
2290
HarmonyOS NEXT 鸿蒙实现自定义组件插槽
鸿蒙原生应用从设置页看自定义组件的使用
IDE:DevEco Studio 4.0 Release Build Version: 4.0.0.600, built on October 17, 2023
徐建国
2024/01/11
8670
鸿蒙原生应用从设置页看自定义组件的使用
【OpenHarmony】ArkTS 语法基础 ② ( ArkTS 自定义组件 | 自定义可导入组件 - export 声明模块 | 导入自定义组件 - import 导入组件 )
ArkTS 语言的 @Component 组件 , 用于修饰 struct 结构 , 表示自定义组件 , 定义的自定义组件 可以用在 其它组件中 ;
韩曙亮
2024/06/04
1.3K0
【OpenHarmony】ArkTS 语法基础 ② ( ArkTS 自定义组件 | 自定义可导入组件 - export 声明模块 | 导入自定义组件 - import 导入组件 )
鸿蒙容器组件 RelativeContainer 全解析:灵活定位的布局神器
在鸿蒙应用开发中,RelativeContainer 容器组件作为实现灵活定位的核心工具,颠覆了传统固定布局的局限性。它支持子组件通过相对定位(相对于容器边界或其他子组件)进行布局,完美适配标签浮动、图标对齐、动态布局调整等复杂场景。本文将系统解析 RelativeContainer 的核心特性、定位逻辑与实战技巧,助开发者掌握这一 "智能定位" 神器。
谢道韫
2025/06/23
2490
HarmonyOS 应用开发 —— 常用装饰器整理
我们使用 DevEco IDLE 进行 HarmonyOS 应用开发时,在任意 .ets 文件中,输入 @ 时,会弹出所有的装饰器,但是什么时候该用什么装饰器就需要查文档。但是官方文档没有搜到和装饰器强相关的文档。
Gorit
2023/12/18
8810
遥遥领先! HarmonyOS 自定义组件的结构、函数、变量、参数规定,这篇太干了我要渴死了!!!
上一篇文章我们介绍了声明式UI描述和自定义组件的基本用法,现在我们系统的看看自定义组件的结构、成员函数、变量等.在 《遥遥领先,HaemonyOS的ArkTS应用入门实操》文章里面我们讲解了 ArkTS 的基本代码组成,这里我们看看具体的组件结构.
杨不易呀
2023/12/04
4K1
遥遥领先! HarmonyOS 自定义组件的结构、函数、变量、参数规定,这篇太干了我要渴死了!!!
【愚公系列】2023年12月 HarmonyOS教学课程 011-ArkUI组件(List)
列表是一种非常有用且功能强大的容器,它常用于呈现同类型或多类型数据集合,例如图片、文本、音乐、通讯录、购物清单等。列表对于显示大量内容而不耗费过多空间和内存是非常有帮助的,因为当列表项数量超过屏幕大小时,可以自动提供滚动功能。这使得列表成为构建结构化、可滚动信息的理想容器。
愚公搬代码
2025/06/02
1430
【愚公系列】2023年12月 HarmonyOS教学课程 011-ArkUI组件(List)
推荐阅读
相关推荐
鸿蒙应用开发从入门到入行 - 篇5:组件化开发思想开发鸿蒙案例(详解父子组件传值)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档