QML：带图标的QtQuick.Controls选项卡

Question

我一直在学习如何使用QT Creator Tool，以便我可以快速轻松地构建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"

            }
        }
    }

Answer 1

在Simon Warta中详细阐述Extending TabViewStyle styleData的答案，您可以做以下事情：

定义自定义IconTab

您想要扩展Tab项，以便指定要显示的图标。 因此，在项目中添加一个名为IconTab.qml的新文件：

IconTab.qml

import QtQuick.Controls 1.4

Tab{
    property string icon
}

定义自定义TabViewStyle。

要使用此新属性，您必须创建自己的TabViewStyle。您可能需要重新定义背景和文本大小和颜色，以使其适合您的应用主题，但这样的事情可能有效：

MyStyle.qml

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

        }
    }
}

请注意如何使用control属性和styleData.index来获取图标的网址：control.getTab(styleData.index).icon

将各个部分放在一起

main.qml

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"
        }

    }
}

结果