ListDemo.llua

copy下面代码，运行试试

RED = Color(180, 100, 100, 0.8)
YELLOW = Color(220, 200, 100, 0.8)
PURPLE = Color(100, 100, 200, 0.8)
COLORS = { PURPLE, RED, YELLOW }

model(tableModel)

--编写cell布局样式。List绑定的数据源遍历返回给item，直接使用item为cell赋值。
--cell1
bannerCell(item) {
    ImageView()
    .widthPercent(100)
    --.height(100)
    .image(item.imgUrl)
    .contentMode(ContentMode.SCALE_ASPECT_FILL)
}

--cell2
txtCell(item) {
    HStack()
    .padding(5, 10, 5, 10)
    .crossAxis(CrossAxis.CENTER)
    .subs(
        ImageView(item.imgUrl)
        .width(38)
        .height(38)
        .cornerRadius(50)
        .contentMode(ContentMode.SCALE_ASPECT_FILL)
        ,
        Label(item.name)--.width(100)
    ).bgColor(COLORS[item.row % #COLORS + 1])
}

---
--- UI
ui {
    --- layout views
    List().bgColor(Color(0, 255, 0, 0.1))
    .bindCell(function(item)
        --item.row：返回当前行
        --item.section：返回当前section
        if item.row == 1 then
            --第一行，显示bannerCell，设置cell高度100
            --cellHeight(number height)，没有设置cell高度时，默认高度自适应。
            return bannerCell(item).cellHeight(100)
        else
            --其他行，显示txtCell，cell高度自适应
            return txtCell(item)
        end
    end)
    .bindData(tableModel.sourceData)

}

---
--- preview
function preview()
    local data = {}
    for i = 1, 20 do
        local temp = {}
        temp.name = "000第" .. i .. "行"
        temp.imgUrl = "https://hbimg.huabanimg.com/7c41bc5871d74c9036932ca9bba76de363727be113b6fd-NApej6_fw658"
        data[i] = temp
    end
    tableModel.sourceData = data
end