CODEWITHSUNDEEP
qtqmlqt-quick
Lawrence Kok
Lawrence Kok

Reputation: 1608

qt quick material style controls

I'm trying to design a qt quick application using qml. From what I gather in the documentation of qt is that these controls have support for styling automatically (e.g. there's a material light/material dark themes.

However, when I tried to apply it to the tabview control I can't get the styling to be applied. I can make a propery binding ala Rectangle { color: Material.color(Material.Red)} This works well for looking up any of the predefined colors, however I don't seem to be able to access attached (inherited) properties like Material.background

How can I best apply theming to controls that don't support it? It doesn't look like it's possible to property binding to an attached property- or at least qt/qml seems to get confused because Material. is also considered the namespace.

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls.Material 2.1

ApplicationWindow {
    id: mainWindow;
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")    
    Material.theme: Material.Dark
    Material.accent: Material.Purple


    TabView {
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        tabPosition: Qt.BottomEdge
        Material.theme: Material.Dark
        Material.accent: Material.Purple

        Tab {
            title: "Red"
            Material.theme: Material.Dark
            Material.accent: Material.Purple
        }
        Tab {
            title: "Blue"
            Rectangle { color: "blue" }
        }
        Tab {
            title: "Green"
            Material.theme: Material.Dark
            Material.accent: Material.Purple
        }

        style: TabViewStyle {
            frameOverlap: 1
            tab: Rectangle {
                color: styleData.selected ? "steelblue" :"lightsteelblue"
                border.color:  "steelblue"
                implicitWidth: Math.max(text.width + 4, 80)
                implicitHeight: 20
                radius: 2
                Text {
                    id: text
                    anchors.centerIn: parent
                    text: styleData.title
                    color: styleData.selected ? "white" : "black"
                }
            }
            frame: Item {

            }
        }
    }

}

Upvotes: 0

Views: 1296

Answers (1)

Mitch
Mitch

Reputation: 24416

TabView is from Controls 1. You should use TabBar and TabButton, as the Material style is only available with Qt Quick Controls 2:

https://doc.qt.io/qt-5/qtquickcontrols2-differences.html#type-comparison-table

Upvotes: 1

Related Questions