- 博客(23)
- 收藏
- 关注
RSS订阅原创 鸿蒙UI系统组件02——按钮(Button)
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。设置边框弧度。一般使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。设置文本样式。通过添加文本样式设置按钮文本的展示样式。设置背景颜色。添加backgroundColor属性设置按钮的背景颜色。用作功能型按钮。为删除操作创建一个按钮。。
2024-07-14 22:18:00
465
原创 鸿蒙UI系统组件01——文本组件(Text/Span)
Text是文本组件，是我们开发UI界面中最常见的组件之一，通常用于展示用户的视图，如显示文章的文字。下面将对文本组件展开介绍。通过textAlign属性设置文本对齐样式。
2024-07-13 22:41:49
279
原创 ArkTs布局入门08——轮播（Swiper）
Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。至此，我们已经了解了ArkTs的所有系统布局，“ArkTs布局入门”系列正式结束，未来，我们将逐步学习了解基本系统组件与系统动画，请持续关注。
2024-07-12 23:16:20
1040
原创 ArcTs布局入门07——列表（List）
列表是一种复杂的容器，当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集，例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求（如通讯录、音乐列表、购物清单等）。使用列表可以轻松高效地显示结构化、可滚动的信息。通过在List组件中按垂直或者水平方向线性排列子组件ListItemGroup或ListItem，为列表中的行或列提供单个视图，或使用ForEach迭代一组行或列，或混合任意数量的单个视图和ForEach结构，构建一个列表。
2024-07-10 23:07:21
976
原创 ArcTs布局入门06——网格布局（Grid/GridItem）
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。
2024-07-09 22:34:57
916
原创 ArcTs布局入门05——栅格布局（GridRow/GridCol）
后续还有网格布局，请持续关注“ArcTs布局入门06”如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧.
2024-07-08 22:29:17
1648
原创 ArcTs布局入门04——相对布局 & 媒体查询
RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。子元素并不完全是上图中的依赖关系。比如，Item4可以以Item2为依赖锚点，也可以以RelativeContainer父容器为依赖锚点。媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。
2024-07-03 22:20:45
1134
原创 ArcTs布局入门03——层叠布局(Stack)
叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。如下图，Stack作为容器，容器内的子元素（子组件）的顺序为Item1->Item2->Item3。如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！
2024-07-02 22:42:28
384
原创 ArcTs布局入门02——弹性布局（Flex）
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。弹性布局在开发场景中用例特别多，比如页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等等。主轴为水平方向的Flex容器示意图弹性布局是仅次于线性布局的一种高频使用布局，未来在很多demo中都将会见到他的身影。接下来，我们将介绍剩下的其他布局，请持续关注“ArcTs布局入门03”
2024-07-01 23:07:31
1155
原创 ArcTs布局入门01——线性布局(Row/Column)
接下来，我们将介绍弹性布局（Flex），请持续关注“ArcTs布局入门02”。如果你对鸿蒙开发感兴趣，加入“Harmony自习室”吧~👇🏻👇🏻👇🏻👇🏻扫描下面的二维码关注公众号。
2024-06-30 22:55:16
1064
原创 鸿蒙UI开发快速入门 —— part12: 渲染控制
在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句。至此，我们的“鸿蒙UI开发快速入门系列”正式结束了！接下来，我们将围绕UI开发的一些细节做展开，例如：学习ArkUI提供的所有布局方式、学习系统的常用控件、UI动画等。请持续关注后续“鸿蒙UI开发系列”。
2024-06-28 21:33:17
877
原创 鸿蒙UI开发快速入门 —— part11: 鸿蒙计算器开发实践
经过我们前面10章的学习，我们基本上可以开发出一个简单的APP了，为了巩固学习的内容，我们先开发一个计算器APP来连个手（文末有源代码），界面如下：包含基本的计算器运算功能支持一键清空，支持逐个删除数字支持将上次计算的过程保存下来，下次打开app继续；支持清理之前保存的记录这里面我们会用到知识如下：开发UI界面（基本控件的使用以及基本布局的使用）；监听用户点击事件，在输入栏中及时反馈（动态交互）；支持将过程持久化到本地，下次打开后自动恢复；let's go!💪🏻💪🏻💪🏻。
2024-06-24 23:03:37
941
原创 鸿蒙UI开发快速入门 —— part10: PersistentStorage与Environment
PersistentStorage将选定的AppStorage属性保留在设备磁盘上。应用程序通过API，以决定哪些AppStorage属性应借助PersistentStorage持久化。UI和业务逻辑不直接访问PersistentStorage中的属性，所有属性访问都是对AppStorage的访问，AppStorage中的更改会自动同步到PersistentStorage。PersistentStorage和AppStorage中的属性建立双向同步。
2024-06-23 23:05:52
865
原创 鸿蒙UI开发快速入门 —— part09: 应用级状态管理LocalStorage & AppStorage
如果开发者要实现应用级的，或者多个页面的状态数据共享，就需要用到应用级别的状态管理的概念。ArkTS根据不同特性，提供了多种应用状态管理的能力
2024-06-23 23:02:03
947
原创 鸿蒙UI开发快速入门 —— part08: 组件状态管理之@Provide/@Consume装饰器
我们再想一种场景：如果有一个状态，有非常多个子组件都需要共用，同时，子组件的层级可能会不止一层，此时，如果我们想做到类似的效果的话，则需要为每个层级都传递一遍@Props，这将是灾难。为了解决多层级的状态同步问题，鸿蒙引入了 @Provide装饰器和@Consume装饰器。
2024-06-22 14:57:59
929
原创 鸿蒙UI开发快速入门 —— part07:组件状态管理之@Prop/@Link装饰器
至此，我们在@State装饰器的基础上又学习了@Props装饰器和@Link装饰器，@Props装饰器用于接受来自父组件的变量，@Link也用于接受来自父组件的变量，但额外的，@Link装饰器在子组件中被修改后，父组件中对应的值也会发生改变。剩下的状态装饰器请持续关注 “鸿蒙UI开发快速入门 —— part08 ”
2024-06-17 23:20:57
1403
原创 鸿蒙UI开发快速入门 —— part06:组件状态管理之@State装饰器
状态管理的内容量比较大，为了阅读的舒适性，本文先介绍@State装饰器。后续：@Prop、@Link、@Provide/@Consume、@Observed、@ObjectLink将分别介绍，持续关注 "鸿蒙UI开发快速入门 —— part07"。如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！
2024-06-16 23:32:15
1071
原创 鸿蒙UI开发快速入门 —— part05:组件的样式复用
至此，我们将UI开发的组件样式相关的介绍完毕了。回顾一下，涉及到了@Builder UI描述的概念以及如何添加UI组件；UI和界面相关的的生命周期；UI的逻辑复用和样式复用；至此，我们已经可以编写一个静态页面了，但还不够，我们未来将继续学习状态管理和条件渲染。有了状态管理和条件渲染，我们的界面就能随着用户的交互而发生变化。下一个阶段，请持续关注：“鸿蒙UI开发快速入门 —— part06”如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！长按下面的二维码关注公众号。
2024-06-15 20:50:50
981
原创 鸿蒙UI开发快速入门 —— part04: 组件的UI逻辑复用
至此，我们已经简单了解了使用@Builder装饰器和@BuilderParam装饰器来实现UI组合关系的复用，以及如何复用父组件传入的自定义@Builder函数。接下来，我们将学习如何使用@Styles和@Extend装饰器复用组件的特定样式，请关注 “鸿蒙UI开发快速入门 —— part05”；如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！长按下面的二维码关注公众号。
2024-06-13 23:13:26
1180
原创 鸿蒙UI开发快速入门 —— part03: 组件的生命周期
自定义组件的创建：自定义组件的实例由ArkUI框架创建。初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。如果开发者定义了aboutToAppear，则执行aboutToAppear方法。在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在首次渲染的过程中，框架会记录状态变量和组件的映射关系，当状态变量改变时，驱动其相关的组件刷新。
2024-06-12 23:07:24
1131
原创 鸿蒙UI开发快速入门 —— part02: 组件开发
在ArkUI中，UI显示的内容均为组件，由框架直接提供的称为系统组件，由开发者定义的称为自定义组件。在进行 UI 界面开发时，通常不是简单的将系统组件进行组合使用，而是需要考虑代码可复用性、业务逻辑与UI分离，后续版本演进等因素。因此，将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。自定义组件具有以下特点：可组合：允许开发者组合使用系统组件、及其属性和方法。可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用。数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新。
2024-06-11 22:55:04
1175
原创 鸿蒙UI开发快速入门 —— part01: 装饰器&UI描述
如果组件支持子组件配置，则需在尾随闭包"{...}"中为组件添加子组件的UI描述。例如，Divider组件不包含构造参数。鸿蒙UI的开发在build()函数中完成，整个build()函数的开发类似于编写描述文件，我们也将buid()开发过程称为。至此，我们已经简单了解了鸿蒙UI开发中的两个重要概念，装饰器和UI描述，接下来，我们开始了解UI开发啦，Let's Go！属性方法以“.”链式调用的方式配置系统组件的样式和其他属性，建议每个属性方法单独写一行，示例代码如下：。d）给组件添加子组件。
2024-06-04 23:12:27
883
原创 hello鸿蒙
鸿蒙是一款由华为推出的全生态操作系统（探索 | 华为开发者联盟），最近几年发展势头非常强劲，现在开始，让我们来一起认识他吧。本文针对鸿蒙基本的开发内容做一次概览性的串联。咱们学习一款新的开发平台，一般先关注两个事情：a）开发工具；b）开发语言。鸿蒙的开发目前主推ArkTs语言，它的开发方式倾向于声明式开发，应用的开发模式与当下的前端MVVM接近，对前端开发者比较友好。如果你也对鸿蒙开发感兴趣，加入“Harmony自习室”吧！
2024-06-03 23:35:08
640
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人