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 (子プロパティ）
• SplitView.fillHeight (1つの子のみ真)

さらに、各ハンドルは以下の読み取り専用の付属プロパティを持ちます：

• 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には、SplitView.fillWidth がtrue （orientation がQt.Vertical の場合はSplitView.fillHeight ）に設定されているアイテム（塗りつぶしアイテム）が常に1つ存在します。これは、他のアイテムがレイアウトされたときに、そのアイテムがすべての余ったスペースを取得することを意味します。デフォルトでは、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

この付属プロパティは、他のすべてのアイテムがレイアウトされた後に、アイテムが分割ビューの残りのスペースを取るかどうかを制御します。

デフォルトでは、分割ビューの最後に見える子がビューを埋めますが、他のアイテムでfillHeight をtrue に明示的に設定することで変更できます。複数のアイテムでfillHeight がtrue に設定されている場合、一番上のアイテムがビューを埋めます。

fillHeight をtrue に設定した分割アイテムの高さは、minimumHeight とmaximumHeight の範囲内に制限されます。

minimumHeight 、preferredHeight 、maximumHeight 、fillWidthも参照 。

SplitView.fillWidth : bool

この付属プロパティは、他のすべてのアイテムがレイアウトされた後に、アイテムが分割ビューの残りのスペースを取るかどうかを制御します。

デフォルトでは、分割ビューの最後に見える子がビューを埋めますが、他のアイテムでfillWidth をtrue に明示的に設定することで変更できます。複数のアイテムでfillWidth がtrue に設定されている場合、一番左のアイテムがビューを埋めます。

fillWidth をtrue に設定した分割アイテムの幅は、minimumWidth とmaximumWidth の範囲内に制限されます。

minimumWidth 、preferredWidth 、maximumWidth 、fillHeightも参照 。

SplitView.maximumHeight : real

この付属プロパティは、分割アイテムの最大高さを制御する。preferredHeight は、minimumHeight と maximumHeight にバインドされる。分割アイテムは、maximumHeight より大きくドラッグすることはできません。

デフォルト値はInfinity です。このプロパティをデフォルト値に戻すには、undefined に設定します。

minimumHeight,preferredHeight,fillHeight,maximumWidthも参照してください 。

SplitView.maximumWidth : real

この付属プロパティは、分割項目の最大幅を制御する。preferredWidth は、minimumWidth と maximumWidth 内にバインドされる。分割アイテムは、そのmaximumWidth よりも大きくドラッグすることはできません。

デフォルト値はInfinity です。このプロパティをデフォルト値に戻すには、undefined に設定します。

minimumWidth,preferredWidth,fillWidth,maximumHeightも参照してください 。

SplitView.minimumHeight : real

この付属プロパティは、分割アイテムの最小の高さを制御する。preferredHeight は、minimumHeight とmaximumHeight 内にバインドされる。分割アイテムは、そのminimumHeight より小さくなるようにドラッグすることはできません。

デフォルト値は0 です。このプロパティをデフォルト値に戻すには、undefined に設定します。

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

SplitView.minimumWidth : real

この付属プロパティは、分割アイテムの最小幅を制御する。preferredWidth は、minimumWidth とmaximumWidth 内にバインドされる。分割アイテムは、そのminimumWidth よりも小さくなるようにドラッグすることはできません。

デフォルト値は0 です。このプロパティをデフォルト値に戻すには、undefined に設定します。

maximumWidth,preferredWidth,fillWidth,minimumHeightも参照してください 。

SplitView.preferredHeight : real

この付属プロパティは、分割アイテムの好ましい高さを制御する。preferredHeight はアイテムのサイズとして使用され、minimumHeight とmaximumHeight 内でバインドされる。 preferredHeight が設定されていない場合、アイテムのimplicitHeight が使用される。

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

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

minimumHeight 、maximumHeight 、fillHeight 、preferredWidthも参照してください 。

SplitView.preferredWidth : real

この付属プロパティは、分割アイテムの好ましい幅を制御する。好ましい幅はアイテムのサイズとして使用され、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()も参照 。