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 속성을 사용하여 액세스할 수 있습니다.

다음 예는 컨테이너의 구체적인 구현 중 하나인 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
}

컨테이너 구현하기

컨테이너는 기본 시각화를 제공하지 않습니다. 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
    }
}

페이지 항목의 크기가 수작업으로 설정되어 있는 것을 주목하세요. 이는 이 예제에서 시각적 레이아웃에 대한 어떠한 가정도 하지 않는 일반 컨테이너를 사용하기 때문입니다. 일반적으로 SwipeView 및 TabBar 과 같은 구체적인 컨테이너 구현에서는 항목의 크기를 지정할 필요가 없습니다.

컨테이너 컨트롤도참조하세요 .

속성 문서

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

메서드 문서