forEach

1. 概念

forEach：通过遍历数组动态生成View。

用法如下：

--在父容器的subs中，model数组调用`forEach`遍历生成子View。
HStack().subs(
        tableModel.list.forEach(function(item, index)
            --item:model中第index个元素
            --index:下标
            return Label(item.text)
        end)
    )

2. 示例

我们先来看个图。想要实现该布局，常规做法就是创建多个子Label，然后分别add到父容器中。如下代码：

mLabel(str, bgColor) {
    Label(str)
    .textColor(Color(255, 255, 255, 0.8))
    .padding(3, 5, 3, 5)
    .bgColor(bgColor)
    .fontSize(10)
}
---
--- UI
ui {
    --- layout views
    HStack()
    .widthPercent(100)
    .bgColor(Color(220, 230, 200, 1))
    .subs(
        mLabel("0元配送", Color(100, 100, 200, 0.8))
        ,
        mLabel("支持自取", Color(100, 120, 200, 0.8))
        ,
        mLabel("食无忧", Color(140, 120, 200, 0.8))
        ,
        mLabel("津贴2元", Color(180, 150, 100, 0.8))
        ,
        mLabel("会员专享", Color(180, 100, 100, 0.8))
        ,
        mLabel("首单立减", Color(150, 60, 100, 0.8))
    )
}

---
--- preview
local function preview()
end

那么 使用forEach 遍历生成View，可简化ui代码，使用如下：

model(tableModel)

mLabel(str, bgColor) {
    Label(str)
    .textColor(Color(255, 255, 255, 0.8))
    .padding(3, 5, 3, 5)
    .bgColor(bgColor)
    .fontSize(10)
}
---
--- UI
ui {
    --- layout views
    HStack()
    .widthPercent(100)
    .bgColor(Color(220, 230, 200, 1))
    .subs(
        tableModel.list.forEach(function(item, index)
            return mLabel(item.text, item.color)
        end)
    )
}

---
--- preview
local function preview()
    tableModel.list = {
        { text = "0元配送", color = Color(100, 100, 200, 0.8) },
        { text = "支持自取", color = Color(100, 120, 200, 0.8) },
        { text = "食无忧", color = Color(140, 120, 200, 0.8) },
        { text = "津贴2元", color = Color(180, 150, 100, 0.8) },
        { text = "会员专享", color = Color(180, 100, 100, 0.8) },
        { text = "首单立减", color = Color(150, 60, 100, 0.8) }
    }
end