Question

我想在QtQuick中创建一个布局，我想添加一个spacer项（下图中的底部选项），就像使用小部件一样：

但我在QML方面找不到任何适合的东西......是否可以使用锚定系统在<th class="center-text" title="@code.Size"> @Html.DisplayFor(m => code) </th> w / o中进行这种布局？我更喜欢布局方法......

Answer 1

您只需将Item与Layout.fillHeight: true：

一起使用即可

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    ColumnLayout {
        anchors.fill: parent
        Button {
            Layout.fillWidth: true
            text: "PushButton"
        }
        Button {
            Layout.fillWidth: true
            text: "PushButton"
        }
        Label {
            Layout.fillWidth: true
            text: "TextLabel"
        }
        Item {
            // spacer item
            Layout.fillWidth: true
            Layout.fillHeight: true
            Rectangle { anchors.fill: parent; color: "#ffaaaa" } // to visualize the spacer
        }
    }
}

编辑：或者在这里，您可以使用Column没有间隔项，因为Column只是将其子项从上到下定位，并且不会将它们展开以占用所有可用空间。

Answer 2

对于那些来自Qt小部件并进行比较的人：针对这种情况的QML预期解决方案是问题提到的anchoring system。在这种情况下，它看起来如下，我认为还不错：）

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true

    ColumnLayout {
        // anchors.fill sets all four directional anchors.
        // Loosening one yields the space at the bottom.
        anchors.fill: parent
        anchors.bottom: undefined

        // Alternative approach: only set the three anchors we want.
//      anchors.top: parent.top
//      anchors.left: parent.left
//      anchors.right: parent.right

        Button {
            Layout.fillWidth: true
            text: "PushButton"
        }
        Button {
            Layout.fillWidth: true
            text: "PushButton"
        }
        Label {
            Layout.fillWidth: true
            text: "TextLabel"
        }
    }
}

QML布局中的间隔项

2 个答案: