Container QML Type

컨테이너에 공통적으로 필요한 기능을 제공하는 추상 기본 유형. 더 보기...

• 상속된 멤버를 포함한 모든 멤버 목록

속성

• contentChildren : list<Item>
• contentData : list<QtObject>
• contentHeight : real (since QtQuick.Controls 2.5 (Qt 5.12))
• contentModel : model
• contentWidth : real (since QtQuick.Controls 2.5 (Qt 5.12))
• count : int
• currentIndex : int
• currentItem : Item

방법

• void addItem(Item item)
• void decrementCurrentIndex() (since QtQuick.Controls 2.1 (Qt 5.8))
• void incrementCurrentIndex() (since QtQuick.Controls 2.1 (Qt 5.8))
• void insertItem(int index, Item item)
• Item itemAt(int index)
• void moveItem(int from, int to)
• void removeItem(Item item) (since QtQuick.Controls 2.3 (Qt 5.10))
• void setCurrentIndex(int index)
• Item takeItem(int index) (since QtQuick.Controls 2.3 (Qt 5.10))

상세 설명

컨테이너는 항목을 동적으로 삽입하고 제거할 수 있는 컨테이너형 사용자 인터페이스 컨트롤의 기본 유형입니다.

컨테이너 사용법

일반적으로 항목은 컨테이너의 자식 요소로 정적으로 선언되지만, add, insert, move 및 remove 항목을 동적으로 추가할 수도 있습니다. 컨테이너 내의 항목에는 itemAt() 또는 contentChildren 를 사용하여 접근할 수 있습니다.

대부분의 컨테이너에는 “현재” 항목이라는 개념이 있습니다. 현재 항목은 currentIndex 속성을 통해 지정되며, 읽기 전용인 currentItem 속성을 사용하여 액세스할 수 있습니다.

다음 예제는 Container의 구체적인 구현체 중 하나인 TabBar 에 항목을 동적으로 삽입하는 방법을 보여줍니다.

Row {
    TabBar {
        id: tabBar

        currentIndex: 0
        width: parent.width - addButton.width

        TabButton { text: "TabButton" }
    }

    Component {
        id: tabButton
        TabButton { text: "TabButton" }
    }

    Button {
        id: addButton
        text: "+"
        flat: true
        onClicked: {
            tabBar.addItem(tabButton.createObject(tabBar))
            console.log("added:", tabBar.itemAt(tabBar.count - 1))
        }
    }
}

현재 인덱스 관리

TabBar 및 SwipeView 과 같은 여러 컨테이너를 함께 사용할 때, 각 컨테이너의 currentIndex 속성을 서로 바인딩하여 동기화를 유지할 수 있습니다. 사용자가 한쪽 컨테이너와 상호작용하면, 해당 컨테이너의 현재 인덱스 변경 사항이 자동으로 다른 컨테이너로 전파됩니다.

단, JavaScript에서 currentIndex 값을 할당하면 해당 바인딩이 해제된다는 점에 유의하십시오. 바인딩을 유지하려면 다음 메서드를 사용하여 현재 인덱스를 변경하십시오:

• incrementCurrentIndex()
• decrementCurrentIndex()
• setCurrentIndex()

TabBar {
    id: tabBar
    currentIndex: swipeView.currentIndex
}

SwipeView {
    id: swipeView
    currentIndex: tabBar.currentIndex
}

Button {
    text: qsTr("Home")
    onClicked: swipeView.setCurrentIndex(0)
    enabled: swipeView.currentIndex != 0
}

Button {
    text: qsTr("Previous")
    onClicked: swipeView.decrementCurrentIndex()
    enabled: swipeView.currentIndex > 0
}

Button {
    text: qsTr("Next")
    onClicked: swipeView.incrementCurrentIndex()
    enabled: swipeView.currentIndex < swipeView.count - 1
}

컨테이너 구현

Container는 기본 시각화 기능을 제공하지 않습니다. 이는 ` SwipeView ` 및 ` TabBar`와 같은 컨테이너를 구현하는 데 사용됩니다. 사용자 정의 컨테이너를 구현할 때 API에서 가장 중요한 부분은 ` contentModel` 메서드입니다. 이 메서드는 포함된 항목을 항목 뷰 및 리피터의 객체 모델로 사용할 수 있는 형태로 제공합니다.

Container {
    id: container

    contentItem: ListView {
        model: container.contentModel
        snapMode: ListView.SnapOneItem
        orientation: ListView.Horizontal
    }

    Text {
        text: "Page 1"
        width: container.width
        height: container.height
    }

    Text {
        text: "Page 2"
        width: container.width
        height: container.height
    }
}

페이지 항목의 크기가 수동으로 설정된 점에 유의하십시오. 이는 예제에서 시각적 레이아웃에 대해 어떠한 가정도 하지 않는 일반 Container를 사용하기 때문입니다. 일반적으로 SwipeView 및 TabBar 과 같은 구체적인 Container 구현체에서는 항목의 크기를 명시적으로 지정할 필요가 없습니다.

