8.自定义组件之重用样式
<ul>
<li>重用样式</li>
</ul>
<pre><code>@Compontent
struct TitleBar {
//写在内部，只能写通用样式，比较宽高背景颜色等通用样式，切不能传递参数
@Styles commonStyle(){
.height(100)
}
build(){
Row(){
Image($r('app.media.back')).commonStyle()
Text('title').commonStyle()
}.width('100%')
}
}</code></pre>
<pre><code>@Compontent
struct TitleBar {
build(){
Row(){
Image($r('app.media.back')).commonStyle()
Text('title').commonStyle()
}.width('100%')
}
}
//写在外部，优先级没有内部样式高
@Styles function commonStyle(){
.height(100)
}</code></pre>
<ul>
<li>扩展组件样式</li>
</ul>
<pre><code>@Compontent
struct TitleBar {
build(){
Row(){
Image($r('app.media.back'))
Text('title').textStyle(24, Color.Blue)
}.width('100%')
}
}
//color可以传Color.Blue、'red'、'#333333'，支持传递函数
@extend(Text) function textStyle(textSize: number, color: Color | string){
.fontSize(textSize)
.fontColor(color)
}</code></pre>
<ul>
<li>多态样式</li>
</ul>
<pre><code>@Compontent
struct TitleBar {
build(){
Row(){
Image($r('app.media.back'))
Text('title').textStyle(24, Color.Blue)
Button('菜单')
.stateStyle({
normal: {
.backgroundColor(Color.Red)
},
focuse: {
.backgroundColor(Color.Pink)
},
pressed: {
.backgroundColor(Color.Blue)
},
})
}.width('100%')
}
}
</code></pre>