控件

List

1. 介绍

  在日常开发中，List是较为常用的组件，它以纵向列表的形式展现用户需要的具体数据和信息

2. 实现

(1)构造方法

--1.无参构造
List()

--2.一个参数构造，传入数据源，将数据源绑定到List
List(tableModel.sourceData)

(2)绑定cell

• 编写cell布局样式

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

• 绑定cell

-- bindCell 绑定cell
bindCell(function(item)
        return bannerCell(item) 
    end)

--item的固有属性：
--item.row：返回当前行
--item.section：返回当前section

--cell的固有属性：
--cellHeight(number height)，没有设置cell高度时，默认高度自适应。

bindCell(function(item)
        --item.row：返回当前行
        --item.section：返回当前section
        if item.row == 1 then
            --第一行，显示bannerCell，设置cell高度100
            return bannerCell(item).cellHeight(100)
        else
            --其他行，显示txtCell，cell高度自适应
            return txtCell(item)
        end
    end)

(3)绑定数据源

• 绑定数据源

--1.bindData方法绑定
List().bindData(tableModel.sourceData)

--2.构造方法传入数据源
List(tableModel.sourceData)

附：完整demo如下：

model(tableModel)

--编写cell布局样式。List绑定的数据源遍历返回给item，直接使用item为cell赋值。
--cell1
bannerCell(item) {
    ImageView().widthPercent(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)
        ,
        Spacer().width(20)
        ,
        Label(item.name)
    )
}

---
--- UI
ui {
    --- layout views
    List()
    .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, 10 do
        local temp = {}
        temp.name = "第" .. i .. "行"
        temp.imgUrl = "https://hbimg.huabanimg.com/7c41bc5871d74c9036932ca9bba76de363727be113b6fd-NApej6_fw658"
        data[i] = temp
    end
    tableModel.sourceData = data
end

3. 常见问题