Responsive Design, In QT Creator, Real Device



  • Hello,

    I try to create a simple app to Ubuntu Touch
    But then i try to create a app, (i can't center Buttons), but Text works fine

    here is photo 1
    qtcreator1.png
    in photo 1 i added layout (Anchors) in all 4.
    all Text are the same as the photo 1

    But then i add a Button to the screen
    qtcreator2_with_button.png
    added layout (Anchors) in all 4
    In my emulator looks fine

    Then i testet on my Fairphone 3 plus. looks like this
    big button_resize.jpg
    You can try to remove the button, and all Text are center correct

    without the Button on my device (Fairphone 3 plus)
    without button center_resize.jpg

    My Qustion is why does the Button get so crazy on my device?

    Here is my code

    MainView {
        id: root
        objectName: 'mainView'
        applicationName: 'clickgame1.007fred'
        automaticOrientation: true
    
    
        property var counts: 0
        property var countsdown: 10
        property var stopgame: 0
        width: 360
        height: 600
    
        function pressMeBtn(){
            console.log((units.gu(75) / 5))
    
            if(stopgame == 0){
                innerTimer.start()
                stopgame = 1
            }else{
                if(countsdown == 0){
                    console.log("stoped")
                }
                if(countsdown > 0){
                    counts += 1
                    countslabel.text = counts.toString()
                }
            }
        }
    
        Timer {
            id: innerTimer
            repeat: true
            interval: 1000
            onTriggered: {
                countsdown -= 1
                if(countsdown == 0){
                    innerTimer.stop()
                }
                timercount.text = countsdown.toString()
            }
        }
    
        Label{
            id: countslabel
            text: "0"
            anchors.right: parent.right
            anchors.rightMargin: 8
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 343
            anchors.top: parent.top
            anchors.topMargin: 198
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 40
        }
    
        Label {
            id: timercount
            width: 352
            text: "10"
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.left: parent.left
            anchors.leftMargin: 4
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 132
            anchors.top: parent.top
            anchors.topMargin: 409
            font.pointSize: 40
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    
        Label {
            id: title
            text: "Click Game !"
            anchors.left: parent.left
            anchors.leftMargin: 12
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 533
            anchors.right: parent.right
            anchors.rightMargin: 8
            anchors.top: parent.top
            anchors.topMargin: 8
            font.pointSize: 40
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    
        Label {
            id: title2
            text: "count down timer !"
            anchors.left: parent.left
            anchors.leftMargin: 4
            anchors.right: parent.right
            anchors.rightMargin: 4
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 197
            anchors.top: parent.top
            anchors.topMargin: 344
            font.pointSize: 30
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    
        Button{
            id: btn1
            text: "Press ME"
            anchors.top: parent.top
            anchors.topMargin: 284
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 284
            anchors.left: parent.left
            anchors.leftMargin: 8
            anchors.right: parent.right
            anchors.rightMargin: 8
            onClicked: pressMeBtn()
        }
    }
    

    All what i wont is make a Button to Center.
    You can remove the Button and it looks right on devices

    Thanks for your time 🙂



  • The problem is you are anchoring all the widgets too the parent, and Button is the last one defined, so it's simply on top of everything, but it is exactly how your code describes it should be. I don't know why it wouldn't render the same way in QtCreator though, other than the fact that traditionally Ubuntu.Components stuff doesn't work properly in the designer there.

    Instead you probably want to use a ColumnLayout from QtQuick.Layouts and use the Layout attached properties instead, to define whether the components should fill the width/height or not.



  • @dobey Thanks it works now 🙂



  • I never used graphical designer when developing QML well mainly because it didn't work on UITK like Rodney say but I got used to it and I guess it's better not to so that you can really learn the language and adjust your layout and make them responsive like what you want 🙂


Log in to reply