Back to Qt.io
Contact Us Blog Download Qt

SplitView QML Type

各項目の間にドラッグ可能なスプリッタを使用して項目を並べます。もっと見る...

Import Statement: import QtQuick.Controls
Inherits:

Container

プロパティ

Attached プロパティ

メソッド

詳細説明

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

SplitView は、管理するアイテムの以下の付属プロパティをサポートしています：

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

注意: ハンドルは純粋に視覚的なものであるべきで、ホバーされた状態や押された状態に干渉する可能性があるため、イベントを処理すべきではありません。

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 回インスタンス化されます。

以下の表は、各ハンドルが分割ビューの方向によってどのようにサイズ変更されるかを説明しています：

方向ハンドルの幅ハンドルの高さ
Qt.HorizontalimplicitWidthSplitView のheight 。
Qt.VerticalSplitView のwidth 。implicitHeight

視覚的なサイズを変更せずに、マウスイベントやタッチイベントのハンドルのサイズを変更するには、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 の方向を保持します。

方向は、分割アイテムがどのようにレイアウトされるかを決定します：

指定可能な値

定数説明
Qt.Horizontal項目は水平にレイアウトされる（デフォルト）。
Qt.Verticalアイテムは垂直にレイアウトされます。

resizing : bool [read-only]

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


Attached Property ドキュメント

SplitView.fillHeight : bool

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

デフォルトでは、分割ビューの最後に表示された子アイテムがビューを埋めますが、他のアイテムの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

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

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

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

注意： 分割アイテムのheight プロパティは設定しないでください。SplitView の各レイアウト時に上書きされます。

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


SplitView.preferredWidth : real

この添付プロパティは、分割アイテムの優先幅を制御します。好みの幅はアイテムのサイズとして使用され、minimumWidth とmaximumWidth の中でバインドされる。 好みの幅が設定されていない場合、アイテムのimplicitWidth が使用される。

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

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

注： SplitView の各レイアウト時に上書きされるため、分割項目のwidth プロパティは設定しないでください。

minimumWidth 、maximumWidth 、fillWidth 、preferredHeightも参照 。


SplitView.view : SplitView

このアタッチされたプロパティは、アタッチされたアイテムの分割ビューを保持し、アイテムが分割ビューにない場合はnull を保持します。


メソッドの説明

bool restoreState(state)

state から優先サイズを読み込み、分割されたアイテムに適用します。

状態が正常に復元された場合はtrue を返し、そうでない場合はfalse を返します。

Serializing SplitView's State およびsaveState()も参照 。


var saveState()

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

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


本ドキュメントに含まれる文書の著作権は、それぞれの所有者に帰属します。 本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。