标签

ArkTs

探索此标签下的所有文章

27 篇文章 标签归档 全部标签

文章列表

ArkTS状态管理:@State、@Link、@Prop

ArkTS 中,@State 是数据源头,变化会自动重渲染 UI;@Link 让父子双向同步,父传参用 $count,子不能赋初值,类型须一致,支持对象和数组;@Prop 父到子单向传值,子拿副本,父改子变、子改父不变,仅支持简单类型,不支持对象和数组。选法:数据归谁用 @State;子要改父数据用 @Link,只读展示用 @Prop;对象或数组必须用 @Link。可记为:@State 原件,@Link 钥匙,@Prop 复印件。

ArkTsHarmonyOS NEXTArkUI
鸡腿大王 ArkTs 29

arkui-线性布局

该内容以表格对比子组件垂直排列与水平排列两种方式。垂直排列时,主轴方向向下,交叉轴方向向右,默认对齐为顶部居中;水平排列时,主轴方向向右,交叉轴方向向下,默认对齐为左居中。主轴对齐方向通过同一示意图集中展示,交叉轴对齐则分别配图说明两种排列下的对齐效果。由此可明确:排列方向会直接改变主轴与交叉轴的方向定位,并影响默认对齐基准;理解这些对应关系,有助于快速判断和设置子组件在容器中的布局位置。

笔记HarmonyOS NEXTArkTsArkUI
鸡腿大王 ArkUI 27

HarmonyOS页面跳转实验:ArkTS登录跳转实操

本实验以HarmonyOS初始工程为基础,使用ArkTS实现页面跳转。创建工程后,修改Index.ets显示“登录页面”并添加按钮,再新建Second.ets作为“登录成功页面”并确认路由。为按钮绑定点击事件,通过路由模块完成跳转与返回。文章提示原router包方法已不维护,API12及以后推荐使用UIContext的Router类。最终点击跳转进入第二页,点击返回回到首页,帮助读者熟悉开发工具与ArkTS页面路由。

ArkUIArkTs
鸡腿大王 ArkTs 28

HarmonyOS ArkUI 用户登录页面技术解析

该文解析了基于HarmonyOS ArkUI 3.0与TypeScript开发的用户登录页面。页面采用声明式UI与分层组件架构,通过@Entry、@Component、@State等装饰器实现状态驱动的界面更新。核心功能包括手机号非空及格式校验(正则表达式)、实时错误反馈、防重复提交的登录流程,并展示输入框封装、按钮加载态切换、条件渲染成功视图等关键实现。文章还详解了以#1FA485为主色的视觉规范、响应式布局策略及性能优化思路,如最小化状态管理、减少嵌套层级。整体架构清晰,是学习ArkUI声明式开发、表单验证与移动端界面设计的实用范例。

笔记ArkUIHarmonyOS NEXTArkTs
鸡腿大王 ArkTs 48

HarmonyOS ArkUI 用户注册页面技术解析

本文解析基于 HarmonyOS ArkUI 开发的注册页面 textinput1.ets,展示声明式 UI 与响应式状态管理的最佳实践。页面采用分层组件结构,使用 @State 管理账号、密码、邮箱及提交状态,通过条件渲染切换注册表单与成功视图。关键技术包括:TextInput 的 onChange 双向绑定、按钮加载状态与防重复提交、setTimeout 模拟网络请求、$r() 资源引用,以及统一绿色主题与百分比布局的响应式设计。文章还涵盖性能优化要点,如最小化状态变量、减少嵌套和条件渲染。该范例架构清晰,适合开发者学习用 ArkUI 快速构建高质量移动端表单界面。

笔记ArkUIHarmonyOS NEXTArkTs
鸡腿大王 ArkUI 43

arkui-text文本(第二期)

文章介绍自定义文本样式中文本溢出处理方案,强调需配合 `maxLines` 使用。`TextOverflow.None` 不做溢出处理,文本撑破容器,适用于不限制行数场景;`Clip` 直接截断超出文本,无省略标记,适合空间紧张的列表项;`Ellipsis` 在末尾显示省略号,用于标题等提示未完全展示;`MARQUEE` 以滚动跑马灯循环显示,适合单行通知栏。正文通过热搜列表完整代码展示各模式实际应用,帮助开发者按需选择溢出策略,实现单行截断、滚动展示等效果。

笔记HarmonyOS NEXTArkUIArkTs
鸡腿大王 ArkUI 29

arkui课上练习-布局

本文展示了一个使用HarmonyOS ArkUI(JavaScript)实现的注册页面示例。页面采用Column垂直布局为主容器,内部通过多个Row水平布局组合图标与TextInput输入框,分别实现用户名、密码、确认密码和邮箱的输入,其中密码类输入框设置了Password或Email类型。页面顶部包含欢迎标题、副标题及图标,底部提供“注册账号”主按钮、分隔文字以及三个第三方登录图标。整体布局使用圆角背景、透明输入框和弹性居中样式,体现ArkUI声明式UI的常用组件搭配与样式设置方法。读者可参考此示例快速搭建结构完整、样式统一的移动端注册表单,并了解Column/Row布局、输入框类型、按钮及图标资源的使用方式。

JavaScriptArkUIHarmonyOS NEXTArkTs
鸡腿大王 ArkUI 51

arkui-微信通讯录实例

文章以鸿蒙ArkTS代码示例展示如何构建仿微信联系人页面。页面用@Entry标记入口组件,Column垂直布局承载结构,List与ListItem实现可滚动分组列表,Row配合Image与Text实现头像加名称排列。内容分“HI'鸭鸭乐”和“我的朋友”两组,含新的联系人、仅聊天的朋友、群聊、标签、公众号、服务号及多位好友条目。列表通过divider设置分割线起始边距,整体浅灰背景与圆角头像还原微信风格。读者可掌握ArkTS常用组件组合、分组列表及基础样式配置。

笔记JavaScriptArkUIHarmonyOS NEXTArkTs
鸡腿大王 ArkUI 29

Arkui-组件

组件是独立的代码块,具备特定功能与样式,可在页面中独立使用并重复调用。ArkUI为开发者提供现成组件,用于快速构建UI,提升开发效率与界面一致性。文章列举了ArkUI中常用的通用属性和通用事件,并通过“ok按钮”示例展示组件的基本使用方法:代码中创建Button组件,设置点击事件回调、宽度、高度、圆角、字号,以及通过alignRules进行底部居中布局并设置下边距。该示例帮助读者理解组件的属性配置与事件绑定方式,掌握实际开发中的基础操作。

笔记JavaScriptArkUIHarmonyOS NEXTArkTs
鸡腿大王 ArkUI 33

ArkTs中的while循环

ArkTS 中 while 循环用于在指定条件为真时重复执行代码块,语法和执行逻辑与 TypeScript/JavaScript 一致。基本形式为“while (条件表达式) { 循环体 }”,每次执行前先判断条件。ArkTS 还支持 do-while 循环,核心区别是先执行一次循环体再判断条件,因此循环体至少执行一次;其语法末尾需带分号。文章通过示例展示两种循环的用法,帮助开发者快速掌握 ArkTS 循环控制的基础写法。

JavaScriptHarmonyOS NEXTArkTs
鸡腿大王 ArkTs 52