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点击触发逻辑,可动态三元切换按钮文字。
  1. 尺寸:固定数值width(300) / 百分比width("100%")
  2. 圆角:.borderRadius(),数值越大弧度越大,头像可直接设为圆形
  3. 颜色:0xFFRRGGBB十六进制、系统内置Color.xxx常量
  4. 文字:.fontSize()字号、.fontWeight(FontWeight.Bold)加粗、.textAlign对齐
  5. 间距:布局初始化space统一间距、.margin()外边距、.padding()内边距

Logo

作为“人工智能6S店”的官方数字引擎,为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