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 (자식이 하나뿐인 경우 true)
• SplitView.fillHeight (자식이 하나일 때만 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에는 항상 SplitView.fillWidth 가 true (또는 orientation 가 Qt.Vertical 인 경우 SplitView.fillHeight)로 설정된 항목(채움 항목)이 하나 존재합니다. 이는 다른 항목들의 레이아웃이 완료된 후 남은 공간을 해당 항목이 모두 차지함을 의미합니다. 기본적으로 SplitView에서 마지막으로 표시되는 자식 항목에 이 속성이 설정되지만, 다른 항목에 대해 fillWidth 를 true 으로 명시적으로 설정하여 변경할 수 있습니다.

핸들은 항목의 왼쪽 또는 상단, 또는 오른쪽 또는 하단에 위치할 수 있습니다:

• 채우기 항목이 오른쪽에 있는 경우: 핸들은 왼쪽 항목에 속합니다.
• 채움 항목이 왼쪽에 있는 경우: 핸들은 오른쪽 항목에 속합니다.

세 개의 항목으로 구성된 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()도 참조하십시오 .