與QtQuick2等效的QFormLayout？

Question

我正在將基於QtWidgets的應用程序移植到QtQuick2中。

我想弄清楚我應該使用哪些QtQuick佈局項目。我在QFormLayout卡住了。我根本找不到相應的東西。我能找到的最好的是一個GridLayout，但我希望自動生成標籤（like in QFormLayout）。

QHBoxLayout轉換爲RowLayout
QVBoxLayout轉換爲ColumnLayout
QGridLayout轉換爲GridLayout
QFormLayout轉換爲???

Answer 1

如果你滿意的GridLayout，唯一缺少的自動標籤生成，你可以創建自己的一些小的輔助類，在其中封裝Label並保持該控件的屬性。

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

      } 
     } 
    } 
} 

，當你在FormControl.qml聲明它的default property Item control你可能會忽略control。然後，然而你可能會無意中添加多個控件，其中第一個將會丟失。

我使用受益於隱含的高度和寬度，但您也可以使用Item並將寬度和高度設置爲childrenRect.width/height。不過，我不確定這是否穩健。

Answer 2

據我所知，在QML中沒有QFormLayout的等價物。

您必須使用Repeater和GridLayout自己定義組件。

你可以在這裏找到一些細節：一個 FormLayout.qml的Populate GridLayout with Repeater

例子：

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 （JS數組，ListModel，或來自C++的AbstractItemModel）。