鸿蒙语法、组件、样式
·
有什么错误请告知，我会及时更新～
容器组件
通用事件
.onTouch((event: TouchEvent) => void)
触摸按下/移动/抬起 全套触发
.onClick(() => void)
点击（大部分组件都支持）
.onLongPress((event: LongPressEvent) => void)
长按
.onAppear(() => void)
组件显示出来时
.onDisAppear(() => void)
组件消失时
.onAreaChange((area: AreaChangeEvent) => void)
宽高/位置发生变化时
.onHover((isHover: boolean) => void)
鼠标悬停进入/离开
.onFocus(() => void)
获得焦点
.onBlur(() => void)
失去焦点
.onKeyEvent((event: KeyEvent) => void)
键盘按键触发
.onDragStart((event: DragEvent) => void)
开始拖拽
.onDragMove((event: DragEvent) => void)
拖拽移动中
.onDragEnd((event: DragEvent) => void)
拖拽结束
.onDragEnter(() => void)
拖拽进入本组件
.onDragLeave(() => void)
拖拽离开本组件
.onDrop((event: DragEvent) => void)
拖拽松手放下
通用样式
一、尺寸大小
.width(value) // 宽度
.height(value) // 高度
.minWidth(value) // 最小宽
.maxWidth(value) // 最大宽
.minHeight(value) // 最小高
.maxHeight(value) // 最大高
.layoutWeight(value) // 权重（Row/Column/Flex）
二、内外边距
.margin(value) // 外边距
.padding(value) // 内边距
对象写法：
.margin({ top: 10, left: 20 })
.padding({ all: 15 })
三、背景
.backgroundColor(color) // 背景颜色
color.red
'#000'
.backgroundImage(url) // 背景图片
.backgroundImageSize(width, height) // 背景图片宽高
.backgroundImagePosition(x, y) //背景偏移
.backgroundBlur(radius) // 背景模糊
四、边框 & 圆角
.borderWidth(值) // 边框宽度
.borderColor(色值) // 边框颜色
.borderStyle(样式) // BorderStyle.Solid | Dashed | Dotted
.borderRadius(值) // 统一圆角
.borderTopWidth(值)
.borderTopColor(色值)
.borderTopLeftRadius(值)
.borderTopRightRadius(值)
.borderBottomLeftRadius(值)
.borderBottomRightRadius(值)
五、透明度、可见、不可点击
.opacity(value) // 0~1
.visibility(visibility) // Visible/Hidden/Gone
.enabled(bool) // false=不可点击
.touchable(bool) // 是否可触摸
六、阴影
.shadow(radius)
.shadow({
radius: 5,
color: '#333',
offsetX: 2,
offsetY: 2
})
七、定位 & 层级
.zIndex(value) // 层级
.position({ x, y }) // 相对父组件偏移
.alignment(align) // 在Stack/父容器中的对齐
八、变形（缩放、旋转、平移）
.scale(x, y)
.rotate(angle) // 角度
.translate(x, y)
.transform(matrix) // 矩阵变换
九、裁剪 & 圆角溢出
.clip(bool) // 裁剪超出部分
.clipRect(rect)
.borderRadius 后超出自动被裁
十、布局约束
.layoutDirection(direction) // LTR/RTL
.alignSelf(align) // 自身在Flex/Row/Column中的对齐
.flexGrow(value)
.flexShrink(value)
.flexBasis(value)
十一、灰化、模糊、高亮
.blur(半径) // 模糊
.grayscale(0~1) // 灰度
.brightness(0~∞) // 亮度
.contrast(0~∞) // 对比度
.saturate(0~∞) // 饱和度
.invert(0~1) // 反色
十二、动画过渡
.transition(transitionObj) // 入场退场动画
.transition({
opacity: 0, // 开始透明
scale: 0.5, // 开始缩小
duration: 300
})
.animation(animationObj) // 属性变化动画
.animation({
duration: 300, // 动画时长，毫秒
curve: Curve.EaseInOut, // 动画曲线：慢-快-慢
Curve.Linear // 匀速
Curve.EaseIn // 慢进
Curve.EaseOut // 慢出
Curve.EaseInOut // 慢进慢出（最常用）
Curve.FastOutSlowIn // material 标准曲线
delay: 0, // 延迟多久开始
iterations: 1, // 重复次数
playMode: PlayMode.Normal // 播放模式
})
十三、光标样式（富交互）
.cursor(type) // 默认/手指/文本等光标
十四、遮罩
.mask(image)
组件
Column() // 垂直
.justifyContent(FlexAlign.Start)
FlexAlign.Start （默认）靠上
FlexAlign.Center 居中
FlexAlign.End 靠下
FlexAlign.SpaceBetween 两端对齐，中间均分
FlexAlign.SpaceAround 左右有间距
FlexAlign.SpaceEvenly 平均分布
.alignItems(ItemAlign.Start)
ItemAlign.Start 靠左
ItemAlign.Center 居中
ItemAlign.End 靠右
ItemAlign.Stretch 拉伸（默认）
.space(number | string) 子元素间距 10 || 10vp
Row() // 水平
.justifyContent(FlexAlign.Start) // 默认：左对齐
FlexAlign.Start // 默认：左对齐
FlexAlign.Center // 水平居中
FlexAlign.End // 右对齐
FlexAlign.SpaceBetween // 两端贴边，中间均分
FlexAlign.SpaceAround // 两边间距=中间一半
FlexAlign.SpaceEvenly // 所有间距相等
.alignItems(ItemAlign.Start) // 顶部对齐
ItemAlign.Start
ItemAlign.Center
ItemAlign.End
ItemAlign.Stretch
.space(10) // 间距。示例 10 || '10vp'
.layoutWeight(1) // 权重
Stack() // 叠加
.align (Alignment)
Alignment.TopStart // 左上角
Alignment.TopCenter // 顶部居中
Alignment.TopEnd // 右上角
Alignment.CenterStart // 左侧居中
Alignment.Center // 正中间（默认）
Alignment.CenterEnd // 右侧居中
Alignment.BottomStart // 左下角
Alignment.BottomCenter // 底部居中
Alignment.BottomEnd // 右下角
.clipContent (boolean)
true // 超出部分裁剪（默认）
false // 超出部分不裁剪
Flex() // 弹性布局
.justifyContent (FlexAlign)
FlexAlign.Start // 主轴起点对齐（默认）
FlexAlign.Center // 主轴居中
FlexAlign.End // 主轴终点对齐
FlexAlign.SpaceBetween // 两端贴边，中间均分
FlexAlign.SpaceAround // 两边间距 = 中间一半
FlexAlign.SpaceEvenly // 所有间距完全相等
.alignItems (ItemAlign)
ItemAlign.Start // 交叉轴起点对齐
ItemAlign.Center // 交叉轴居中
ItemAlign.End // 交叉轴终点对齐
ItemAlign.Stretch // 交叉轴拉伸填满（默认）
ItemAlign.Auto // 自动
.direction (FlexDirection)
FlexDirection.Row // 水平方向（默认）
FlexDirection.Column // 垂直方向
FlexDirection.RowReverse // 水平反向
FlexDirection.ColumnReverse // 垂直反向
.wrap (FlexWrap)
FlexWrap.NoWrap // 不换行，挤一行（默认）
FlexWrap.Wrap // 自动换行
FlexWrap.WrapReverse // 反向换行
.alignContent (FlexAlign)
FlexAlign.Start // 多行靠起点
FlexAlign.Center // 多行整体居中
FlexAlign.End // 多行靠终点
FlexAlign.SpaceBetween // 多行两端对齐
FlexAlign.SpaceAround // 多行间距环绕
FlexAlign.SpaceEvenly // 多行间距平均
.space (number | string)
子元素间距 10 || 10vp
// 子组件在 Flex 里的独有属性（子组件自己用）
.flexGrow (number) // 占剩余空间比例
.flexShrink (number) // 空间不足时收缩比例
.flexBasis (Length) // 基准宽度 / 高度
.alignSelf (ItemAlign) // 单独修改交叉轴对齐方式
Grid() // 网格
.columnsTemplate (string)
'1fr 1fr 1fr' 3 // 列等宽
'100vp 200vp' // 固定两列
'repeat (4, 1fr)' 4 // 列等宽
.rowsTemplate (string)
'1fr 1fr' 2 // 行等高
'100vp 100vp' // 固定两行
'repeat (3, 1fr)' 3 // 行等高
.columnsGap (length)
列间距 10 || 10vp
.rowsGap (length)
行间距 10 || 10vp
.justifyContent (FlexAlign)
FlexAlign.Start // 整体靠左（默认）
FlexAlign.Center // 整体水平居中
FlexAlign.End // 整体靠右
FlexAlign.SpaceBetween // 左右贴边均分
FlexAlign.SpaceAround // 两边间距 = 中间一半
FlexAlign.SpaceEvenly // 所有间距相等
.alignItems (ItemAlign)
ItemAlign.Start // 子项顶部对齐
ItemAlign.Center // 子项垂直居中
ItemAlign.End // 子项底部对齐
ItemAlign.Stretch // 子项拉伸填满（默认）
.alignContent (FlexAlign)
FlexAlign.Start // 整体靠上
FlexAlign.Center // 整体垂直居中
FlexAlign.End // 整体靠下
FlexAlign.SpaceBetween // 上下均分
FlexAlign.SpaceAround // 上下环绕间距
FlexAlign.SpaceEvenly // 所有间距平均
.layoutDirection (FlexDirection)
FlexDirection.Row // 从左到右（默认）
FlexDirection.RowReverse // 从右到左
FlexDirection.Column // 垂直布局
FlexDirection.ColumnReverse 垂直反向
// Grid 子项独有属性（GridItem 用）
.gridColumn (number | string)
占几列：1 / 3（跨第 1~3 列）
.gridRow (number | string)
占几行：1 / 2（跨第 1~2 行）
GridItem() // Grid 的固定子组件
.gridColumn(number | string)
1 // 占第1列
'1' // 占第1列
'1 / 3' // 从第1列跨到第3列（占2列）
'span 2' // 跨2列
.gridRow(number | string)
1 // 占第1行
'1' // 占第1行
'1 / 3' // 从第1行跨到第3行（占2行）
'span 2' // 跨2行
List() // 长列表
.columnsTemplate(string)
'1fr' // 1列列表（默认）
'1fr 1fr' // 2列网格列表
'repeat(3,1fr)' // 3列网格列表
.rowsTemplate(string)
仅WaterFlow模式使用，普通List不用
.alignListItem(ItemAlign)
ItemAlign.Start // 子项左对齐
ItemAlign.Center // 子项居中
ItemAlign.End // 子项右对齐
ItemAlign.Stretch // 子项拉伸填满（默认）
.listDirection(Axis)
Axis.Vertical // 垂直列表（默认）
Axis.Horizontal // 水平列表
.divider({
strokeWidth: number, // 分割线宽度
color?: Color, // 颜色
startMargin?: number, // 左边距
endMargin?: number // 右边距
})
开启列表分割线
.scrollBar(BarState)
BarState.Off // 隐藏滚动条
BarState.On // 显示滚动条
BarState.Auto // 自动显示/隐藏
.edgeEffect(EdgeEffect)
EdgeEffect.Spring // 弹簧回弹效果（默认）
EdgeEffect.Fade // 渐隐效果
EdgeEffect.None // 无效果
.cachedCount(number)
设置预加载item数量，优化长列表
.scrollEnabled(boolean)
true // 允许滚动（默认）
false // 禁止滚动
ListItem () // List 必须的子组件
.sticky(StickyStyle)
StickyStyle.None // 不吸顶（默认）
StickyStyle.Normal // 普通吸顶
StickyStyle.Transparent // 透明吸顶
.align(VerticalAlign)
VerticalAlign.Top // 顶部对齐
VerticalAlign.Center // 居中
VerticalAlign.Bottom // 底部对齐
.clickable(boolean)
true 可点击（默认）
false 不响应点击
ListItemGroup () // 列表分组（可选）
.header(builder) // 组头
.footer(builder) // 组尾
Scroll() // 滚动
.scrollable (ScrollDirection)
ScrollDirection.Vertical // 垂直滚动（默认）
ScrollDirection.Horizontal // 水平滚动
ScrollDirection.Both // 双向滚动
.scrollBar (BarState)
BarState.Off // 隐藏滚动条
BarState.On // 显示滚动条
BarState.Auto // 滚动时显示
.edgeEffect (EdgeEffect)
EdgeEffect.Spring // 弹簧回弹效果（默认）
EdgeEffect.Fade // 边缘渐隐
EdgeEffect.None // 无效果
.scrollEnabled (boolean)
true // 允许滚动（默认）
false // 禁止滚动
Refresh() // 下拉刷新
入参
Refresh({
refreshing: $$boolean, // 必选，双向绑定刷新状态（API11+支持元服务）
offset: number | string, // 废弃，11+建议用 refreshOffset，取值[0,64vp]
friction: number, // 废弃，11+建议用 pullDownRatio，取值0-100
promptText: string, // 12+，底部自定义提示文本
builder: CustomBuilder, // 10+，自定义刷新区域（12+推荐用 refreshingContent 替代）
refreshingContent: ComponentContent // 12+，状态感知的自定义刷新区域
})
事件
.onStateChange((state: RefreshStatus) => void)
状态：Inactive/Drag/OverDrag/Refresh/Done
.onRefreshing(() => void)
进入刷新中时触发，需手动将 refreshing 设为 false 结束
.onOffsetChange((offset: number) => void) // 12+
下拉距离变化时实时回调（单位vp）
.refreshOffset(number) // 12+
64vp // 默认（无 promptText）
96vp // 设置了 promptText 时
.pullToRefresh(boolean) // 12+
true // 超过偏移量触发刷新（默认）
false // 不触发
.pullDownRatio(Optional<number>) // 12+
0-1 // 下拉跟手系数，越大越跟手
undefined // 动态自适应
.maxPullDownDistance(Optional<number>) // 20+
undefined // 默认无最大限制
数值 // 最大下拉距离（vp）
Swiper() // 轮播
.index (number)
默认 0，初始显示第几个子项
.autoPlay (boolean)
false 不自动播放（默认）
true 自动轮播
.interval (number)
自动播放间隔，默认 3000 毫秒
.loop (boolean)
true 循环播放（默认）
false 到最后一页停止
.indicator (boolean)
true 显示指示器（默认）
false 隐藏指示器
.indicatorStyle (object)
color: 颜色 未选中点颜色
selectedColor: 颜色 选中点颜色
size: 大小 未选中点尺寸
selectedSize: 大小 选中点尺寸
margin: 数字 点之间间距
.duration (number)
滑动动画时长，默认 500 毫秒
.vertical (boolean)
false 横向轮播（默认）
true 竖向轮播
.itemSpace (number)
子项之间的间距
.displayCount (number | string)
1 一页显示一个（默认）
'auto' 自动适配
数字 一页显示多个
.effect (SwipeEffect)
SwipeEffect.Default 平滑滑动（默认）
SwipeEffect.Scale 渐隐缩放效果
.disableSwipe (boolean)
false 允许手势滑动（默认）
true 禁止手动滑动
独有事件
.onChange ((index: number) => void)
页面切换后触发，返回当前下标
Tabs // 选项卡 / 底部导航
.index(number) // 默认选中索引
.barPosition(BarPosition) // 标签位置
BarPosition.Start // 顶部（默认）
BarPosition.End // 底部（常用）
BarPosition.Left // 左侧（垂直）
BarPosition.Right // 右侧（垂直）
.vertical(boolean) // 垂直布局（侧边栏）
.scrollable(boolean) // 标签可滚动
.indicatorStyle(...) // 指示器样式（颜色、宽高）
事件
.onChange((index: number) => {}) // 切换时
.onContentWillChange((index: number) => boolean) // 切换前拦截（可阻止）
.onTabBarClick((index: number) => {}) // 点击标签
TabContent // Tabs独有子组件
.tabBar(string | CustomBuilder) // 设置标签（文字/自定义）
交互组件
Button()
.type (ButtonType)
ButtonType.Normal 默认矩形
ButtonType.Capsule 胶囊圆角（常用）
ButtonType.Circle 圆形
ButtonType.Text 纯文本
.stateEffect (boolean)
true 启用点击效果（默认）
false 禁用点击效果
TextInput()
.type (InputType)
InputType.Normal 普通文本
InputType.Password 密码
InputType.Number 数字
InputType.Email 邮箱
.placeholder (string)
提示文字
.placeholderColor (Color)
提示文字颜色
.maxLength (number)
最大输入长度
.inputFilter (string)
正则过滤输入
独有事件
.onChange((value: string) => {})
.onSubmit((enterKey: EnterKeyType) => {})
Checkbox()
.select (boolean)
true 选中
false 未选中
.selectedColor (Color)
选中颜色
独有事件
.onChange((value: boolean) => {})
Radio()
.value (string)
单选值
.group (string)
分组名（同组互斥）
.checked (boolean)
true 选中
false 未选中
.selectedColor (Color)
选中颜色
独有事件
.onChange((value: boolean) => {})
Switch()
.select (boolean)
true 开启
false 关闭
.selectedColor (Color)
开启颜色
独有事件
.onChange((value: boolean) => {})
Slider()
.min (number)
最小值
.max (number)
最大值
.value (number)
当前值
.step (number)
步长
.trackColor (Color)
轨道底色
.selectedColor (Color)
已选颜色
独有事件
.onChange((value: number) => {})
Picker()
.range (string [] | ResourceStr [])
选择项数组
.selected (number)
默认选中项
独有事件
.onChange((value: string, index: number) => {})
DatePicker()
.start (Date)
开始日期
.end (Date)
结束日期
.selected (Date)
默认选中日期
.lunar (boolean)
true 显示农历
false 不显示
独有事件
.onChange((value: Date) => {})
导航组件（路由）
Navigation() // 主路由容器
.mode(NavigationMode) // 显示模式
NavigationMode.Stack // 单栏（手机）
NavigationMode.Split // 分栏（平板）
NavigationMode.Auto // 自动适配（推荐）
.title(string | CustomBuilder) // 标题（支持自定义）
.menus(Array | CustomBuilder) // 右上角菜单
.toolBar(CustomBuilder) // 底部工具栏
.hideTitleBar(boolean) // 隐藏标题栏
.navDestination(navMap) // 绑定路由映射
独有事件
.onTitleClick(() => {}) // 标题点击
.onNavBarStateChange((isVisible: boolean) => {}) // 导航栏显隐
NavDestination() // Navigation独有子页面
.title(string | CustomBuilder) // 页面标题
.backButtonIcon(Resource) // 返回图标
.hideBackButton(boolean) // 隐藏返回按钮
事件
.onShown(() => {}) // 页面显示（类似onPageShow）
.onHidden(() => {}) // 页面隐藏
.onBackPressed(() => boolean) // 返回拦截（返回true拦截）
NavPathStack // 路由栈
方法
推入命名路由
navPathStack.pushPath({ name: string }); // 推入页面
推入带参数
navPathStack.pushPath({ name: string, param: Object }); // 带参跳转
弹出栈顶
navPathStack.pop(): NavDestinationInfo | null; // 返回上一页
清空到指定页面
navPathStack.clearTo(name: string): void; // 清空并保留目标页
清空整个栈
navPathStack.clear(): void; // 清空所有页面
获取当前栈信息
navPathStack.getStackInfo(): Array<NavDestinationInfo>; // 获取页面栈
获取栈大小
navPathStack.getStackSize(): number; // 栈长度
推入命名路由（核心）
navPathStack.pushPath({ name: string }); // 推入命名路由
navPathStack.pushPath({ name: string, param: Object }); // 带参推入
按名称跳转（官方正规方法）
navPathStack.pushPathByName(name: string); // 按名称推入
navPathStack.pushPathByName(name: string, param: Object); // 带参推入
弹出栈顶
navPathStack.pop(): NavDestinationInfo | null; // 弹出栈顶页面
清空到指定页面
navPathStack.clearTo(name: string): void; // 清空到目标页
清空整个栈
navPathStack.clear(): void; // 清空所有页面
获取当前页面信息
navPathStack.getCurrent(): NavDestinationInfo | null; // 获取当前页面信息
获取指定页面信息
navPathStack.getDestinationInfo(name: string): NavDestinationInfo | undefined;
生命周期（页面显示 / 隐藏）
组件级----通用生命周期
.onAppear(() => { console.log("组件显示了") })
.onDisAppear(() => { console.log("组件消失了"") })
.onAreaChange((area: AreaChangeEvent) => { console.log("宽：", area.area.width) })
页面级----NavDestination 页面生命周期 ，只有被 Navigation 包裹的页面才有这一套。
.onShown(() => { console.log("页面打开/回到前台") // 常用于刷新数据 })
.onHidden(() => { console.log("页面被盖住/切走") })
.onBackPress(() => { console.log("用户点了返回") return false // 正常返回 // return true // 拦截返回，不退出 })
组件类
组件类自身----@Component 组件自身生命周期（构造 + 销毁）
@Component
struct MyComponent {
// 1. 构造函数：创建时
constructor() {
console.log("组件创建")
}
build() {
// ...
}
// 2. aboutToAppear：组件即将显示（比 onAppear 更早）
aboutToAppear() {
console.log("组件即将显示")
}
// 3. aboutToDisappear：组件即将销毁
aboutToDisappear() {
console.log("组件即将销毁")
}
}
执行顺序
页面打开：
constructor()
aboutToAppear()
onAppear()
onShown()
页面关闭 / 返回：
onBackPress()
onHidden()
onDisAppear()
aboutToDisappear()
@ 装饰器全集
V2 状态管理装饰器（API 12+ 推荐）
@ComponentV2 // 新一代组件定义
struct Demo {}
@Local // 组件内部私有状态（不能传给子组件）
@Local count: number = 0
@Param // 子组件接收外部参数（支持默认值）
@Param value: string = "default"
@Once // 仅初始化同步一次，之后不更新
@Once initData: string
@Event // 子组件向父组件抛出事件
@Event onChange: () => void
@Provider // 跨层级提供状态（后代可消费）
@Provider userInfo: User
@Consumer // 消费祖先的 @Provider 状态
@Consumer userInfo: User
@Monitor // 监听状态变化（替代V1 @Watch）
@Monitor('count')
onCountChange() {}
@Computed // 计算属性（自动依赖追踪）
@Computed get doubleCount() { return this.count * 2 }
@ObservedV2 // V2可观察对象（类装饰器）
@ObservedV2
class User {}
@Trace // 标记对象属性需要监听
@Trace name: string
@Type // 显式标记属性类型
@Type(String)
str: string
@ReusableV2 // 标记V2组件可复用（优化性能）
@ReusableV2
@ComponentV2
struct Child {}
V1 状态管理装饰器（兼容模式）
@Component // 传统组件定义
struct Demo {}
@State // 组件内部响应式状态
@State count: number = 0
@Prop // 父→子单向绑定
@Prop value: number
@Link // 父子双向绑定
@Link count: number
@Observed // V1可观察对象
@Observed
class User {}
@ObjectLink // 对象类型双向绑定
@ObjectLink user: User
@Provide // V1跨层级提供
@Provide data: string = "hi"
@Consume // V1跨层级消费
@Consume data: string
@Watch // 监听状态变化
@Watch('count')
update() {}
@StorageLink // AppStorage 双向同步
@StorageLink('token') token: string
@StorageProp // AppStorage 单向同步
@StorageProp('uid') uid: string
@LocalStorageLink // LocalStorage 双向
@LocalStorageLink('tab') tab: number
@LocalStorageProp // LocalStorage 单向
@LocalStorageProp('theme') theme: string
@Track // 对象属性精准追踪
@Track name: string
@Reusable // V1组件复用标记
@Reusable
@Component
struct Child {}
通用 UI / 工具装饰器
@Entry // 页面入口
@Entry
@ComponentV2
struct Page {}
@Preview // IDE预览
@Preview
@ComponentV2
struct PreviewDemo {}
@Constant // 编译期常量
@Constant COLOR = "#fff"
@Builder // 可复用UI片段
@Builder item() { Text("") }
@BuilderParam // 接收父组件UI片段
@BuilderParam content: () => void
@Styles // 组件私有样式
@Styles style() { .width(100) }
@Extend // 扩展系统组件样式
@Extend(Text) red() { .color(Color.Red) }
@AnimatableExtend // 可动画样式扩展
@AnimatableExtend(Text) animFont() { .fontSize(0) }
@Require // 构造参数必传校验
@Require name: string
@Concurrent // 并发函数
@Concurrent
function task() {}
常用系统方法
一、日志打印
console.log("普通日志"); // 基本打印日志
console.info("信息日志"); // 信息级别日志
console.debug("调试日志"); // 调试级别日志
console.warn("警告日志"); // 警告级别日志
console.error("错误日志"); // 错误级别日志
二、路由页面跳转
router.pushUrl({ url: "pages/Second" }); // 跳转到新页面
router.replaceUrl({ url: "pages/Second" }); // 替换当前页面
router.back(); // 返回上一页
router.getState(); // 获取当前路由信息
router.getStack(); // 获取路由栈列表
三、提示与弹窗
Toast.show({ message: "操作成功" }); // 轻提示弹窗
AlertDialog.show({ title: "", message: "" }); // 系统确认对话框
ActionSheet.show({ title: "", options: [] }); // 底部操作菜单
四、定时器
setTimeout(() => {}, 1000); // 延时执行一次
setInterval(() => {}, 1000); // 循环定时执行
clearTimeout(id); // 清除延时器
clearInterval(id); // 清除循环定时器
requestAnimationFrame(() => {}); // 下一帧执行
五、屏幕与单位转换
px2vp(100); // 像素转自适应单位
vp2px(100); // 自适应单位转像素
px2fp(100); // 像素转字体单位
fp2px(100); // 字体单位转像素
六、本地存储
AppStorage.setOrCreate("key", "value"); // 设置全局状态
AppStorage.get("key"); // 获取全局状态
AppStorage.delete("key"); // 删除全局状态
LocalStorage.set("key", "value"); // 设置页面级存储
LocalStorage.get("key"); // 获取页面级存储
七、网络请求
http.createHttp().request(url, options); // 发起网络请求
http.RequestMethod.GET; // GET请求方式
http.RequestMethod.POST; // POST请求方式
八、JSON 处理
JSON.stringify(obj); // 对象转JSON字符串
JSON.parse(str); // JSON字符串转对象
九、日期时间
Date.now(); // 获取当前时间戳
new Date().getFullYear(); // 获取当前年份
new Date().getMonth(); // 获取当前月份(0-11)
new Date().getDate(); // 获取当前日期
new Date().getHours(); // 获取当前小时
new Date().getMinutes(); // 获取当前分钟
new Date().getSeconds(); // 获取当前秒数
十、数组方法
arr.push(item); // 末尾添加元素
arr.pop(); // 删除末尾元素
arr.unshift(item); // 头部添加元素
arr.shift(); // 删除头部元素
arr.splice(index, 1); // 删除指定位置元素
arr.indexOf(item); // 查找元素索引
arr.includes(item); // 判断是否包含元素
arr.forEach(item => {}); // 遍历数组
arr.map(item => {}); // 数组映射
arr.filter(item => true); // 数组过滤
arr.sort((a,b)=>a-b); // 数组排序
arr.join(','); // 数组转字符串
十一、字符串方法
str.trim(); // 去除首尾空格
str.indexOf('a'); // 查找字符位置
str.includes('a'); // 判断是否包含字符
str.split(','); // 字符串切割为数组
str.substring(0,5); // 截取子字符串
str.toUpperCase(); // 转换为大写
str.toLowerCase(); // 转换为小写
str.replace('a','b'); // 替换字符
十二、数学方法
Math.random(); // 生成0-1随机数
Math.round(1.5); // 四舍五入
Math.floor(1.9); // 向下取整
Math.ceil(1.1); // 向上取整
Math.abs(-10); // 取绝对值
Math.max(1,2,3); // 取最大值
Math.min(1,2,3); // 取最小值
Math.pow(2,3); // 计算次方
Math.sqrt(16); // 计算平方根
十三、动画方法
animateTo({ duration: 300 }, () => {}); // 执行显式动画
.transition({ opacity: 0 }); // 组件过渡动画
十四、文件操作
fileIo.readFile(path); // 读取文件内容
fileIo.writeFile(path, content); // 写入文件内容
fileIo.unlink(path); // 删除文件
fileIo.mkdir(dir); // 创建目录
十五、设备信息
deviceInfo.deviceType; // 获取设备类型
deviceInfo.marketName; // 获取设备型号
deviceInfo.osFullName; // 获取系统版本
十六、生命周期方法
aboutToAppear(); // 组件即将创建
aboutToDisappear(); // 组件即将销毁
.onAppear(() => {}); // 组件显示
.onDisAppear(() => {}); // 组件消失
onShown(() => {}); // 页面显示
onHidden(() => {}); // 页面隐藏
onBackPress(); // 拦截返回按键
十七、常用事件
.onClick(() => {}); // 点击事件
.onTouch((e) => {}); // 触摸事件
.onLongPress(() => {}); // 长按事件
.onHover((isHover) => {}); // 鼠标悬停事件
.onFocus(() => {}); // 获得焦点事件
.onBlur(() => {}); // 失去焦点事件
.onChange((value) => {}); // 内容变化事件
.onScroll((e) => {}); // 滚动事件
十八、UI 渲染
ForEach(arr, item => {}); // 循环渲染组件
LazyForEach(dataProvider, item => {}); // 长列表懒加载渲染
if(show) { Text(""); } // 条件渲染
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)