如何将 TabView 的选项卡排列成多行？

Posted 2023-02-14

【中文标题】如何将 TabView 的选项卡排列成多行？

【英文标题】：How to arrange tabs of TabView in multiple rows?

【发布时间】：2015-03-18 08:44:31

【问题描述】：

发件人：http://doc.qt.io/qt-5/qml-qtquick-controls-tabview.html#details

TabView 

    Tab 
        title: "Red"
        Rectangle  color: "red" 
    
    Tab 
        title: "Blue"
        Rectangle  color: "blue" 
    
    Tab 
        title: "Green"
        Rectangle  color: "green" 
    

这些选项卡默认显示在水平条中。如何在单独的行中显示它们？

像这样： Tab1 Tab2 Tab3

而不是： Tab1 Tab2 Tab3

【参考方案1】：

您需要隐藏标准标签栏，并创建自己的垂直栏。

Row 
    Column 
        Repeater 
            model: view.count
            Rectangle 
                width: 100
                height: 40
                border.width: 1
                Text 
                    anchors.centerIn: parent
                    text: view.getTab(index).title
                
                MouseArea 
                    anchors.fill: parent
                    cursorShape: Qt.PointingHandCursor
                    onClicked: view.currentIndex = index
                
            
        
    
    TabView 
        id: view
        style: TabViewStyle 
            tab: Item 
        

        Tab 
            title: "Red"
            Rectangle  color: "red" 
        
        Tab 
            title: "Blue"
            Rectangle  color: "blue" 
        
        Tab 
            title: "Green"
            Rectangle  color: "green" 
        
    

【参考方案2】：

我不是 100% 确定你想在这里实现什么，但不久前我有一个类似的要求，并且在设计器中很容易解决。在 QTabWidget 的属性部分，第一个选项应该是 tabPosition。

如果您将 tabPosition 设置为“West”，它将在您的小部件左侧垂直排列选项卡，但文本也会横向排列，不知道这对您来说是否有问题，它不是我的情况。我会发截图，但我的声望太低了。