Style

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使用
Label("我是style1").style(style1)

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

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

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

• 写法3：选择器方式设置style。(mlnui暂不支持，后续补充wiki)

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

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

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

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

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

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

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

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

StyleSelector {
    label1(style1),
    vstack1.Label(style1),
    ImageView(imgStyle),
    label1, label2(style1)
}

ui = {
    --- layout views
    VStack().ID(vstack1)
            .subs(

            Label("我是style1").style(style1)
    ,
            Label("我是style2").style(style2)
    ,
            Label("id-->label1").ID(label1)
    ,
            Label("id-->label2").ID(label2)
    ,
            HStack().subs(
                    Label("VStack-HStack-Label")
            )
    ,
            ImageView(imgStyle)
    )
}

2. style规则