qml - QtQuick2 中的 QFormLayout 等效项？

Question

我正在将基于 QtWidgets 的应用程序移植到 QtQuick2。

我想弄清楚应该使用哪些 QtQuick 布局项。

我卡在了QFormLayout。我根本找不到一个等价物。我能找到的最好的是 GridLayout，但我希望自动生成标签 ( like in QFormLayout )。

QHBoxLayout转换为 RowLayout
QVBoxLayout转换为 ColumnLayout
QGridLayout转换为 GridLayout
QFormLayout转换为 ???

Answer 1

如果你对 GridLayout 满意，只是缺少自动生成标签，你可以自己创建一些小的辅助类，在其中封装 Label 并持有一个控件的属性。

//表单控件.qml

import QtQuick 2.0
import QtQuick.Controls 2.0

Item {
    id: root
    property alias label: myLabel

    Label {
        id: myLabel
        parent: root.parent

        Layout.fillHeight: true
        Layout.fillWidth: true

        verticalAlignment: Qt.AlignVCenter

        MouseArea {
            anchors.fill: parent
            onClicked: root.control.forceActiveFocus()
        }
    }

    property Item control

    Row {
        id: content
        parent: myLabel.parent // parent it to myLabel.parent, to make sure, that one is added first.
        children: [control]
    }
}

用法很简单:

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.0

ApplicationWindow {
    id: myWindow
    visible: true
    width: 600
    height: 600
    color: 'white'

    GridLayout {
        columns: 2

        FormControl {
            label.text: 'test1'
            control: ComboBox {
                model: ['hello', 'world', 'and', 'bye']
            }
        }

        FormControl {
            label.text: 'Text'
            control: TextField {
            }
        }

        FormControl {
            label.text: 'Something Long'
            control: TextField {

            }
        }
    }
}

当您在 FormControl.qml 中将其声明为 默认属性 Item 控件 时，您可能会省略 control。然而，您可能会巧妙地添加多个控件，其中第一个控件将丢失。

我使用 Row 来受益于隐式高度和宽度，但您也可以使用 Item 并将宽度和高度设置为其 childrenRect。宽度/高度。但是，我不确定这是否可靠。