SplitView QML Type

各項目の間にドラッグ可能なスプリッターを配置して項目を表示します。詳細...

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• handle : Component
• orientation : enumeration
• resizing : bool

関連するプロパティ

• fillHeight : bool
• fillWidth : bool
• maximumHeight : real
• maximumWidth : real
• minimumHeight : real
• minimumWidth : real
• preferredHeight : real
• preferredWidth : real
• view : SplitView

方法

• bool restoreState(state)
• var saveState()

詳細な説明

SplitView は、各アイテムの間にドラッグ可能なスプリッターを配置し、アイテムを水平または垂直に並べるコントロールです。

SplitViewは、管理するアイテムに対して以下のアタッチドプロパティをサポートしています：

• SplitView.minimumWidth
• SplitView.minimumHeight
• SplitView.preferredWidth
• SplitView.preferredHeight
• SplitView.maximumWidth
• SplitView.maximumHeight
• SplitView.fillWidth (子要素が 1 つの場合のみ true)
• SplitView.fillHeight （子要素が1つの場合にtrue）

さらに、各ハンドルには以下の読み取り専用のアタッチドプロパティがあります：

• SplitHandle.hovered
• SplitHandle.pressed

SplitView 内の項目の推奨サイズは、implicitWidth およびimplicitHeight 、あるいはSplitView.preferredWidth およびSplitView.preferredHeight を通じて指定できます:

SplitView {
    anchors.fill: parent

    Item {
        SplitView.preferredWidth: 50
    }

    // ...
}

水平方向の SplitView の場合、各アイテムはビューの高さに合わせてサイズが調整されるため、各アイテムの推奨高さを指定する必要はありません。垂直方向のビューでは、この逆が当てはまります。

分割ハンドルをドラッグすると、ビューのorientation に応じて、SplitView.preferredWidth またはSplitView.preferredHeight プロパティが上書きされます。

水平ビュー内の項目のサイズを制限するには、次のプロパティを使用します。

SplitView {
    anchors.fill: parent

    Item {
        SplitView.minimumWidth: 25
        SplitView.preferredWidth: 50
        SplitView.maximumWidth: 100
    }

    // ...
}

垂直ビュー内の項目のサイズを制限するには、次のプロパティを使用します：

SplitView {
    anchors.fill: parent
    orientation: Qt.Vertical

    Item {
        SplitView.minimumHeight: 25
        SplitView.preferredHeight: 50
        SplitView.maximumHeight: 100
    }

    // ...
}

SplitView には、常に 1 つのアイテム（フィルアイテム）が存在し、そのSplitView.fillWidth はtrue に設定されています（orientation がQt.Vertical の場合、SplitView.fillHeight に設定されます）。これは、他のアイテムのレイアウトが完了した後、残りのスペースをすべてそのアイテムが占有することを意味します。デフォルトでは、SplitView の最後に表示される子要素にこの設定が適用されますが、別のアイテムに対してfillWidth をtrue に明示的に設定することで変更可能です。

ハンドルは、左側または上側のアイテム、あるいは右側または下側のアイテムのいずれかに属します：

• フィルアイテムが右側にある場合：ハンドルは左側のアイテムに属します。
• フィルアイテムが左側にある場合：ハンドルは右側のアイテムに属します。

3つのアイテムからなるSplitViewを作成し、中央のアイテムに余分なスペースを確保するには、次のようにします：

SplitView {
    anchors.fill: parent
    orientation: Qt.Horizontal

    Rectangle {
        implicitWidth: 200
        SplitView.maximumWidth: 400
        color: "lightblue"
        Label {
            text: "View 1"
            anchors.centerIn: parent
        }
    }
    Rectangle {
        id: centerItem
        SplitView.minimumWidth: 50
        SplitView.fillWidth: true
        color: "lightgray"
        Label {
            text: "View 2"
            anchors.centerIn: parent
        }
    }
    Rectangle {
        implicitWidth: 200
        color: "lightgreen"
        Label {
            text: "View 3"
            anchors.centerIn: parent
        }
    }
}

SplitViewの状態のシリアライズ

