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 来获取图标的 url：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"
        }

    }
}

结果