Расширение данных стиля TabViewStyle

В настоящее время я пытаюсь найти более удобный способ сделать это, добавить значок на вкладку. Прямо сейчас я отказываюсь от 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]
                }
            }
        }
    }
}

person Joseph Montanez    schedule 27.06.2014    source источник


Ответы (1)


Создать компонент 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 не должен работать. По крайней мере, это не задокументировано.

person Simon Warta    schedule 27.06.2014
comment
У вас есть MyTab.qml, поэтому это должно быть MyTab {, а не IconTab {. Хотя работает идеально спасибо! - person Joseph Montanez; 30.06.2014
comment
Я делаю то же самое, но получаю: Невозможно назначить [undefined] QUrl - person Muhammet Ali Asan; 01.03.2017