选项卡 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" }
        }