扩展TabViewStyle styleData(Extending TabViewStyle st

目前我正在试图找到一种更好的方式来做到这一点，添加一个图标到一个标签。现在我捎带关闭styleData.title包括图标来源，但它会很高兴能够延长styleData这样我就可以包括其他自定义属性。

这是我目前黑客：

Tab {
    ...
    title: "Home|images/home-75.png"
    ...
}

style: TabViewStyle {
    ...
    tab: Rectangle {
        ...
        Text {
            ...
            text: styleData.title.split("|")[0]
            ...
        }
        Image {
            ...
            source: styleData.title.split("|")[1]
        }
    }
}

但是它会好得多，只是这样做：

Tab {
    ...
    title: "Home"
    source: "images/home-75.png"
    ...
}

style: TabViewStyle {
    ...
    tab: Rectangle {
        ...
        Text {
            ...
            text: styleData.title
            ...
        }
        Image {
            ...
            source: styleData.source
        }
    }
}

这里是应用程序标记为是：

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

ApplicationWindow {
    visible: true
    width: 320
    height: 480

    TabView {
        id: tabwidget
        x: 0
        y: 0
        tabPosition: Qt.BottomEdge
        width: parent.width
        height: parent.height

        Tab {
            id: homeTab
            title: "Home|images/home-75.png"
            source: "images/home-75.png"
            component: Qt.createComponent("Page2.qml")
        }

        Tab {
            id: inboxTab
            title: "Inbox|images/home-75.png"
            component: Qt.createComponent("Page3.qml")
        }

        Tab {
            id: outboxTab
            title: "Outbox"
            source: "images/home-75.png"
            component: Qt.createComponent("Page3.qml")
        }

        Tab {
            id: settingTab
            title: "Settings"
            source: "images/home-75.png"
            component: Qt.createComponent("Page3.qml")
        }

        style: TabViewStyle {
            frameOverlap: 0
            tab: Rectangle {
                color: "#F6F6F7"
                border.width: 0
                implicitWidth: (parent.control.width + 3) / 4
                implicitHeight: 88
                radius: 0
                CustomBorder
                {
                    commonBorder: false
                    lBorderwidth: 0
                    rBorderwidth: 0
                    tBorderwidth: 1
                    bBorderwidth: 0
                    borderColor: "#bababc"
                }
                Text {
                    id: text
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: styleData.title.split("|")[0]
                    color: styleData.selected ? "#ff3b30" : "#8e8e8f"
                }
                Image {
                    id: img
                    width: 75
                    height: 75
                    source: styleData.title.split("|")[1]
                }
            }
        }
    }
}

创建组件IconTab.qml

import QtQuick 2.2
import QtQuick.Controls 1.1

Tab {
    property url iconSource
}

然后更换所有的Tab小号宽度IconTab S，如

IconTab {
    id: outboxTab
    title: "Outbox"
    iconSource: "images/home-75.png"
}

并通过获得的图标的在TabViewStyle来源：

Component.onCompleted: {
    console.log("title: " + styleData.title)
    console.log("title: " + tabwidget.getTab(styleData.index).title)
    console.log("icon: " + tabwidget.getTab(styleData.index).iconSource)
}

顺便说一句。检查出的文档Tab.source和Tab.sourceComponent 。 Tab.component不应该工作。至少，它没有记录。