1. 样式-语法
1.1 基本介绍
ArkTS 以声明方式组合和扩展组件来描述应用程序的 UI；同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑
1.2 用法
属性方法以 . 链式调用的方式配置系统组件的样式和其他属性
@Entry @Component struct Index { build() { Text('演示') .backgroundColor('red') .fontSize(50) .width('100%') .height(100) } }
复制代码
对于系统组件，ArkUI 还为其属性预定义了一些枚举类型。文档链接
@Entry @Component struct Index { build() { Text('演示') .fontSize(50) .width('100%') .height(100) .backgroundColor(Color.Blue) .textAlign(TextAlign.Center) .fontColor(Color.White) } }
复制代码
样式相关属性通过链式函数的方式进行设置
如果类型是枚举的，通过枚举传入对应的值
1.3 注意
注意： 有的属性强烈建议使用枚举（大部分枚举值都是数字，但是数字无法体现代码含义）
有的组件如 fontColor 可以使用系统自带颜色枚举，也可以使用色值
2. 样式-像素单位
官方文档地址:文档中心
2.1 基本介绍
ArkUI 为开发者提供 4 种像素单位，框架采用 vp 为基准数据单位
编辑
2.2 像素单位转换
编辑
在在样式中，我们如果写 px，那么 px 直接表示的是物理像素，也就是分辨率，那么我们的手机分辨率密度各有不同，无法针对这种密度写一个固定值，所以 vp 会自动根据手机密度去进行适配，所以 vp 它提供了一种灵活的方式来适应不同屏幕密度的显示效果。
3.1 基本介绍
假设我们就想针对 Text 进行字体和样式的复用，此时可以使用 Extend 来修饰一个全局的方法
使用 @Extend 装饰器修饰的函数只能是 全局
函数可以进行 传参，如果参数是状态变量，状态更新后会刷新 UI
且参数可以是一个函数，实现复用事件且可处理不同逻辑
注意： Extend 扩展符只能和使用它的组件位于同一个文件，不允许导入导出，导入导出也使用不了
3.2 代码示例
import { promptAction } from '@kit.ArkUI'
@Entry @Component struct Index {
build() { Column({ space: 20 }) { Button("微信支付") .payButton("alipay") Button("微信支付") .payButton("wechat") Button("微信支付") .payButton("alipay") Button("微信支付") .payButton("wechat") Button("微信支付") .payButton("alipay") Button("微信支付") .payButton("wechat") Button("微信支付") .payButton("alipay")
} .padding(20) .width('100%') } }
// 不允许导出@Extend(Button) function payButton (type: "alipay" | "wechat") { .type(ButtonType.Normal) .fontColor(Color.White) .width('100%') .height(50) .borderRadius(4) .backgroundColor(type === "wechat" ? "#00c168" : "#ff1256e0") .onClick(() => { if(type === "alipay") { promptAction.showToast({ message: '支付宝支付成功' }) }else { promptAction.showToast({ message: '微信支付成功' }) }
}) }
复制代码
3.3 注意
注意：@Extend()小括号里面要跟上要拓展组件的名称
4. 样式-@Styles 复用
4.1 基本介绍
在开发过程中会出现大量代码在进行重复样式设置，@Styles 可以帮我们进行样式复用
通用属性 通用事件
在 Styles 修饰的函数中能够点出来就是通用属性和事件-（比如 Text 的字体颜色-字体大小都不属于通用属性，类似 Button 里面就没字体颜色字体大小这些属性）
Styles 修饰的函数不允许传参数
注意： 全局 Styles 扩展符只能和使用它的组件位于同一个文件，不允许导入导出，导入导出也使用不了
4.2 代码示例
import { promptAction } from '@kit.ArkUI'
@Styles function payStyle () { .width('100%') .height(50) .borderRadius(4) .backgroundColor("#00c168") .onClick(() => { promptAction.showToast({ message: '微信支付成功' }) }) }
@Entry @Component struct Index { @Styles payStyle() { .width('100%') .height(50) .borderRadius(4) .backgroundColor("#ff1256e0") .onClick(() => { promptAction.showToast({ message: '支付宝支付成功' }) }) }
build() { Column({ space: 20 }) { Row() { Button("微信支付", { type: ButtonType.Normal }) .payStyle() .fontColor(Color.White) } .padding(10) Row() { Button("微信支付", { type: ButtonType.Normal }) .payStyle() .fontColor(Color.White) } .padding(10) Row() { Button("微信支付", { type: ButtonType.Normal }) .payStyle() .fontColor(Color.White) } .padding(10)
} } }
复制代码
4.3 注意
注意： Styles 和 Extend 均只支持在当前文件下的全局或者组件内部定义，如果你想要在其他文件导出一个公共样式，导出公共使用，ArtTS 是不支持的，这种方式还是需要考虑组件复用。
评论