c++ - 创建一个简单的 ListView Cascades

Question

我想在 Cascades 中创建一个简单的 ListView（在 C++ 或 QML 中）。ListView 的数据很简单，只是我想传递给它的字符串（没有 XML 或 SQL 等）；ListView 也可能有部分，例如，

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

此外，我希望能够自定义列表视图项目的外观，可能还有 ListView 本身（例如，设置背景颜色、设置列表项目文本颜色等）。

任何实现我上面写的教程或简单的示例应用程序将不胜感激！

谢谢你。

Answer 1

最简单的方法是，如果您只想使用静态列表（我的意思是，您不想在运行时更改它）是从 XML 文件（例如：文件夹model.xml中的a）加载它assets，如下所示：

<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"
    }
}

现在，如果您想自定义外观，您只需在 listItemComponents 中输入您希望它们如何显示：

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 {}
            }
        }
    ]
}

希望这能让您了解它是如何工作的。

Answer 2

如果我理解正确你想要像ExpandableListView在android中一样你可以使用实现bb::cascades::DataModel示例来实现它是here