QML:QtQuick。使用图标控制选项卡

我一直在学习如何使用QtCreator工具，以便快速轻松地构建UI。对于我当前的项目，我必须使用QML来构建我的UI。我想在我的显示器上显示选项卡。我想在我的选项卡中使用图像代替文本。我的代码如下。我尝试添加源代码，但这无助于添加图标。有人知道怎么做吗？我们将不胜感激

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.2

    Window {
        visible: true
        width: 640
        height: 400
        opacity: 1
        TabView {
            height: 300
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            anchors.fill: parent
            Tab {
                title: "Robot"
                component: Qt.createComponent("RobotControls.qml")
            }
            Tab{
               title: "Tab #2"

            }
        }
    }

---

在详细阐述中的答案后，您可以做以下几点：

定义自定义IconTab 您希望扩展选项卡项，以便可以指定要显示的图标。 因此，请向项目中添加一个名为IconTab.qml的新文件：

IconTab.qml

定义一个自定义项。 要使用此新属性，必须创建自己的TabViewStyle。您可能需要重新定义背景、文本大小和颜色，以使其适合您的应用程序主题，但类似的方法可能会奏效：

MyStyle.qml

请注意如何使用控件属性和styleData.index获取图标的url:

control.getTab（styleData.index）.icon

拼凑 main.qml

结果

可能存在的副本

import QtQuick.Controls 1.4

Tab{
    property string icon
}

import QtQuick 2.5
import QtQuick.Controls.Styles 1.2

TabViewStyle {
    tab: Item {

        implicitWidth: Math.round(textitem.implicitWidth + image.width + 20)
        implicitHeight: Math.round(textitem.implicitHeight + 10)

        Rectangle
        {
            anchors.fill: parent
            anchors.bottomMargin: 2
            radius: 1
            border.width: 1
            border.color: "#AAA"
            color:"transparent"
        }

        Rectangle
        {
            anchors.fill: parent
            anchors.margins: 1
            anchors.bottomMargin: styleData.selected ? 0 : 2
            radius: 1
            gradient: Gradient{
                GradientStop{position:0; color:styleData.selected?"#EDEDED":"#E3E3E3"}
                GradientStop{position:1; color:styleData.selected?"#DCDCDC":"#D3D3D3"}
            }
        }

        Text {
            id: textitem
            anchors.fill: parent
            anchors.leftMargin: 4 + image.width
            anchors.rightMargin: 4
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            text: styleData.title
            elide: Text.ElideMiddle
        }

        Image
        {
            id: image
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.margins: 2
            anchors.leftMargin: 4
            fillMode: Image.PreserveAspectFit
            source: control.getTab(styleData.index).icon

        }
    }
}

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.0

Window {
    visible: true
    width: 640
    height: 400

    TabView {
        id: tabView
        anchors.fill: parent

        style: MyStyle{}

        IconTab {
            title: "Tab #1"
            icon: "icon.png"
        }
        IconTab{
            title: "Tab #2"
        }
        IconTab{
            title: "Tab #3"
            icon: "icon.png"
        }

    }
}