qt - 我想为 QT / QML 触摸屏应用程序创建一个可滚动的 ListView 或 tableView

Question

我将编写一个具有可移动 listView 控件的触摸屏应用程序。目前我的问题是内容从视图中出来，如果在我尝试滚动时内容比 listView 本身更长/更高。

这是我当前的代码。我只需要一个解决方案来在列表视图中滚动而不是溢出它的边界。

ListModel {
        id: listModle
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
        ListElement {
            name: "Bill Smith"
            number: "555 3264"
        }
        ListElement {
            name: "John Brown"
            number: "555 8426"
        }
        ListElement {
            name: "Sam Wise"
            number: "555 0473"
        }
    }

    Rectangle {
        x: 100
        y: 100
         width: 180; height: 200

         Component {
             id: contactDelegate
             Item {
                 width: 180; height: 40
                 Column {
                     Text { text: '<b>Name:</b> ' + name }
                     Text { text: '<b>Number:</b> ' + number }
                 }
             }
         }

         ListView {
             id: listView
             anchors.fill: parent
             model: listModle
             delegate: contactDelegate
             //highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
             focus: true
             contentHeight: 150


         }


     }

Answer 1

listView超过Rectangle父级，因为要显示的元素太多。

这很好，您只需打开clip: true您的 Rectangle 对象。这样，您的列表内容将仅在 Rectangle 视口中可见。

编辑（专业提示）：如果列表视图高度小于封闭的父矩形，出于可用性考虑，您应该禁用滚动行为。查看Qml Flickable API（尤其是interactive和contentWidth/Height）来执行一些简单的检查；）

Answer 2

要实现类似滚动索引的东西，您可以使用：

    ListView.visibleArea.yPosition 

以百分比形式给出 Y 位置。