设置 Qml TabBar 选项卡颜色？

Question

我尝试使用此代码设置 TabBar 选项卡背景颜色，但仅更改了选定的选项卡颜色。如何为其他标签设置颜色？另外，如何设置选项卡的文本颜色？

TabBar {
    id: tabBar

    currentIndex: swipeView.currentIndex

    background: Rectangle {
        color: "#f4d37c"
    }

    TabButton {
        id: cardsTabButton
        height: Style.line2Height
        text: qsTr("Cards")
    }

    TabButton {
        id: errorsTabButton
        height: Style.line2Height
        text: qsTr("Errors")
    }
}

（左侧选项卡被选中）

Answer 1

您可以自定义任何 QML.2 控件，包括TabBar. 有关更多信息，请参阅此页面。简单的例子：

TabBar {
    id: tabBar
    anchors.fill: parent
    background: Rectangle {
        color: "yellow"
    }
    TabButton {
        height: 30
        text: "Tab1"
        background: Rectangle {
            color: tabBar.currentIndex == 0 ? "orange" : "green"
            radius: 10
        }
    }
    TabButton {
        height: 30
        text: "Tab2"
        background: Rectangle {
            color: tabBar.currentIndex == 1 ? "purple" : "lightblue"
            radius: 10
        }
    }
}