TabBar QML Type

사용자가 다른 보기 또는 하위 작업 간에 전환할 수 있습니다. 더 보기...

• 상속된 구성원을 포함한 모든 구성원 목록

속성

• contentHeight : real (since QtQuick.Controls 2.2 (Qt 5.9))
• contentWidth : real (since QtQuick.Controls 2.2 (Qt 5.9))
• position : enumeration

첨부 속성

• index : int (since QtQuick.Controls 2.3 (Qt 5.10))
• position : enumeration (since QtQuick.Controls 2.3 (Qt 5.10))
• tabBar : TabBar (since QtQuick.Controls 2.3 (Qt 5.10))

상세 설명

TabBar는 탭 기반 탐색 모델을 제공합니다.

TabBar는 TabButton 컨트롤로 채워지며 currentIndex -프로퍼티를 제공하는 레이아웃 또는 컨테이너 컨트롤(예: StackLayout 또는 SwipeView

TabBar {
    id: bar
    width: parent.width
    TabButton {
        text: qsTr("Home")
    }
    TabButton {
        text: qsTr("Discover")
    }
    TabButton {
        text: qsTr("Activity")
    }
}

StackLayout {
    width: parent.width
    currentIndex: bar.currentIndex
    Item {
        id: homeTab
    }
    Item {
        id: discoverTab
    }
    Item {
        id: activityTab
    }
}

위에 표시된 것처럼 TabBar는 일반적으로 탭 표시줄의 자식으로 인라인으로 정의된 정적 탭 버튼 집합으로 채워집니다. add , insert, move, remove 항목을 런타임에 동적으로 추가할 수도 있습니다. 이러한 항목은 itemAt() 또는 contentChildren 을 사용하여 액세스할 수 있습니다.

TabBar가 SwipeView 와 같은 다른 컨테이너와 쌍을 이루는 경우 각 컨트롤의 currentIndex 속성 간에 양방향 바인딩을 만들어야 합니다. 바인딩을 깨지 않고 이 작업을 수행하려면 currentIndex 을 직접 설정하지 말고 setCurrentIndex() 등을 사용하세요. 자세한 내용은 Managing the Current Index 을 참조하세요.

currentIndex 변경 시 작업을 수행하려면 onCurrentIndexChanged 속성 변경 신호 핸들러를 사용합니다:

onCurrentIndexChanged: {
    print("currentIndex changed to", currentIndex)
    // ...
}

탭 크기 조정하기

기본적으로 TabBar는 컨트롤의 너비에 맞게 버튼의 크기를 조정합니다. 사용 가능한 공간은 각 버튼에 균등하게 분배됩니다. 버튼의 명시적 너비를 설정하여 기본 크기 조정 동작을 재정의할 수 있습니다.

다음 예는 탭 막대에 맞게 크기를 조정하는 대신 각 탭 버튼을 암시적 크기로 유지하는 방법을 보여줍니다:

TabBar {
    width: parent.width
    TabButton {
        text: "First"
        width: implicitWidth
    }
    TabButton {
        text: "Second"
        width: implicitWidth
    }
    TabButton {
        text: "Third"
        width: implicitWidth
    }
}

플릭 가능한 탭

버튼의 전체 너비가 탭 표시줄의 사용 가능한 너비를 초과하면 버튼이 자동으로 플릭 가능하게 됩니다.

TabBar {
    id: bar
    width: parent.width

    Repeater {
        model: ["First", "Second", "Third", "Fourth", "Fifth"]

        TabButton {
            text: modelData
            width: Math.max(100, bar.width / 5)
        }
    }
}

TabButton, 탭 모음, 탐색 컨트롤, 컨테이너 컨트롤 및 포커스 관리 사용자 지정하기( Qt Quick Controls )를참조하세요 .

속성 문서

첨부 속성 문서