时间戳

首页 > 解决方案 > 如何使 QML ListView Width 成为其委托的宽度？

qt - 如何使 QML ListView Width 成为其委托的宽度？

问题描述

我创建了一个用户可以滚动浏览的 ListView。我注意到滚动条没有出现，滚动也不起作用。

我将问题归结为我将 ListView 宽度分配为 contentWidth。例如，如果我将其设置为 100，则会出现滚动条并且我可以滚动。但是，我希望 ListView 的宽度由它的内容决定（这就是我使用 contentWidth 的原因）。我做错了吗，我发现的有关此事的所有其他主题都说 contentWidth 应该工作......

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.15
    
Window {
    id: root
    width: 1200
    height: 800
    visible: true
    title: qsTr("Server Manager")
    color: "black"

    ListView {
        spacing: 10
        height: 100
        width: contentWidth

        ScrollBar.vertical: ScrollBar {
            active: true
        }

        model: ["test", "6", "123", "22", "55"]

        delegate: Row {
            width: contentWidth
            TextField {
                width: 150
                height: 80
                text: "Sample"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample2"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample3"
            }
        }

    }
}

标签： qtqml

解决方案

几点评论：

  • 在 ListView（它是 Flickable 的子类型）上，您必须手动设置 contentWidth。默认为 -1 表示尚未设置。（虽然它出现在这种情况下 contentWidth 如果未设置将使用宽度。）

  • 使用这种布局和您指定的高度，您需要为 ListView 打开剪辑。它通常是关闭的，因为它们经常用于完整的窗口布局。你需要在这里让它看起来有 100 高。

  • 基于三个 TextField 子项，每一行都有自己的隐式宽度。在它上面设置宽度只会干扰它。

  • 如果您希望 ListView 匹配它的内容宽度，那么您必须进入它的 contentItem（委托行实际附加的位置），然后您可以使用其 childrenRect 的宽度。

更新代码：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.15

Window {
    id: root
    width: 1200
    height: 800
    visible: true
    title: qsTr("Server Manager")
    color: "black"

    ListView {
        spacing: 10
        height: 100
        width: contentItem.childrenRect.width
        clip: true

        ScrollBar.vertical: ScrollBar {
            active: true
        }

        model: ["test", "6", "123", "22", "55"]

        delegate: Row {
            TextField {
                width: 150
                height: 80
                text: "Sample"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample2"
            }
            TextField {
                width: 150
                height: 80
                text: "Sample3"
            }
        }

    }
}

推荐阅读