如何将 TabView 的 tab 排列成多行？

Question

发件人：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" }
    }
}

这些选项卡默认显示在水平栏中。如何分行显示？

像这样：
选项卡 1
Tab2
选项卡 3

而不是：
Tab1 Tab2 Tab3

Answer 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" }
        }
    }
}

Answer 2

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

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

如何将 TabView 的 tab 排列成多行？

How to arrange tabs of TabView in multiple rows?

qt

qml

qt5

qtquick2

qtquickcontrols