UBports Robot Logo UBports Forum
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Register
    • Login

    Responsive Design, In QT Creator, Real Device

    Scheduled Pinned Locked Moved App Development
    4 Posts 3 Posters 1.0k Views 1 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
      Reply
      • Reply as topic
      Log in to reply
      This topic has been deleted. Only users with topic management privileges can see it.
      • 0 Offline
        007fred50
        last edited by

        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 🙂

        1 Reply Last reply Reply Quote 0
        • dobeyD Offline
          dobey
          last edited by

          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.

          0 1 Reply Last reply Reply Quote 0
          • 0 Offline
            007fred50 @dobey
            last edited by

            @dobey Thanks it works now 🙂

            1 Reply Last reply Reply Quote 0
            • K Offline
              kugiigi
              last edited by

              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 🙂

              1 Reply Last reply Reply Quote 0
              • First post
                Last post