QML中ListView配合ScrollView实现列表功能

最新推荐文章于 2024-07-23 17:22:29 发布

Joven_xxx

最新推荐文章于 2024-07-23 17:22:29 发布

阅读量1w

点赞数

分类专栏： Qt/QML的实践积累

本文链接：https://blog.csdn.net/Shado_walker/article/details/51141583

版权

这篇博客详细介绍了如何在QML中结合ListView和ScrollView实现列表功能。内容包括设置鼠标区域的hoverEnabled属性以响应onEntered和onExited事件，以及通过设置mouse.accepted属性来确保鼠标事件的传递。此外，还讨论了当MouseArea重叠时如何处理事件，特别是利用Button的hovered属性来避免Rectangle的MouseArea被覆盖，确保正确响应鼠标操作。

摘要由CSDN通过智能技术生成

ListView在QML界面开发中主要用于列表的显示，往往配合ScrollView使用，ScrollView主要作用是给ListView增加右侧滚动条功能，用于ListView显示不下时，进行滚动。

具体的实现代码如下：

import Material 0.1
import QtQuick 2.4
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Window {
    visible: true
    property int dpi: 1
    property string name:"姓名"
    width : 300 *dpi
    height: 300 * dpi

    ListModel {
        id: listModel
        ListElement { name: "Apple" }
        ListElement { name: "Orange" }
        ListElement { name: "Banana" }
        ListElement {name: "Computer1"}
        ListElement {name: "Computer2"}
        ListElement {name: "Computer3"}
        ListElement {name: "Computer4"}
        ListElement {name: "Computer5"}
        ListElement {name: "Computer6"}
        ListElement {name: "Com