来自子元素委托的 QML 窗口大小

Question

我目前正在尝试为我正在计划的某个工具窗口创建一种通用 QML 组件。

有没有办法根据它包含的ListView 的大小实际设置所述窗口的大小？ ListView 的大小部分取决于其委托渲染的模型数据。这是一个代码示例，它将从外部某个地方实例化：

import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

Window{
    id:window
    title: "WindowTitle"
    modality: "ApplicationModal"
    flags: "Dialog"

    ListView {
        id: list
        model: model_inst

        delegate: RowLayout{
            id: list_entry
            Text {
                text: "Model-based variable length text: " + text
            }
            ComboBox {
                model: listrole
            }
            Switch {
               text: qsTr("Switch")
            }
        }
    }
}

所以基本上我正在尝试访问例如list_entry.width 作为窗口宽度的来源 id 不起作用，因为在初始 QML 实例化之后可能会使用委托？ 不确定是否有办法，或者我不可避免地试图建立某种参考循环。谢谢！

Answer 1

我认为它不会起作用。我尝试解决您的问题的第一步是使用contentWidth，但http://doc.qt.io/qt-5/qml-qtquick-listview.html#flickable-direction 说：

默认情况下，垂直 ListView 将 flickableDirection 设置为 Flickable.Vertical，水平 ListView 将其设置为 Flickable.Horizo​​ntal。此外，垂直 ListView 仅计算（估计）contentHeight，水平 ListView 仅计算 contentWidth。另一个维度设置为 -1。

所以你必须自己设置contentWidth，因为你使用的是垂直的ListView。如果您尝试只使用默认的contentWidth：

     width: list.contentWidth

窗口将没有宽度。所以，最好的解决方案可能是设置一个足够大的宽度：

import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

Window {
    id: window
    title: "WindowTitle"
    modality: "ApplicationModal"
    flags: "Dialog"
    width: list.contentWidth
    height: list.contentHeight
    visible: true

    ListView {
        id: list
        model: 10
        contentWidth: 400
        anchors.fill: parent

        delegate: RowLayout {
            Text {
                text: "Model-based variable length text: " + index
            }
            ComboBox {
                model: 10
            }
            Switch {
               text: qsTr("Switch")
            }
        }
    }
}

不过，您不一定要猜测。你可以使用例如例如，TextMetrics 计算您期望的最大文本宽度。尽管您仍然需要考虑 RowLayout 中的其他控件。

如果您可以使用除ListView 之外的其他类型，您可以考虑例如Repeater 在 ColumnLayout 中，然后您可以使用其 implicitWidth 和 implicitHeight 属性：

import QtQuick 2.2
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

Window {
    id: window
    title: "WindowTitle"
    modality: "ApplicationModal"
    flags: "Dialog"
    width: columnLayout.implicitWidth
    height: columnLayout.implicitHeight
    visible: true

    ColumnLayout {
        id: columnLayout
        anchors.fill: parent

        Repeater {
            id: repeater
            model: 10

            delegate: RowLayout {
                Text {
                    text: "Model-based variable length text: " + index
                }
                ComboBox {
                    model: 10
                }
                Switch {
                   text: qsTr("Switch")
                }
            }
        }
    }
}