自己创建网站教程,书法网站优化关键词,常州做沙滩旗的公司网站,哪个网站可以做360度评估如下代码#xff0c;可以发现每个元素的样式一致#xff0c;这时就可以将公共样式封装起来 此时可以使用Styles修饰符将公共样式进行封装
Styles修饰符
Entry
Component
struct Index{build() {Column(){Text(我是Text).ComStyle()Button(我是Button).ComStyle()Image().Co… 如下代码可以发现每个元素的样式一致这时就可以将公共样式封装起来 此时可以使用Styles修饰符将公共样式进行封装
Styles修饰符
Entry
Component
struct Index{build() {Column(){Text(我是Text).ComStyle()Button(我是Button).ComStyle()Image().ComStyle()}.width(100%)}
}Styles function ComStyle(){.width(80%).height(100).margin({bottom:20}).backgroundColor(Color.Pink)
}不仅可以将样式封装到全局还可以在组件内部声明具体封装到哪里需要根据使用场景自行判断一般多组件公用样式需要写到全局。 注意组件内部声明时不需要写function关键字
Entry
Component
struct Index{build() {Column(){Text(我是Text).ComStyle()Button(我是Button).ComStyle()Image().ComStyle()}.width(100%)}Styles ComStyle(){.width(80%).height(100).margin({bottom:20}).backgroundColor(Color.Pink)}
}Extend修饰符
尝试封装Text的样式发现不仅书写时没有代码提示而且出现以下报错原因是fontSize并不是通用属性每个组件都有的样式。 此时需要使用另一个装饰器Extend使用方法基本同Styles不过Extend(组件名)需要选择继承哪个组件。
Extend(Text) function TextStyle(){.fontSize(40)
}特别注意Extend只能写在全局在组件内部声明时会报错。
动态样式
使用Extend修饰符时可以接收参数做到动态样式。 封装样式
Extend(Text) function TextStyle(h:number){.width(80%).height(h).margin({bottom:20}).backgroundColor(Color.Pink)
}调用
.TextStyle(200)注意 只有Extend修饰符才可以传参使用Styles传参会报错
公共样式中也可以封装事件回调
可以把原先的事件回调当作参数传递给样式函数 封装前写法 将回调传递给样式函数即可 注意Extend可以接收参数Styles不可以
