Question

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

我想弄清楚我应该使用什么QtQuick布局项目。

我被困在 QFormLayout 。我根本找不到相应的东西。我能找到的最好的是GridLayout，但我希望自动生成标签（like in QFormLayout）。

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

Answer 1

如果您对GridLayout感到满意，只缺少自动标签生成，您可以自己创建一个小帮助程序类，在其中封装Label并保存控件的属性。 / p>

// FormControl.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 {

            }
        }
    }
}

当您在control中将default property Item control声明为FormControl.qml时，可以省略Row。然而，你可能会无意中添加多个控件，第一个将丢失。

我使用Item从隐式高度和宽度中受益，但您也可以使用childrenRect.width/height并将宽度和高度设置为{{1}}。但是，我不确定这是不是很强大。

Answer 2

据我所知，QML中没有QFormLayout的等价物。

您必须使用Repeater和GridLayout自行定义组件。

您可以在此处找到一些详细信息：Populate GridLayout with Repeater

a的例子 FormLayout.qml：

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.0

GridLayout {
    id: grid

    // Emitted when text has changed
    signal inputTextChanged(int index, string text)

    columns: 2
    rowSpacing: 5
    columnSpacing: 5

    property var labels: []

    Repeater {
        model: grid.labels
        Text {
            Layout.row: index
            Layout.column: 0
            Layout.preferredWidth: 100
            Layout.preferredHeight: 100
            text: modelData
            verticalAlignment: Text.AlignVCenter
        }
    }

    Repeater {
        model: grid.labels
        TextField {
            Layout.row: index
            Layout.column: 1
            Layout.preferredWidth: 100
            Layout.preferredHeight: 40
            onTextChanged: inputTextChanged(index,text)
        }
    }
}

main.qml ：

import QtQuick 2.5
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    FormLayout {
        anchors {
            fill: parent
            margins: 5
        }

        labels: ["label1","label2"]
        onInputTextChanged: console.log(index + "/" + text)
    }
}

labels可以是any model that qml accept（来自c ++的JS数组，ListModel或AbstractItemModel）。

QtQuick2中的QFormLayout等价物？

2 个答案: