QML:将滚动条附加到ListView [英] QML: Attach scrollbar to ListView

问题描述

我在使用ListView时遇到问题. ListView太长，它的一部分显示在窗口外部，但是我无法附加滚动条.我尝试了许多不同的组合.我认为问题出在高度参数上，但是如果将其删除，则ListView仅显示第一项.

I'm having an issue with ListView. ListView is too long and part of it appears outside of the window but I can't attach a scrollbar. I tried many different combination. I think that problem lies in height parameter but if remove it ListView displays only first entry.

Column{
    anchors.fill: parent
    Row{
        id: buttonsRow
            Button{
                text: "Open dump file"
                onClicked: fileDialog.visible = true
            }
            Button{
                text: "Copy raw data to clipboard"
            }
    }
    ListView{
        id: listView
        anchors.top: buttonsRow.bottom
        height: contentHeight
        //clip: true
        flickableDirection: Flickable.VerticalFlick
        boundsBehavior: Flickable.StopAtBounds
        interactive: true
        model: ListModel{
            id: listModel
        }
        delegate: MDelegate{}
    }
}

有什么方法可以使其滚动?

Is there any way to make it scrollable?

推荐答案

将height设置为contentHeight可能是问题.这将使ListView达到其所有项目高度的总和.滚动条仅在视图的高度小于其内容的高度时起作用.

Setting height to contentHeight is probably the issue. That would make the ListView as high as all of its item's heights combined. The scrollbar only works when the height of the view is less than the height of its contents.

以下是一种使用布局的方法:

Here's an approach that uses layouts instead:

import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3

ApplicationWindow {
    width: 400
    height: 300
    visible: true

    ColumnLayout {
        anchors.fill: parent

        RowLayout {
            id: buttonsRow
            Button {
                text: "Open dump file"
            }
            Button {
                text: "Copy raw data to clipboard"
            }
        }

        ListView {
            id: listView
            flickableDirection: Flickable.VerticalFlick
            boundsBehavior: Flickable.StopAtBounds
            model: 100
            clip: true
            delegate: ItemDelegate {
                text: modelData
            }

            Layout.fillWidth: true
            Layout.fillHeight: true

            ScrollBar.vertical: ScrollBar {}
        }
    }
}

这篇关于QML:将滚动条附加到ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！