小蜗牛764号的博客

在 ArkTS 中使用 Refresh 组件实现下拉刷新功能，并解决一个关键问题：“为何 @State isRefresh = false 无法关闭刷新动画？”。在日常开发中，列表刷新是一种常见且重要的用户交互方式。本文将结合 ArkUI 的 Refresh 组件，通过实际示例，演示如何实现下拉刷新，并探索 refreshing 属性中的 $$ 机制，详解 onRefreshing 与 onStateChange 的配合使用。我们还将自定义刷新头部样式，并动态更新列表数据，最终实现一个完整且可交互的水果列表

RDB 是鸿蒙操作系统提供的一种内置的关系型数据库（Relational Database），类似于 SQLite，支持标准 SQL 操作。RDB 主要用于在设备上管理和持久化结构化数据，并在应用中灵活使用。RDB（关系型数据库） 是内置的基于 SQLite 的轻量级数据库组件，无需额外安装数据库。开发者只需要调用鸿蒙提供的相关 API 即可直接使用。本文主要是结合SQL代码对RDB进行使用，API相关使用内容较少。

PersistentStorage 是 ArkUI 提供的一种持久化存储解决方案，用于在应用程序中保存数据，并支持跨会话的数据管理和状态保持。通过 PersistentStorage，开发者可以轻松实现数据的本地存储，以满足诸如用户设置、登录信息、会话状态等需要长期保存数据的场景。

本文代码实现了一个展示随机颜色的页面，主要包含两个部分：十六进制颜色和 RGB 颜色的按钮。通过 Grid 布局，按钮显示在网格中，每个按钮都有不同的背景颜色。

网格布局（Grid）是一种将子组件按行列排列的布局方式，适合用来展示规则化、对齐的内容分布。它允许通过行列模板、方向控制等参数，灵活调整子组件的排列方式和显示样式。网格布局是一种强大且灵活的布局工具，特别适合规则性强的内容展示。通过调整模板、方向和显示限制等参数，可以轻松实现不同的排列需求，同时保持布局的美观和一致性。

在 ArkUI 中，Swiper 是一个功能强大的滑动组件，用于实现多项内容的轮播展示。它支持图片、文字以及其他自定义内容的滑动显示，适用于引导页、内容切换和轮播图等场景。Swiper 提供丰富的配置选项，例如自动播放、循环播放、滑动方向（横向或纵向）等，能够满足不同项目的需求。

本项目基于 ArkUI 框架构建，实现了一个简单而功能完善的留言板应用。整个项目由多个模块组成，每个模块分别负责特定的功能，彼此协作完成了从数据管理到界面交互的整体实现。

本文的代码主要用于对水果的管理应用，包含水果的添加、展示、选择、编辑和删除功能。用户可以从预置的水果列表中选择水果并动态显示在界面上，通过长按进入编辑模式后，可多选水果并批量删除。主要功能包括：* 水果管理：通过弹窗选择水果，添加到展示列表中，防止重复选择。* 列表显示：水果项动态展示，序号和名称清晰，并支持通过背景颜色高亮已选中项。* 编辑模式：长按水果项进入编辑模式，显示复选框，用户可多选需要删除的水果。* 删除功能：选中水果后点击删除按钮，将选中的水果从列表中移除，同时退出编辑模式。

在 ArkUI 中，ForEach 是用于遍历数据数组并动态渲染 UI 组件的一种方法。它类似于 JavaScript 中的 Array.forEach，但在 UI 框架中，它有特定的要求来确保每个渲染项都有唯一标识，以便在组件更新时保持高效、准确的渲染。通过 ForEach 方法，可以高效地遍历数据并动态生成 UI 项目，非常适合用于列表、网格等多项数据的展示。

一个程序由多个部分组成，我们先举个例子源码1，创建一个卡片效果以显示每个人的各项信息。有具体显示样式的函数方法Message_view，然后还有接口部分Message，以及一个入口文件。我们先把相关内容功能全部编写运行于一个文件内，先运行显示一下效果。然后将卡片显示样式的方法部分，和接口类型部分，拆分各放于其他文件中，再使用导入和导出的方式，再次运行程序呈现效果。程序运行的观看效果界面相同，只是呈现代码的方式不同。本文大目标仍是展示自定义构建函数的参数传递效果的。我们都知道一个程序是多个功能组成的，每个文

ArkUI 中相对布局 RelativeContainer ，可以使用 alignRules 属性来定义组件之间的相对位置关系。定义组件相对其他组件或容器的对齐方式，包括横向 (HorizontalAlign) 和纵向 (VerticalAlign) 对齐。之后，也可以根据需要结合使用offset相对定位等属性，来对组件进一步的位置调整更改，当然本文未使用。

