UI详细释义

一、ArkTS基础认知声明式UI到底是什么2.1 命令式UI VS 声明式UI命令式UIAndroid XML布局代码和逻辑代码完全分离先写页面布局再单独写Java/TS代码修改控件样式代码割裂维护麻烦。声明式UI鸿蒙ArkTSUI结构、样式、交互逻辑全部写在一起采用链式调用代码自上而下一目了然数据直接驱动界面刷新开发效率大幅提升。2.2 ArkTS页面固定模板必背所有鸿蒙页面都遵循统一结构记住模板就能快速上手写代码// 页面入口装饰器标识当前为独立页面 Entry // 组件装饰器标识这是一个自定义组件 Component struct 页面名称 { // 状态变量、普通变量定义区域 // UI构建入口所有页面内容写在build中 build() { // 页面布局 控件 交互逻辑 } }三、鸿蒙常用内置UI组件页面搭建核心鸿蒙UI组件分为布局组件负责排版和基础控件负责展示内容日常学习和课设只用掌握以下6个即可。3.1 三大核心布局组件组件名作用使用场景Column垂直布局元素从上到下排列页面主体、表单、列表Row水平布局元素从左到右排列按钮组、轮播圆点、导航栏Stack层叠布局元素上下叠加图片叠加文字、蒙版弹窗3.2 四大高频基础控件Text文本展示组件用于显示文字Image图片组件支持本地资源/网络图片Button按钮组件绑定点击交互事件Swiper官方轮播组件自带滑动、自动播放能力3.3 UI组件简易演示代码Entry Component struct UIBaseDemo { build() { // 垂直布局子组件间距20vp Column({space:20}){ Text(鸿蒙UI组件基础演示) .fontSize(24) .fontWeight(FontWeight.Bold) Button(点击交互按钮) .width(160) .height(40) } // 页面铺满全屏 .width(100%) .height(100%) // 内容居中对齐 .justifyContent(FlexAlign.Center) } }鸿蒙ArkTS入门四大核心总结ArkTS语法牢记Entry、Component装饰器固定页面结构UI组件Column/Row搞定所有页面排版搭配基础控件完成页面展示状态管理State实现数据驱动数据变UI自动变自定义组件抽离重复模块提升代码复用性与可维护性