Responsive Design, In QT Creator, Real Device

007fred50

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

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

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)

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

dobey

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.

007fred50

@dobey Thanks it works now

kugiigi

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