ArkTS状态管理:@State、@Link、@Prop
ArkTS 中,@State 是数据源头,变化会自动重渲染 UI;@Link 让父子双向同步,父传参用 $count,子不能赋初值,类型须一致,支持对象和数组;@Prop 父到子单向传值,子拿副本,父改子变、子改父不变,仅支持简单类型,不支持对象和数组。选法:数据归谁用 @State;子要改父数据用 @Link,只读展示用 @Prop;对象或数组必须用 @Link。可记为:@State 原件,@Link 钥匙,@Prop 复印件。
记录此分类下的每一次思考与沉淀
ArkTS 中,@State 是数据源头,变化会自动重渲染 UI;@Link 让父子双向同步,父传参用 $count,子不能赋初值,类型须一致,支持对象和数组;@Prop 父到子单向传值,子拿副本,父改子变、子改父不变,仅支持简单类型,不支持对象和数组。选法:数据归谁用 @State;子要改父数据用 @Link,只读展示用 @Prop;对象或数组必须用 @Link。可记为:@State 原件,@Link 钥匙,@Prop 复印件。
当前输入仅包含一张图片链接和一个 PPT 文件链接,没有可供读取的文章正文内容,因此无法在不补充正文之外事实的前提下完成摘要。请补充文章正文文字版,或直接粘贴需要提炼的内容;收到后可按要求输出 150-220 字、准确简洁、保留核心观点和读者收益的中文摘要。若图片或 PPT 中包含正文,也请将其文字内容粘贴出来,以便覆盖主题、关键结论和重要事实。
文章通过两段示例代码对比绝对定位 position 与相对定位 offset 的用法。position 示例在粉色 Column 中放置四个 80×80 的红色文本块,坐标分别为 (0,0)、(80,80)、(160,160)、(240,240),呈现沿对角线错位排布。offset 示例同样设置四个红色文本块,前三个 x 偏移分别为 0、80、160,y 均为 0,第四个未设置偏移,用于展示相对偏移效果。外层容器宽 100%、高 360。读者可据此了解两种定位属性的参数写法、定位方式及布局表现。
该内容以表格对比子组件垂直排列与水平排列两种方式。垂直排列时,主轴方向向下,交叉轴方向向右,默认对齐为顶部居中;水平排列时,主轴方向向右,交叉轴方向向下,默认对齐为左居中。主轴对齐方向通过同一示意图集中展示,交叉轴对齐则分别配图说明两种排列下的对齐效果。由此可明确:排列方向会直接改变主轴与交叉轴的方向定位,并影响默认对齐基准;理解这些对应关系,有助于快速判断和设置子组件在容器中的布局位置。
本实验以HarmonyOS初始工程为基础,使用ArkTS实现页面跳转。创建工程后,修改Index.ets显示“登录页面”并添加按钮,再新建Second.ets作为“登录成功页面”并确认路由。为按钮绑定点击事件,通过路由模块完成跳转与返回。文章提示原router包方法已不维护,API12及以后推荐使用UIContext的Router类。最终点击跳转进入第二页,点击返回回到首页,帮助读者熟悉开发工具与ArkTS页面路由。
该文解析了基于HarmonyOS ArkUI 3.0与TypeScript开发的用户登录页面。页面采用声明式UI与分层组件架构,通过@Entry、@Component、@State等装饰器实现状态驱动的界面更新。核心功能包括手机号非空及格式校验(正则表达式)、实时错误反馈、防重复提交的登录流程,并展示输入框封装、按钮加载态切换、条件渲染成功视图等关键实现。文章还详解了以#1FA485为主色的视觉规范、响应式布局策略及性能优化思路,如最小化状态管理、减少嵌套层级。整体架构清晰,是学习ArkUI声明式开发、表单验证与移动端界面设计的实用范例。
本文解析基于 HarmonyOS ArkUI 开发的注册页面 textinput1.ets,展示声明式 UI 与响应式状态管理的最佳实践。页面采用分层组件结构,使用 @State 管理账号、密码、邮箱及提交状态,通过条件渲染切换注册表单与成功视图。关键技术包括:TextInput 的 onChange 双向绑定、按钮加载状态与防重复提交、setTimeout 模拟网络请求、$r() 资源引用,以及统一绿色主题与百分比布局的响应式设计。文章还涵盖性能优化要点,如最小化状态变量、减少嵌套和条件渲染。该范例架构清晰,适合开发者学习用 ArkUI 快速构建高质量移动端表单界面。
文章介绍自定义文本样式中文本溢出处理方案,强调需配合 `maxLines` 使用。`TextOverflow.None` 不做溢出处理,文本撑破容器,适用于不限制行数场景;`Clip` 直接截断超出文本,无省略标记,适合空间紧张的列表项;`Ellipsis` 在末尾显示省略号,用于标题等提示未完全展示;`MARQUEE` 以滚动跑马灯循环显示,适合单行通知栏。正文通过热搜列表完整代码展示各模式实际应用,帮助开发者按需选择溢出策略,实现单行截断、滚动展示等效果。
本文介绍HarmonyOS ArkUI中Text文本组件的核心用法。创建文本可直接使用`Text('你好')`,也可通过Resources资源引用`string.json`中的字符串。Text支持添加Span子组件,通过嵌套语法实现更精细的样式控制,Span仅能作为Text和RichEditor的子组件。文本装饰可用`decoration`设置下划线及颜色,例如`TextDecorationType.Underline`搭配`Color.Green`。`textCase`可控制文本内容大小写,支持LowerCase和UpperCase两种模式。`onclick`为单击事件,可响应用户点击操作。读者可据此灵活构建带样式与交互的文本界面。
objectFit 的 ImageFit 提供了六种图片适配模式。contain 保持宽高比,图片完整显示于容器内,可能有留白;cover 保持比例并填满容器,多余部分裁剪,适合头像、Banner;auto 根据图片横竖方向自动选择 contain 或 cover;fill 完全拉伸填满容器,会变形失真;scaleDown 类似 contain 但只缩小不放大,避免小图模糊;none 保持原始尺寸居中,超出裁剪或留白。选择时需根据是否允许裁剪、是否需防变形、是否保留原始像素等需求确定,帮助开发者让图片在不同容器中达到预期展示效果。