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는 탭 기반의 탐색 모델을 제공합니다.

currentIndex TabBar는 TabButton 컨트롤로 채워지며, 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)
        }
    }
}

Qt Quick Controls 의‘ TabButton’ , ‘Customizing TabBar’, ‘Navigation Controls’, ‘Container Controls’ 및 ‘Focus Management’항목도 참조하십시오 .

속성 설명서

contentHeight : real [since QtQuick.Controls 2.2 (Qt 5.9)]

이 속성은 콘텐츠의 높이를 저장합니다. 탭 바의 총 암시적 높이를 계산하는 데 사용됩니다.

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

Container::contentHeight도 참조하십시오 .

contentWidth : real [since QtQuick.Controls 2.2 (Qt 5.9)]

이 속성은 콘텐츠의 너비를 저장합니다. 탭 바의 총 암시적 너비를 계산하는 데 사용됩니다.

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

Container::contentWidth도 참조하십시오 .

position : enumeration

이 속성은 탭 바의 위치를 지정합니다.

사용 가능한 값:

기본값은 스타일에 따라 다릅니다.

ApplicationWindow::header, ApplicationWindow::footer, Page::header 및 Page::footer도 참조하십시오 .

첨부된 속성 설명서

TabBar.index : int [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

이 첨부 속성은 TabBar 의 각 탭 버튼의 인덱스를 저장합니다.

이 속성은 TabBar 의 각 탭 버튼에 연결되어 있습니다.

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

TabBar.position : enumeration [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

이 첨부 속성은 탭 바의 위치를 지정합니다.

이 속성은 ` TabBar`의 각 탭 버튼에 적용됩니다.

사용 가능한 값:

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

TabBar.tabBar : TabBar [read-only attached, since QtQuick.Controls 2.3 (Qt 5.10)]

이 첨부 속성은 이 탭 버튼을 관리하는 탭 바를 포함합니다.

이 속성은 TabBar 의 각 탭 버튼에 연결됩니다.

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