qml ListView 列表视图

ListView 列表视图

在QML（Qt Modeling Language）中，ListView元素用于显示列表数据。

它可以绑定到一个模型，并根据模型中的数据自动生成多个项。

以下是一个简单的示例，展示如何在QML中使用ListView：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "ListView Example"

    // 定义一个ListModel，包含一些水果名称
    ListModel {
        id: fruitModel
        ListElement { name: "Apple"; color: "red" }
        ListElement { name: "Banana"; color: "yellow" }
        ListElement { name: "Cherry"; color: "red" }
        ListElement { name: "Date"; color: "brown" }
        ListElement { name: "Grape"; color: "purple" }
        ListElement { name: "Lemon"; color: "yellow" }
        ListElement { name: "Orange"; color: "orange" }
        ListElement { name: "Peach"; color: "pink" }
    }

    // 使用ListView显示ListModel中的数据
    ListView {
        anchors.fill: parent
        model: fruitModel
        delegate: Rectangle {
            width: parent.width
            height: 60
            color: model.color
            border.color: "gray"
            border.width: 1
            radius: 5

            Text {
                anchors.centerIn: parent
                text: model.name
                font.pixelSize: 18
                color: "white"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log("Clicked on", model.name)
                }
            }
        }

        // 添加滚动条
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AsNeeded
        }
    }
}

示例

import QtQuick 2.15
import QtQuick.Controls 2.15

// 主应用程序窗口
ApplicationWindow {
    visible: true  // 设置窗口可见
    width: 640     // 设置窗口宽度
    height: 480    // 设置窗口高度
    title: "ListModel Example"  // 设置窗口标题

    // 定义一个ListModel，包含一些水果名称和颜色
    ListModel {
        id: fruitModel  // 模型的唯一标识
        ListElement { name: "Apple"; color: "red" }
        ListElement { name: "Banana"; color: "yellow" }
        ListElement { name: "Cherry"; color: "red" }
        ListElement { name: "Date"; color: "brown" }
        ListElement { name: "Grape"; color: "purple" }
        ListElement { name: "Lemon"; color: "yellow" }
        ListElement { name: "Orange"; color: "orange" }
        ListElement { name: "Peach"; color: "pink" }
    }

    // 使用ListView显示ListModel中的数据
    ListView {
        id: fruitListView  // 为ListView添加一个唯一标识
        anchors.fill: parent  // 将ListView填充到父窗口
        model: fruitModel  // 设置ListView的数据模型为fruitModel
        spacing: 10  // 设置水果之间的间距
        currentIndex: 0  // 默认选择第一个项


        delegate: Rectangle {  // 定义每个列表项的委托
            width: parent.width  // 设置矩形的宽度与父元素相同
            height: 60  // 设置矩形的高度
            color: index === fruitListView.currentIndex ? "lightgray" : model.color  // 根据选中状态设置背景颜色
            border.color: "gray"  // 设置矩形的边框颜色
            border.width: 1  // 设置矩形的边框宽度
            radius: 5  // 设置矩形的圆角半径

            // 在矩形中显示水果名称
            Text {
                anchors.centerIn: parent  // 将文本居中对齐在父矩形中
                text: model.name  // 设置文本内容为水果名称
                font.pixelSize: 18  // 设置文本的字体大小
                color: "white"  // 设置文本颜色
            }

            // 定义一个MouseArea，用于处理点击事件
            MouseArea {
                anchors.fill: parent  // 填充父元素
                onClicked: {
                    console.log("Clicked on", model.name,"当前索引", index)  // 输出点击的水果名称
                    fruitListView.currentIndex = index  // 更新当前选中的索引
                }
            }
        }

        // 添加滚动条
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AsNeeded  // 根据需要显示滚动条
        }
    }

    // 添加按钮来动态添加和删除ListModel中的元素
    Button {
        anchors.bottom: parent.bottom  // 将按钮底部对齐到父窗口的底部
        anchors.horizontalCenter: parent.horizontalCenter  // 将按钮水平居中对齐在父窗口中
        text: "Add Fruit"  // 设置按钮显示的文本
        onClicked: {
            fruitModel.append({ name: "New Fruit", color: "green" })  // 向ListModel中添加一个新的水果
        }
    }

    Button {
        anchors.bottom: parent.bottom  // 将按钮底部对齐到父窗口的底部
        anchors.right: parent.right  // 将按钮右侧对齐到父窗口的右侧
        text: "Remove Fruit"  // 设置按钮显示的文本
        onClicked: {
            if (fruitModel.count > 0) {  // 如果ListModel中有元素
                fruitModel.remove(fruitModel.count - 1)  // 移除最后一个元素
                if (fruitListView.currentIndex >= fruitModel.count) {
                    fruitListView.currentIndex = fruitModel.count - 1  // 确保当前索引不超过模型的大小
                }
            }
        }
    }
}