创建一个简单的ListView级联

Create a simple ListView Cascades

本文关键字：简单 ListView 级联 一个 创建      更新时间：2023-10-16

我想创建一个简单的ListView级联(无论是在c++或QML)。ListView的数据很简单，只是我想传递给它的字符串(没有XML或SQL等);ListView也可以有section，例如

 - Green
        - Cucumber
        - Peas
        - Salad
 - Red
        - Tomato
        - Red Radish
        - Carrot

另外，我希望能够自定义列表视图和列表视图本身的项目的外观(例如，设置背景颜色，设置列表项目文本颜色等)。

任何教程或简单的示例应用程序，实现我上面写的将非常感激!!

谢谢。

最简单的方法，如果你打算只使用一个静态列表(我的意思是，你不想在运行时改变它)是从一个XML文件(例如:assets文件夹中的model.xml)加载它，像这样:

<model>
    <header title="Green"/>
    <item title="Cucumber"/>
    <item title="Peas"/>
    <item title="Salad"/>
    <header title="Red"/>
    <item title="Tomato"/>
    <item title="Red Radish"/>
    <item title="Carrot"/>
</model>

你的ListView只需要加载它:

ListView {
    dataModel: XmlDataModel {
        source: "model.xml"
    }
}

现在，如果你想自定义外观，你只需要在listtitemcomponents中放入你想要的显示方式:

ListView {
    dataModel: XmlDataModel {
        source: "model.xml"
    }
    listItemComponents: [
        ListItemComponent {
            type: "header"
            Container {
                // your personal code
            }
        },
        ListItemComponent {
            type: "item"
            Container {
                // your personal code
            }
        }
    ]
}
这些容器允许你定义你自己的布局。例如，假设您只想显示具有匹配背景色的标题，您可以这样做: 
ListView {
    dataModel: XmlDataModel {
        source: "model.xml"
    }
    listItemComponents: [
        ListItemComponent {
            type: "header"
            Container {
                background: {
                    if (ListItemData.title == "Green") {
                        return Color.Green
                    } else {
                        return Color.Red
                    }
                }
                Header {
                    title: ListItemData.title
                }
            }
        },
        ListItemComponent {
            type: "item"
            Container {
                preferredHeight: 100
                Label {
                    text: ListItemData.title
                    verticalAlignment: VerticalAlignment.Center
                }
                Divider {}
            }
        }
    ]
}

如果我理解正确，你想在android中像ExpandableListView一样，你可以使用bb::cascades::DataModel实现它的例子在这里

相关文章：