选项卡 QML 中的图标

Question

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

• 有没有办法在 QML 的TabView 中的Tab 中插入图像？
• 是否有滚动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 属性来加载不同的图像。 IE。下一个代码是使用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" }
        }