web-dev-qa-db-ja.com

比例したサイズのアイテムを使用してQMLGridLayoutを作成するにはどうすればよいですか？

関連する可能性がある： https://stackoverflow.com/a/30860285/3363018

可変数の行と列にまたがるアイテムを使用してQMLレイアウトを作成しようとしています。したがって、たとえば、2行4列にまたがる長方形、その右側に1行2列にまたがる長方形、およびその下に3行5列にまたがる長方形があります。これを作成する一般的な試みは以下のとおりです。

import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4

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

    GridLayout {
        anchors.fill: parent

        columns: 5
        rows: 2

        Rectangle {
            Layout.column: 0
            Layout.columnSpan: 4
            Layout.row: 0
            Layout.rowSpan: 2

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "red"
        }

        Rectangle {
            Layout.column: 4
            Layout.columnSpan: 1
            Layout.row: 0
            Layout.rowSpan: 2

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "green"
        }

        Rectangle {
            Layout.column: 0
            Layout.columnSpan: 5
            Layout.row: 2
            Layout.rowSpan: 3

            Layout.fillHeight: true
            Layout.fillWidth: true

            color: "blue"
        }
    }
}

その結果：

Attempt at weighted grid layout

ご覧のとおり、Layout.rowSpanとLayout.columnspanは機能していないようです。代わりに、上の2つの行は4：1ではなく1：1を占めるように見え、上の部分と下の部分は2：3ではなく1：1です。これはLayout.fillHeightとLayout.fillWidthに関連していると思います。 ドキュメント 状態：

このプロパティがtrueの場合、指定された制約を尊重しながら、アイテムは可能な限り広くなります。

しかし、この文脈で「与えられた制約」が何であるかはわかりません。行と列のスパンが含まれることを期待していましたが、含まれていないようです。

おそらくアイテムの幅と高さ（またはLayout.preferredWidthとLayout.preferredHeight）を直接計算することもできますが、それではLayout.rowSpanとLayout.columnSpanが完全に不要になるようです。グリッドの行と列に基づいて高さを自動的に計算する方法はありますか？

qtqml
11
Dylan

私はあなたと同じ問題に遭遇しましたが、GridLayoutが何をしているのか誤解しやすいと思います。 5列2行のグリッドがある場合、各[〜＃〜] o [〜＃〜]がセルを表す次のようになります。 ：

grid
OOOOO
OOOOO

rowSpanは、[〜＃〜]高さ[〜＃〜]オブジェクトはです。

columnSpanは、[〜＃〜] wide [〜＃〜]オブジェクトはです。

これらをこのグリッドに収めたいと考えています。

r1      r2     r3
OOOO    OO   OOOOO
OOOO         OOOOO
             OOOOO

見るのは難しいことではありませんが、収まりません。

これは12x12グリッドに対する私の解決策であり、簡単に理解できるはずです。 GridLayoutは、子に割り当てる幅と高さを自動的に認識していないようです。しかし、それは大丈夫です、あなたはそれを簡単に定義することができます。基本的に、長方形を2つの短い2つの関数に渡します。 rowSpanまたはcolumnSpanを渡すこともできますが、どの関数が何を実行するかを覚えておく必要がないため、この方法をお勧めします。

GridLayout {
    id : grid
    anchors.fill: parent
    rows    : 12
    columns : 12
    property double colMulti : grid.width / grid.columns
    property double rowMulti : grid.height / grid.rows
    function prefWidth(item){
        return colMulti * item.Layout.columnSpan
    }
    function prefHeight(item){
        return rowMulti * item.Layout.rowSpan
    }

    Rectangle {
        color : 'red'
        Layout.rowSpan   : 10
        Layout.columnSpan: 2
        Layout.preferredWidth  : grid.prefWidth(this)
        Layout.preferredHeight : grid.prefHeight(this)
    }
    Rectangle {
        color : 'yellow'
        Layout.rowSpan   : 10
        Layout.columnSpan: 10
        Layout.preferredWidth  : grid.prefWidth(this)
        Layout.preferredHeight : grid.prefHeight(this)
    }
    Rectangle {
        id : greenRect
        color : 'green'
        Layout.rowSpan : 2
        Layout.columnSpan : 12
        Layout.preferredWidth  : grid.prefWidth(this)
        Layout.preferredHeight : grid.prefHeight(this)
    }
}

ここでの結果：

QML Grid Layout

18
Wolf