AnsweredAssumed Answered

Material Design

Question asked by GWaltersesriaustralia-com-au-esridist Employee on Apr 3, 2017
Latest reply on Apr 5, 2017 by SSuresh-esristaff

Hi everyone,

 

Now that the Material/Universal design components have moved to core QML controls, can you use them in AppStudio 1.4.18?

 

I have managed to color a rectangle but the theme and accent color is not working as expected.

 

In MyApp.qml:

 

import QtQuick 2.5

import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import ArcGIS.AppFramework 1.0
App {
    width: 400
    height: 640
    Material.theme: Material.Light
    Material.accent: Material.Blue
    MaterialRectangle {
    }
}

MaterialRectangle.qml

import QtQuick 2.5
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1
import ArcGIS.AppFramework 1.0
Rectangle {
    width: 400
    height: 640
    color: Material.color(Material.Teal)
    Material.theme: Material.Light
    Material.accent: Material.Yellow
    property int theValue
    Switch {
        id: switch1
        x: 143
        y: 161
        text: qsTr("Switch")
        checked: theValue >= 50
        enabled: theValue >= 50
    }
    Dial {
        id: dial
        x: 108
        y: 228
        from: 0
        to: 100
        value: theValue
        onValueChanged: theValue = parseInt(dial.position * 100)
        Label {
            anchors.centerIn: parent
            text: theValue
            font.pointSize: 35
        }
    }
    SpinBox {
        id: spinBox
        x: 130
        y: 450
        value: theValue
        onValueChanged: dial.value = value
    }
}

 

 

If I'm missing something, great. However, in the help from Qt it says that QQuickStyle needs to be set to ("Material"). Is this value the culprit? If not, is there a simple fix?

Material Style | Qt Quick Controls 2 5.8 

Styling Qt Quick Controls 2 | Qt Quick Controls 2 5.8 

 

Marika Vertzonis Shobana Suresh Stephen Quan any info would be greatly appreciated.

 

Cheers,

 

"Bruce"

Outcomes