QML-Items 的独立维度答案

【问题标题】：Independent dimensions for QML-ItemsQML-Items 的独立维度
【发布时间】：2021-03-11 11:24:46
【问题描述】：

我正在使用QQmlApplicationEngine，因此有一个root 元素和Item-s。因为我有一个 root 文件，所有从 C++ 连接的方法（但仍然可以在整个 .qml 目录中访问）我不能使另一个 Item-s 独立于根的维度设置。因此，如果我将 minimumwidth 的值设为 300，那么另一个 Item-s 也将具有相同的 minimumWidth。问题是，是否有可能使它们独立于 main.qml 并能够设置其他维度。

这里有一些代码可以让你明白我在说什么：

main.cpp:

QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);

    engine.rootContext()->setContextProperty("mqttClient",mqttClient);
    engine.rootContext()->setContextProperty("math",math);



    engine.load(url);

main.qml:


Window {
    id:root
    width: 400
    height: 300
    minimumWidth:  960
    minimumHeight: 420
   
    visible: true
    title: qsTr("Dampfmaschine Client")

    StackView {
        id: stackView
        initialItem: "LoginPage.qml"
        anchors.fill: parent
    }
    Component{
        id: login
        LoginPage{}
    }

    Component{
        id: measure_page2
        MeasurePage2{}
    }

    function load_page(page){
        switch(page){
        case 'MeasurePage':
            stackView.push(measure_page2);
            break;
        }
    }

}

【问题讨论】：

你可以通过load_page函数设置root.width = 600，如果你愿意的话？
@Amfasis 我很好地考虑了这一点，但对其他实现它的方式真的很感兴趣：D。非常感谢您的评论
好的，那么请在问题中说清楚
也许QQuickView.resizeMode 设置为QQuickView::SizeViewToRootObject 可以解决问题。
您真正希望在视觉上发生什么？根窗口应该根据选择的页面扩展/收缩，或者如果您的页面大于窗口，您希望它具有滚动条？或者是其他东西？一张简单的模型图片真的很有帮助。

标签： qt qml

【解决方案1】：

您可以在 QML 中使用 Binding 类型来设置可选的绑定。我建议在您的页面中添加一些属性，例如：

LoginPage {

    property int windowWidth : 200
    property int windowHeight : 300
}

然后在 main 中，你把绑定

Window {
    id:root
    width: 400
    height: 300
    minimumWidth:  960
    minimumHeight: 420

    visible: true
    title: qsTr("Dampfmaschine Client")

    Binding {
        target: root
        property: "width"
        value: stackView.currentItem.windowWidth
    }

    Binding {
        target: root
        property: "height"
        value: stackView.currentItem.windowHeight
    }

    StackView {
        id: stackView
        initialItem: "LoginPage.qml"
        anchors.fill: parent
    }
    Component{
        id: login
        LoginPage{}
    }

    Component{
        id: measure_page2
        MeasurePage2{}
    }

    function load_page(page){
        switch(page){
        case 'MeasurePage':
            stackView.push(measure_page2);
            break;
        }
    }

}

这样，窗口将始终绑定到 stackView 的当前项，您不必照顾它。

您也可以选择使用页面中的implicitWidth 和implicitHeight，从而减少维护工作（但可能会因为奇怪的页面而头疼）

【讨论】：