Material Design

1854
3
Jump to solution
04-03-2017 11:13 PM
GarethWalters3
New Contributor III

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 VertzonisShobana SureshStephen Quan any info would be greatly appreciated.

Cheers,

"Bruce"

0 Kudos
1 Solution

Accepted Solutions
StephenQuan1
Esri Contributor

Regarding AppStudio 1.4.18, on desktop platforms, you can launch your app with the command line argument argument:

    ./app -style material

Alternatively, use Local Make to create C++ project files so that you can use QQuickStyle in the main.cpp:

    QQuickStyle::setStyle("Material");

then build your app with Qt Creator.

Reference:

  Qt5.8 > Styling Qt Quick Controls 2.

View solution in original post

0 Kudos
3 Replies
StephenQuan1
Esri Contributor

Regarding AppStudio 1.4.18, on desktop platforms, you can launch your app with the command line argument argument:

    ./app -style material

Alternatively, use Local Make to create C++ project files so that you can use QQuickStyle in the main.cpp:

    QQuickStyle::setStyle("Material");

then build your app with Qt Creator.

Reference:

  Qt5.8 > Styling Qt Quick Controls 2.

0 Kudos
GarethWalters3
New Contributor III

Thanks for that Steve. Got it working on desktop to prove it works, however really need it on the other platforms. Will have to way up if the style is worth implementing local make just for this, because the cloud builder is so convenient.

Couldn't that be set as a property and then AppRun could know what to do, just like it does with the App width and height.

Perhaps a property of App could be QuickStyle: Enums.QuickStyleMaterial ?

Cheers,

Gareth

0 Kudos
ShobanaSuresh
Esri Contributor

Gareth,

You could try adding a new environment variable QT_QUICK_CONTROLS_STYLE with value "material" in AppStudio Settings -> Environment.

Supported Environment Variables in Qt Quick Controls 2 | Qt Quick Controls 2 5.8 

Qt documentation says "The style must be configured before loading QML that imports Qt Quick Controls 2. It is not possible to change the style after the QML types have been registered."

So, please try to delay load the QML file that imports "Qt Quick Controls 2" possibly using Loader.

Unfortunately this is a limitation in AppStudio 1.4.  In the next release of AppStudio, there will be a way to configure the app's style. For e.g., if a file named qtquickcontrols2.conf is present in the app's root folder, both AppRun and apps built with AppMake will use this configuration file for setting the app's style.

Qt Quick Controls 2 Configuration File | Qt Quick Controls 2 5.8 

Thanks

Shobana

cc: stephen_quan

0 Kudos