在 ArkUI 布局中，layoutWeight 和 Blank 是两个关键的布局控制属性，用于优化组件之间的空间分配和间距设置。这两者结合使用，可以轻松实现复杂的布局比例和间距调整。

国际化命名是考虑，有时候我们手机更改为英文模式，它的文件名称就更改为英文。其实也可以根据需要多加配置其他语言的。一般国内开发中文加英文便可。手机程序里设置的一些组件的显示名称也按需要添加好国际化名称。变量名通常要准备三份，配置文件一份，中文一份，英文一份。

在 ArkUI 中，Stack 布局是一个容器，它用于将多个子组件堆叠在一起。Stack 布局常用于实现垂直或水平的层叠效果。它的特点是所有的子组件都在同一层级上，因此会在同一空间内覆盖和堆叠。可以使用对齐属性来控制子组件在堆叠容器中的排列方式。用`alignContent：`来设置子组件的对齐方式。

在 ArkUI 中，绝对布局允许将子组件精确定位在容器中的特定位置，通过 position 属性设置 x 和 y 坐标即可实现。常用于需要精确位置的界面元素，例如按钮、图标等。绝对布局会脱离当前文档流，可以类比为一个画布，重新形成一个图层，根据x和y的定位重新设置位置。一旦组件通过 position 定位，它的显示位置与其他兄弟组件的排列无关。即使组件在视觉上与其他组件重叠或间隔，它的位置不会影响到其他组件的布局。

在 Flex 布局中，元素会根据容器的设置自动调整位置。例如，元素可以在主轴上按不同的对齐方式排列，如从左到右或从右到左，也可以调整元素之间的间距，确保布局的美观性。通过控制元素在交叉轴（与主轴垂直）上的对齐方式，可以让它们在容器中垂直居中或伸展以适应容器高度。Flex 布局还支持换行，当容器的空间不够时，元素会自动换行或列出。通过适当配置，可以精确控制每个元素的大小、位置和间距。我们可以轻松实现各种复杂的布局，而不必担心元素会被挤到容器外或错位。Flex 布局是为了应对现代网页和应用中动态、响应式的布

在 arkUI 中，Column 和 Row 是常用的布局容器，它们的对齐方式是通过主轴（Main Axis）和交叉轴（Cross Axis）来控制的。Column 布局的主轴是 **垂直方向**，交叉轴是 **水平方向**。通过 **FlexAlign** 和 **HorizontalAlign** 可以分别控制主轴和交叉轴的对齐方式。Row 是一个水平布局容器，子组件会按照从左到右的顺序排列，主轴（水平轴） **FlexAlign** 和交叉轴（垂直轴）**VerticalAlign** 对齐。

本文源码1实现了一个漂亮且功能齐全的进度条展示组件，通过使用 ProgressType 来实现不同类型的进度条，包含线性进度条、环形进度条、椭圆进度条、刻度环形进度条和胶囊进度条。对于未来的扩展，可以考虑增加进度动态更新、响应式布局、交互动画等功能，提升用户体验。

本文代码展示了如何使用 Toggle 组件来实现复选框、开关和按钮类型的交互，特别是如何通过按钮类型的 Toggle 来切换图片显示。关键点是 @State 变量的使用，使得图片的路径可以动态更新，并通过 onChange 回调实现图片的切换。Row 组件内通过使用 Image 显示图片，并结合 Toggle 类型的切换按钮来实现动态交互。

Column：垂直布局组件，子组件从上到下依次排列。适合需要纵向展示内容的场景。通过 space 属性可以控制子组件之间的垂直间距，width 和 height 属性可以按百分比调整子组件大小。Row：水平布局组件，子组件从左到右依次排列。适合横向排列的内容展示，space 属性可调整子组件间的水平间距，layoutWeight 用于平分或调整组件占用的空间比例。

我们可以在ArkUI 中使用内外边距（padding 和 margin）、边框（border）以及圆角（borderRadius）来调整组件的布局和外观。这些样式是前端开发中常用的布局技巧，能够大幅提升界面的美观性和可用性。每个组件的常见用法都有必要记录一下，后续有不懂的可以回顾查看。毕竟官方文档，有些繁杂的。自己积累自己的文本库。碰到啥记录啥，这些都是经验的积累。没想到不难的内容，编写也要耗费这么多时间。

简单记录arkUI文本框和文本域的基本创建及使用方法。源码添加了许多注释，足够用于理解，且没有很复杂的内容，所以便不过额外多做文字说明了。