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

Question

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

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

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

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

谢谢。

Answer 1

如果您打算只使用静态列表(我的意思是，您不想在运行时更改它)，最简单的方法是从 XML 文件(例如:model.xml)加载它。 xml 在你的 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 {}
            }
        }
    ]
}

希望这能让您了解其工作原理。