样式表

样式表 Style

MlnUI新布局支持Style写法，可以达到同一样式多次复用的效果，提升代码可维护性、减少代码冗余。同时将UI样式和声明区分开，增强代码可读性。

1. style写法

• 写法1：style中仅包含常规的视图属性

--style定义
local style1 = {
    bgColor(Color(100, 100, 200, 0.8)),
    padding(3, 5, 3, 5),
    fontSize(12),
    left(10)
}

--style使用
ui {
    --- layout views
    Label("我是style1").style(style1)
}

• 写法2：style叠加使用：style中除了包含常规的视图属性之外，还包含其他style。

--style定义
local style2 = {
    style1,
    textColor(Color(255, 255, 255, 1))
}

--style使用
ui {
    Label("我是style2").style(style2)
}

• 写法3：选择器方式设置style。

1. id选择器： 为某id组件设置style。

写法： [id名]([style名])
示例： label1(labelStyle)  --为id名为label1的组件设置labelStyle

local labelStyle = {
    cornerRadius(10),
    bgColor(Color(200, 200, 0, 1)),
    padding(5, 10, 5, 10),
}

--选择器中为id为label1的组件设置style
StyleSelector{
    label1(labelStyle)
}

--ui中设置label的id为label1
Label("id选择器").ID(label1)

2. 后代选择器：为某id容器的子class组件设置style。方便把容器内的一类组件，统一设置成某种style。

写法： [id名].[class名]([style名]) 
示例： vstack1.Label(labelStyle)   --为id名为vstack1的组件的子Label设置labelStyle。"."出子view。

local labelStyle = {
    cornerRadius(10),
    bgColor(Color(200, 200, 0, 1)),
    padding(5, 10, 5, 10),
}


StyleSelector {
    vstack1.Label(labelStyle)
}

ui {
    --- layout views
    VStack().ID(vstack1)
            .subs(HStack().ID(hstack2)
                    .subs(
                    Label("hstack2-Label1")
            ,
                    Label("hstack2-Label2")
            )
    ,
            Label("vstack1-Label1")
    ,
            Label("vstack1-Label2")

    )
}

3. 类选择器：为一类组件统一设置style。

写法： [class名]([style名]) 
示例： ImageView(imgStyle)   --为所有ImageView设置imgStyle

4. 多元素选择器：为多个id组件设置style。

写法： [id名],[id名]([style名]) 
示例： label1, label2(style1)  --为id名为label1、label2的组件设置style1，","分隔。

2. style规则

• 就近原则

直接设置属性 > 通过style设置 （直接设置属性优先生效,其他无冲突属性正常生效。）

例如：

RED = Color(255, 0, 0, 0.6)
YELLOW = Color(255, 255, 0, 1)
PURPLE = Color(100, 100, 200, 1)
--通过style设置字体颜色为红色
local style1 = {
    textColor(RED),
    bgColor(PURPLE),
    fontSize(20)
}

---
--- UI
ui {
    --- layout views
    HStack().subs(
            -- 直接设置字体颜色为黄色
            Label("就近原则").textColor(YELLOW).style(style1)
    )
}

无关style(style1)和textColor(YELLOW)的先后顺序，都始终坚持 直接设置属性 > 通过style设置。

因此字体颜色应该为黄色，只会覆盖style1中的textColor属性，其他无冲突属性（bgColor、fontSize）会正常生效。

• 叠加原则

例如：

RED = Color(255, 0, 0, 0.6)
YELLOW = Color(255, 255, 0, 1)
PURPLE = Color(100, 100, 200, 1)
local style1 = {
    textColor(RED),
    bgColor(PURPLE),
    fontSize(20)
}

local style2 = {
    --2个style中都有textColor，以style2为准，其他无冲突属性正常生效
    style1,
    textColor(BLACK),
    width(100)
}
ui {
    --- layout views
    --设置style(style2)
    Label("叠加原则").style(style2)
}

2个style中都有textColor，无关先后顺序，冲突属性都以style2为准，因此字体应该为黑色，其他无冲突属性正常生效。

⚠️注意：如：同时设置了style(style1)、id选择器和 后代选择器，按照style(style1) > id选择器 > 后代选择器生效。

RED = Color(255, 0, 0, 0.6)
YELLOW = Color(255, 255, 0, 1)
PURPLE = Color(100, 100, 200, 1)
BLACK = Color(0, 0, 0, 1)
--通过style设置字体颜色为红色
local style1 = {
    textColor(RED),
    bgColor(PURPLE),
    fontSize(20)
}

local style2 = {
    --2个style中都有textColor，以style2为准，其他无冲突属性正常生效
    style1,
    textColor(BLACK)
}

local labelStyle = {
    cornerRadius(10),
    bgColor(Color(200, 200, 0, 1)),
    padding(5, 10, 5, 10),
}

StyleSelector {
    --后代选择器设置style1
    vstack1.Label(style1),
    --id选择器设置labelStyle
    label1(labelStyle),
    label2(style2)
}
---
--- UI
ui {
    --- layout views
    VStack().ID(vstack1)
            .subs(
            --后代选择器
            Label("后代选择器")
    ,
            --后代选择器+style设置，style设置生效
            Label("后代选择器+style设置").style(style2)
    ,
           --后代选择器+id选择器，id选择器设置生效
            Label("后代选择器+id选择器").ID(label1)
    ,
            --后代选择器+id选择器+style设置，style设置生效
            Label("后代选择器+id选择器+style设置").ID(label2).style(labelStyle)
    )
}