What is best practice for style of QML application?



  • Hello everybody!
    I'm developing small app, which can be in two states - black and white.
    Now my app working like this: I have style proposals from designers and a lot of images of some buttons, popups and so on.
    I have some QML Items for this different states - for example:
    Settings layout absolutely same in black and white mode, except visual appearance.
    SceneNode graph different a little in black and white mode.
    Also have some views which available in black and not on white.

    Now my app working like this:
    I have id: myapp, and state there "black" and "white"
    Image
    {
    source: myapp.state === "black" ? "button1_black.png" : "button1_white.png".
    }
    Problem that if I will have more visual appearance colors, you know what to expect here :)
    Does QML proposal some tool or instrument for full realtime visual state change?
    Or maybe some tips on this?
    Thanks!



  • The simple state machine system is for changing UI easily, I think it can be used for that. See Item -> 'states' and 'state' properties and the corresponding State type. (Not the full-blown state machine which is imported explicitly.)

    BTW, you don't have to have different icons. I have this kind of code:

    Image {
            id: image
        }
        ColorOverlay {
            anchors.fill: image
            source: image
            // In dark styles background is dark, this makes the image white
            color: tools.isDarkTheme() ? "#ffffffff" : "00000000"
        }
    


  • Thanks for answer.
    Okay, but if I have A LOT of images and they are icons with absolutely different images in different states. Any another approach?



  • @Warezovvv State machine works for that, just change the image source within states (you can change any property).



  • One thought is to create a style singleton. You can make a single 'themeing' element at the top and then expose the desired Qml data, hooking in the different styling via ternary operator later down, and then just link directly to them in your application elements. The singleton could, for example, look something like this:

    pragma Singleton
    import QtQuick 2.0
    
    QtObject {
        property bool lightTheme: true
    
        id: root
    
        property QtObject fonts:
        QtObject
        {
            property QtObject h1: QtObject { property color color: root.lightTheme ? "black" : "white" }
        }
    }
    

    Then, in your application you'd link to it (after setting up qmldir and using import ".") in this way:

        Text {
            text: qsTr("Hello World")
            color: Style.fonts.h1.color
        }
    

    The viability naturally depends on the needs of your application, but any way you look at it you might be fighting with a large amount of configuration. At the least, this keeps it all in a single coherent source file.

    It seems like you may also be suggesting the addition of a third (or more) styles down the road? In that case I'd absolutely recommend the suggestion, above, to use states. Maybe still keep the singleton for a global state control signal, but set up a different state for each theming type and tag in the appropriate PropertyChanges{}.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.