SplitViewの主な目的は、ユーザーがさまざまなUI要素のサイズを簡単に設定できるようにすることです。さらに、ユーザーが好むサイズはセッションをまたいで記憶される必要があります。これを実現するために、SplitView.preferredWidth およびSplitView.preferredHeight プロパティの値を、saveState()およびrestoreState()関数を使用してシリアライズできます：

import QtCore
import QtQuick.Controls

ApplicationWindow {
    // ...

    Component.onCompleted: splitView.restoreState(settings.splitView)
    Component.onDestruction: settings.splitView = splitView.saveState()

    Settings {
        id: settings
        property var splitView
    }

    SplitView {
        id: splitView
        // ...
    }
}

あるいは、Settings のvalue() およびsetValue() 関数を使用することもできます：

import QtCore
import QtQuick.Controls

ApplicationWindow {
    // ...

    Component.onCompleted: splitView.restoreState(settings.value("ui/splitview"))
    Component.onDestruction: settings.setValue("ui/splitview", splitView.saveState())

    Settings {
        id: settings
    }

    SplitView {
        id: splitView
        // ...
    }
}

「 SplitHandle 」、「SplitViewのカスタマイズ」、および「コンテナコントロール」も参照してください 。

プロパティのドキュメント

handle : Component

このプロパティには、ハンドルコンポーネントが格納されます。

count が1 よりも大きい限り、このコンポーネントのインスタンスはcount - 1 回インスタンス化されます。

次の表は、分割ビューの向きに応じて各ハンドルのサイズがどのように変更されるかを示しています:

マウスやタッチイベント用のハンドルのサイズを、視覚的なサイズを変更せずに変更するには、containmentMask を使用します：

SplitView {
    id: splitView
    anchors.fill: parent

    handle: Rectangle {
        id: handleDelegate
        implicitWidth: 4
        implicitHeight: 4
        color: SplitHandle.pressed ? "#81e889"
            : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")

        containmentMask: Item {
            x: (handleDelegate.width - width) / 2
            width: 64
            height: splitView.height
        }
    }

    Rectangle {
        implicitWidth: 150
        color: "#444"
    }
    Rectangle {
        implicitWidth: 50
        color: "#666"
    }
}

「SplitViewのカスタマイズ」も参照してください 。

orientation : enumeration

このプロパティは、SplitView の向きを保持します。

このオリエンテーションによって、分割された項目の配置方法が決定されます：

取り得る値：

resizing : bool [read-only]

ユーザーがスプリッターのハンドルをドラッグして分割項目のサイズを変更しているとき、このプロパティはtrue となります。

添付のプロパティのドキュメント

SplitView.fillHeight : bool [attached]

この添付プロパティは、他のすべてのアイテムのレイアウトが完了した後、そのアイテムが分割ビュー内の残りのスペースを占有するかどうかを制御します。

デフォルトでは、スプリットビューの最後に表示される子要素がビュー全体を埋めますが、別のアイテムでfillHeight をtrue に明示的に設定することで、この動作を変更できます。複数のアイテムでfillHeight がtrue に設定されている場合、最上部のアイテムがビュー全体を埋めます。

fillHeight がtrue に設定されている分割アイテムの高さは、依然としてそのminimumHeight およびmaximumHeight の範囲内に制限されます。

「 minimumHeight 」、「preferredHeight 」、「maximumHeight 」、および「fillWidth 」も参照してください 。

SplitView.fillWidth : bool [attached]

この添付プロパティは、他のすべてのアイテムの配置が完了した後、そのアイテムが分割ビュー内の残りのスペースを占有するかどうかを制御します。

デフォルトでは、スプリットビューの最後に表示される子要素がビュー全体を埋めますが、別のアイテムでfillWidth をtrue に明示的に設定することで、この動作を変更できます。複数のアイテムでfillWidth がtrue に設定されている場合、最も左側のアイテムがビュー全体を埋めます。

fillWidth がtrue に設定されている分割項目の幅は、依然としてそのminimumWidth およびmaximumWidth の範囲内に制限されます。

