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

Posted 2023-02-14

【中文标题】QML：带有图标的 QtQuick.Controls 选项卡

【英文标题】：QML: QtQuick.Controls Tabs with Icons

【发布时间】：2017-01-17 00:32:55

【问题描述】：

我一直在学习如何使用 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"

            
        
    

【问题讨论】：

Extending TabViewStyle styleData的可能重复

【参考方案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
                GradientStopposition:0; color:styleData.selected?"#EDEDED":"#E3E3E3"
                GradientStopposition: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"
        

    

结果