2

我目前正在尝试找到一种更好的方法来执行此操作，将图标添加到选项卡。现在我正在支持 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]
                }
            }
        }
    }
}
4

1 回答 1

3

创建组件IconTab.qml

import QtQuick 2.2
import QtQuick.Controls 1.1

Tab {
    property url iconSource
}

然后替换所有的Tabs 宽度IconTabs，例如

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 不应该工作。至少，它没有记录在案。

于 2014-06-27T21:28:36.950 回答