QFormQuay2に相当する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

私が知る限り、QFormLayoutはQMLに相当しません。

あなたは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）。