Tab QML中的图标

Question

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

• 有没有办法在QML的Tab中将图片插入TabView？
• 是否有可能滚动Tabs？

Answer 1

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

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