qml 绘制listview

### QML 实现 ListView 的绘制方法及示例 在 QML 中实现 `ListView` 绘制的核心在于定义其 **模型 (Model)** 和 **委托 (Delegate)**。通过设置这些属性，可以控制列表视图的内容及其外观。 #### 定义 Model `ListView` 需要一个数据源作为它的模型。这个模型可以是一个简单的字符串数组、JavaScript 数组或者更复杂的 C++ 数据模型[^1]。例如： ```javascript property var contactModel: [ {"name": "Alice", "number": "555-0100"}, {"name": "Bob", "number": "555-0120"} ] ``` 这里我们使用了一个 JavaScript 对象数组来表示联系人信息。 #### 设置 Delegate `Delegate` 是用来描述每一项应该如何呈现的组件。通常会使用一些基本控件如 `Text`, 或者自定义的复杂界面[^2]。下面的例子展示了如何为每个条目创建一个简单的文本显示项： ```qml Component { id: contactDelegate Item { width: parent.width; height: 40 Text { text: name + ": " + number anchors.verticalCenter: parent.verticalCenter } MouseArea { anchors.fill: parent onClicked: console.log(name, "selected") } } } ``` 在这个例子中，每一个 delegate 包含了一段文字以及点击区域用于响应用户的交互操作。 #### 创建并配置 ListView 最后一步就是实例化 `ListView` 并指定上述 model 和 delegate 属性。还可以调整其他参数比如 orientation 来改变布局方式[^3]: ```qml import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 640 height: 480 ListModel { id: listModelExample ListElement { name: "John"; phone: "+123456789" } ListElement { name: "Jane"; phone: "+987654321" } } ListView { anchors.fill: parent model: listModelExample delegate: Rectangle { color: index & 1 ? "#f0f0ff" : "#ffffff" border.color: "#cccccc" width: parent.width height: childrenRect.height Column { spacing: 5 Text { text: "Name:" + name; font.bold: true } Text { text: "Phone Number:" + phone } anchors.horizontalCenter: parent.horizontalCenter } MouseArea { anchors.fill: parent hoverEnabled: true onEntered: parent.color = "#eaeaff" onExited: parent.color = index & 1 ? "#f0f0ff" : "#ffffff" } } focus: true clip: true orientation: ListView.Vertical // 默认值 } } ``` 这段代码展示了一个完整的应用窗口，在其中包含了带有两个项目的列表视图，并设置了不同的背景颜色以区分奇偶行，还增加了鼠标悬停效果。 ---