标签QML中的图标

Szymson 发表于 Dev

希姆森

我在查看QML文档，但没有找到：

有什么办法插入图片到Tab在TabView在QML？
有滚动的可能Tabs吗？

塔罗德

@folibis是正确的，但是在他的允许下，我想向您展示一个示例，因为可能很难理解如何在QML选项卡中设置图像。

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

Window {
    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("Example")


    TabView {
        anchors.fill: parent

        Tab { title: "One" ; Item {}}
        Tab { title: "Two" ; Item {}}
        Tab { title: "Three" ; Item {}}
        Tab { title: "Four" ; Item {}}
        style: tabViewStyle
    }

    Component {
        id: tabViewStyle
        TabViewStyle {
            tabsMovable: true

            tab: Item {
                implicitWidth: 97
                implicitHeight: 28

                Image {
                    id: image
                    anchors.centerIn: parent
                    source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
                }
                Text {
                    id: text
                    text: styleData.selected ? "" : styleData.title
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }

            frame: Rectangle { color: "steelblue" }
        }
    }
}

我将代码上传到GitHub。

更新

您可以TabViewStyle根据需要使用一些属性来加载不同的图像。即下一个代码int styleData.index用于加载不同的代码sources。该代码也在GitHub中。

        TabViewStyle {
            tabsMovable: true

            tab: Item {
                function loadImage(index) {
                    return "images/tab"+index+".png";
                }

                implicitWidth: 97
                implicitHeight: 28

                Image {
                    id: image
                    anchors.centerIn: parent                        
                    source: loadImage(styleData.index)
                }
                Text {
                    id: text
                    text: styleData.selected ? "" : styleData.title
                    anchors.horizontalCenter: parent.horizontalCenter
                }
            }

            frame: Rectangle { color: "steelblue" }
        }