‘컨테이너 컨트롤’항목도 참조하십시오 .

속성 문서

contentChildren : list<Item>

이 속성은 콘텐츠 자식 요소의 목록을 포함합니다.

이 목록에는 QML에서 컨테이너의 자식으로 선언된 모든 항목과, 각각 ` addItem()` 및 ` insertItem()` 메서드를 사용하여 동적으로 추가되거나 삽입된 항목이 포함됩니다.

Item::children 및 contentData도 참조하십시오 .

contentData : list<QtObject> [default]

이 속성은 콘텐츠 데이터 목록을 포함합니다.

이 목록에는 QML에서 컨테이너의 자식 요소로 선언된 모든 객체와, 각각 ` addItem()` 및 ` insertItem()` 메서드를 사용하여 동적으로 추가되거나 삽입된 항목들이 포함됩니다.

Item::data 및 contentChildren도 참조하십시오 .

contentHeight : real [since QtQuick.Controls 2.5 (Qt 5.12)]

이 속성은 콘텐츠의 높이를 나타냅니다. 이 속성은 컨테이너의 총 암시적 높이를 계산하는 데 사용됩니다.

명시적으로 재정의하지 않는 한, 콘텐츠 높이는 컨테이너 내 항목들의 암시적 높이를 기반으로 자동으로 계산됩니다.

이 속성은 QtQuick.Controls 2.5(Qt 5.12)에서 도입되었습니다.

contentWidth도 참조하십시오 .

contentModel : model [read-only]

이 속성은 항목의 콘텐츠 모델을 포함합니다.

콘텐츠 모델은 시각화 목적으로 제공됩니다. 이 모델은 컨테이너의 내용을 표시하는 콘텐츠 항목에 모델로 할당될 수 있습니다.

Container {
    id: container
    contentItem: ListView {
        model: container.contentModel
    }
}

contentData 및 contentChildren도 참조하십시오 .

contentWidth : real [since QtQuick.Controls 2.5 (Qt 5.12)]

이 속성은 콘텐츠의 너비를 나타냅니다. 이 속성은 컨테이너의 총 암시적 너비를 계산하는 데 사용됩니다.

명시적으로 재정의하지 않는 한, 콘텐츠 너비는 컨테이너 내 항목들의 암시적 너비를 기준으로 자동으로 계산됩니다.

이 속성은 QtQuick.Controls 2.5(Qt 5.12)에서 도입되었습니다.

contentHeight도 참조하십시오 .

count : int [read-only]

이 속성은 항목의 개수를 저장합니다.

currentIndex : int

이 속성은 현재 항목의 인덱스를 저장합니다.

currentItem 및 Managing the Current Index도 참조하십시오 .

currentItem : Item [read-only]

이 속성은 현재 항목을 저장합니다.

currentIndex도 참조하십시오 .

메서드 설명서

void addItem(Item item)

item 을 추가합니다.

[since QtQuick.Controls 2.1 (Qt 5.8)] void decrementCurrentIndex()

컨테이너의 현재 인덱스를 1씩 줄입니다.

이 메서드를 호출하면 기존 ` currentIndex ` 바인딩을 깨지 않고 현재 인덱스를 변경할 수 있습니다.

이 메서드는 QtQuick.Controls 2.1(Qt 5.8)에서 도입되었습니다.

currentIndex 및 Managing the Current Index도 참조하십시오 .

[since QtQuick.Controls 2.1 (Qt 5.8)] void incrementCurrentIndex()

컨테이너의 현재 인덱스를 증가시킵니다.

이 메서드를 호출하면 기존 ` currentIndex ` 바인딩을 깨지 않고 현재 인덱스를 변경할 수 있습니다.

이 메서드는 QtQuick.Controls 2.1(Qt 5.8)에서 도입되었습니다.

currentIndex 및 Managing the Current Index도 참조하십시오 .

void insertItem(int index, Item item)

index 에 ‘ item ’를 삽입합니다.

Item itemAt(int index)

index 에 있는 항목을 반환하며, 해당 항목이 존재하지 않으면 null 를 반환합니다.

void moveItem(int from, int to)

항목을 from 한 인덱스만큼 이동시키고, to 다른 인덱스만큼 이동시킵니다.

[since QtQuick.Controls 2.3 (Qt 5.10)] void removeItem(Item item)

지정된 ` item`를 제거하고 파기합니다.

이 메서드는 QtQuick.Controls 2.3(Qt 5.10)에서 도입되었습니다.

void setCurrentIndex(int index)

컨테이너의 현재 index 를 설정합니다.

이 메서드를 호출하면 기존 ` currentIndex ` 바인딩을 깨지 않고 특정 현재 인덱스를 설정할 수 있습니다.

currentIndex 및 Managing the Current Index도 참조하십시오 .

[since QtQuick.Controls 2.3 (Qt 5.10)] Item takeItem(int index)

index 에 있는 항목을 제거하고 반환합니다.

이 메서드는 QtQuick.Controls 2.3 (Qt 5.10)에서 도입되었습니다.