自定义QML TabButton

Question

我想在QML中自定义TabButton，但找不到足够的属性here。

我可以更改字体颜色，但是如何更改基础线条样式？

Answer 1

您必须自己实施。您可以将Qt使用的模板用作按钮，并更改所需的内容。为了找到方法，您可以进入Qt文件夹。对我而言，它位于：

C：\ Qt \ 5.11.1 \ Src \ qtquickcontrols2 \ src \ imports \ controls \ material

另一种选择是将TabBar放入所需的任何位置，例如，您可以这样做：

 TabBar {
        id: tabBarItem

        currentIndex: model.currentIndex 

        contentItem: ListView {
            id: view

            model: model //it Contains the list of items that you want to show
            delegate: delegate // Delegate that could be a button or whatever. You could use the default delegate ItemDelegate
         }

}

https://doc.qt.io/qt-5/qml-qtquick-controls2-itemdelegate.html

Answer 2

我会建议您构建自己的项目，这样可以使您更好地控制设计决策。

要创建带有按钮的选项卡，您可以执行以下操作（注意：这里有很多改进的余地，因此继续进行实验，您将学到很多东西：]]]

---

TopButton.qml（这是我们构建的按钮项目，我们在选项卡菜单中使用它）

import QtQuick 2.0

Rectangle {
    id: button
    width: 100
    height: 20
    color: "#ADD8E6"
    radius: 2
    property alias text: buttontext
    signal clicked

    property bool selected

    Text {
        id: buttontext
        anchors.centerIn: parent
        text: "Test"
    }

    MouseArea {
        id: mouseArea

        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        hoverEnabled: true
        onClicked: button.clicked()
    }

    Rectangle {
        id: underlineRect

        visible: button.selected
        height: 2
        width: button.width
        color: "black"
        anchors.bottom: parent.bottom
    }

    Behavior on selected {PropertyAnimation {properties: "selected"; easing.type: Easing.InOutElastic; easing.amplitude: 2.0; easing.period: 0.5}}
}

---

TAB（将按钮连续排列）

Row {
        id: buttonRow
        spacing:2
        anchors.centerIn: parent

        TopButton {
            id: firstButton

            selected: true
            onClicked: {
                secondButton.selected = false
                selected = true
            }
        }

        TopButton {
            id: secondButton

            onClicked: {
                firstButton.selected = false
                selected = true
            }
        }
    }