鸿蒙实操案例
·

Column:垂直排布,支持space统一设置组件间距,适配全屏页面
Row:水平排布,用于文字+开关同
1. Toggle滑块开关
交互:滑动触发onChange,布尔取反 this.isOpen=!this.isOpen
用途:日夜模式、功能启停,联动背景、文字切换
2. Button按钮
交互:点击触发onClick,逻辑和开关完全互通
用途:点击切换状态、执行功能操作
3. TextInput输入框
交互:输入触发onChange,接收value文本赋值状态变量
用途:实时输入、文本双向回显
行排版
1. 页面铺满:width('100%')、height('100%')
2. 颜色:系统Color常量 / 0x十六进制色值

boolean:开关、深色模式、记住密码string:输入框文本、展示文字number:计数器、数值运算
- 累加:
this.count = this.count + 1 - 递减:
this.count = this.count - 1

1. 展示类组件
- Text:静态文字 / 动态绑定状态文本;支持字号、字重、居中、文字颜色。
- Image:加载本地资源
$r("app.media.xxx"),支持宽高、圆形圆角裁剪。
2. 输入交互组件
- TextInput 输入框绑定
text关联状态,placeholder空白提示;onChange实时接收输入文本并赋值,实现双向回显;支持背景色、内边距、圆角美化。 - Toggle 滑块开关
ToggleType.Switch滑块样式;滑动触发onChange,布尔取反切换状态,多用于深色模式、记住密码勾选。 - Button 按钮支持固定宽高、圆角、自定义背景色;三色业务规范:蓝色主操作、灰色取消、红色危险删除;
onClick点击触发逻辑,可动态三元切换按钮文字。
- 尺寸:固定数值
width(300)/ 百分比width("100%") - 圆角:
.borderRadius(),数值越大弧度越大,头像可直接设为圆形 - 颜色:
0xFFRRGGBB十六进制、系统内置Color.xxx常量 - 文字:
.fontSize()字号、.fontWeight(FontWeight.Bold)加粗、.textAlign对齐 - 间距:布局初始化
space统一间距、.margin()外边距、.padding()内边距
更多推荐


所有评论(0)