Qt Qml 垂直标签栏答案

【问题标题】：Qt Qml Vertical TabbarQt Qml 垂直标签栏
【发布时间】：2021-08-01 22:31:14
【问题描述】：

我想将 Vertical TabBar 添加到我的应用程序中，就像 Qt Creater 在他们的应用程序中所做的那样（如图所示）。我一直在寻找如何简单地使 TabBar 垂直，但没有找到正确的答案（认为垂直是很常见的）。

问题：如何制作一个垂直标签来浏览我拥有的不同 qml 文件？如果有更合适的选择，请提出建议。

【问题讨论】：

【解决方案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
    }
}

【讨论】：

我想知道，这是常用的方法还是有更好的常用解决方案，例如使用具有不同实现的 TabBar 或 TabTool 或 Drawer 或...？
如果您有不同的解决方案，请随意使用。做事没有“正确的方法”。但是 Qt Quick Controls 被设计为易于定制，这对我来说看起来非常简单明了。
我正在实现的 TabBar 将在所有 qml Windows 中固定在左侧。因此，我只是使用了垂直方向并在 contentItem 内添加了 TabButtons（也在它之外尝试过）。但按钮仍然在窗口的左上角彼此重叠。我正在尝试解决此问题。
我已经测试了我的代码，它按预期工作。创建 TabBar 时，是否指定了高度？
我的错，增加高度后它工作正常，谢谢。现在，我将对其进行更多自定义，以根据需要与其他窗口正确匹配，并且不会出现在它们之上。