TabBar QML Type

Ermöglicht es dem Benutzer, zwischen verschiedenen Ansichten oder Teilaufgaben zu wechseln. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

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

Beigefügte Eigenschaften

• 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))

Ausführliche Beschreibung

TabBar bietet ein tabulatorbasiertes Navigationsmodell.

TabBar wird mit TabButton Steuerelementen bestückt und kann zusammen mit jedem Layout- oder Container-Steuerelement verwendet werden, das die currentIndex -Eigenschaft bietet, wie z.B. StackLayout oder 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
    }
}

Wie oben gezeigt, wird TabBar typischerweise mit einem statischen Satz von Registerkarten-Schaltflächen bestückt, die inline als Kinder der Registerkartenleiste definiert sind. Es ist auch möglich, add, insert, move, und remove Elemente dynamisch zur Laufzeit. Auf diese Elemente kann mit itemAt() oder contentChildren zugegriffen werden.

Wenn TabBar mit einem anderen Container wie SwipeView gepaart wird, ist es notwendig, eine bidirektionale Bindung zwischen der currentIndex Eigenschaft jedes Steuerelements herzustellen. Um dies zu tun, ohne die Bindungen zu unterbrechen, vermeiden Sie es, currentIndex direkt zu setzen, und verwenden Sie stattdessen z. B. setCurrentIndex(). Siehe Managing the Current Index für weitere Informationen.

Um eine Aktion auszuführen, wenn sich currentIndex ändert, verwenden Sie den onCurrentIndexChanged property change signal handler:

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

Größenänderung von Tabs

Standardmäßig passt TabBar die Größe seiner Schaltflächen an die Breite des Steuerelements an. Der verfügbare Platz wird gleichmäßig auf jede Schaltfläche verteilt. Das standardmäßige Größenänderungsverhalten kann durch das Festlegen einer expliziten Breite für die Schaltflächen außer Kraft gesetzt werden.

Das folgende Beispiel veranschaulicht, wie die einzelnen Registerkarten-Schaltflächen in ihrer impliziten Größe beibehalten werden können, anstatt die Größe an die Registerkartenleiste anzupassen:

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

Flickable Tabs

Wenn die Gesamtbreite der Schaltflächen die verfügbare Breite der Registerkartenleiste übersteigt, wird diese automatisch aufklappbar.

TabBar {
    id: bar
    width: parent.width

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

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

Siehe auch TabButton, Anpassen von TabBar, Navigation Controls, Container Controls und Focus Management in Qt Quick Controls.

Eigenschaft Dokumentation

Angehängte Eigenschaft Dokumentation