Qt Qml 垂直标签栏

Question

我想以与 Qt Creater 在他们的应用程序中所做的类似的方式将 Vertical TabBar 添加到我的应用程序（如图所示）。我一直在寻找如何简单地使 TabBar 垂直，但没有找到合适的答案（认为它是垂直的很常见）。

问题：如何制作垂直选项卡来浏览我拥有的不同 qml 文件？如果有更合适的选择，欢迎提出。

Answer 1

一个TabBar就是用一个普通的ListView来显示一堆TabButtons。您可以通过覆盖 contentItem 属性并使 ListView 垂直来自定义它，如下所示：

// VertTabBar.qml
TabBar {
    id: control

    contentItem: ListView {
        model: control.contentModel
        currentIndex: control.currentIndex

        spacing: control.spacing
        orientation: ListView.Vertical   // <<-- VERTICAL
        boundsBehavior: Flickable.StopAtBounds
        flickableDirection: Flickable.AutoFlickIfNeeded
        snapMode: ListView.SnapToItem

        highlightMoveDuration: 0
        highlightRangeMode: ListView.ApplyRange
        preferredHighlightBegin: 40
        preferredHighlightEnd: height - 40
    }
}

Qt Qml 垂直标签栏

Qt Qml Vertical Tabbar

qt

vertical-alignment

tabbar

qml