「 minimumWidth 」、「preferredWidth 」、「maximumWidth 」、および「fillHeight 」も参照してください 。

SplitView.maximumHeight : real [attached]

この添付プロパティは、分割項目の最大高さを制御します。preferredHeight は、minimumHeight とmaximumHeightの範囲内に制限されます。分割項目は、maximumHeight を超える大きさにドラッグすることはできません。

デフォルト値は `Infinity` です。このプロパティをデフォルト値にリセットするには、`undefined` に設定してください。

「 minimumHeight 」、「preferredHeight 」、「fillHeight 」、および「maximumWidth 」も参照してください 。

SplitView.maximumWidth : real [attached]

この関連プロパティは、分割項目の最大幅を制御します。preferredWidth は、minimumWidth およびmaximumWidthの範囲内に制限されます。分割項目は、maximumWidth を超える大きさにドラッグすることはできません。

デフォルト値は `Infinity` です。このプロパティをデフォルト値にリセットするには、`undefined` に設定してください。

「 minimumWidth 」、「preferredWidth 」、「fillWidth 」、および「maximumHeight 」も参照してください 。

SplitView.minimumHeight : real [attached]

この関連プロパティは、分割項目の最小高さを制御します。preferredHeight は、minimumHeightおよびmaximumHeight の範囲内に制限されます。分割項目は、minimumHeight よりも小さくなるようドラッグすることはできません。

デフォルト値は `0` です。このプロパティをデフォルト値にリセットするには、`undefined` に設定してください。

「 maximumHeight 」、「preferredHeight 」、「fillHeight 」、および「minimumWidth 」も参照してください 。

SplitView.minimumWidth : real [attached]

この関連プロパティは、分割項目の最小幅を制御します。preferredWidth は、minimumWidthとmaximumWidth の範囲内に制限されます。分割項目は、minimumWidth よりも小さくなるようにドラッグすることはできません。

デフォルト値は `0` です。このプロパティをデフォルト値にリセットするには、`undefined` に設定してください。

「 maximumWidth 」、「preferredWidth 」、「fillWidth 」、および「minimumHeight 」も参照してください 。

SplitView.preferredHeight : real [attached]

このアタッチメントプロパティは、分割項目の推奨高さを制御します。推奨高さは項目のサイズとして使用され、minimumHeight およびmaximumHeight の範囲内に収まります。推奨高さが設定されていない場合、項目のimplicitHeight が使用されます。

分割項目のサイズが変更されると、新しいサイズを反映するために preferredHeight が設定されます。

デフォルトでは、このプロパティは設定されていないため、代わりにimplicitHeight が使用されます。このプロパティをデフォルト値にリセットするには、undefined に設定してください。

関連項目： minimumHeight 、maximumHeight 、fillHeight 、およびpreferredWidth 。

SplitView.preferredWidth : real [attached]

このアタッチメントプロパティは、分割アイテムの推奨幅を制御します。推奨幅はアイテムのサイズとして使用され、minimumWidth およびmaximumWidth の範囲内に収められます。推奨幅が設定されていない場合、アイテムのimplicitWidth が使用されます。

分割アイテムのサイズが変更されると、新しいサイズを反映するために preferredWidth が設定されます。

デフォルトでは、このプロパティは設定されていないため、代わりにimplicitWidth が使用されます。このプロパティをデフォルト値にリセットするには、undefined に設定してください。

関連項目： minimumWidth 、maximumWidth 、fillWidth 、およびpreferredHeight 。

SplitView.view : SplitView [attached]

この添付プロパティには、それが添付されている項目のスプリットビューが格納されます。ただし、その項目がスプリットビューに表示されていない場合は、null が格納されます。

メソッドのドキュメント

bool restoreState(state)

state から推奨サイズを読み取り、分割された項目に適用します。

状態の復元に成功した場合は `true ` を返し、失敗した場合は `false` を返します。

Serializing SplitView's State およびsaveState()も参照してください 。

var saveState()

分割された項目の優先サイズをバイト配列に保存し、それを返します。

Serializing SplitView's State およびrestoreState()も参照してください 。