• Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Register
  • Login
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 20 Nov 2020, 17:06

      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
      • D Offline
        dobey
        last edited by 20 Nov 2020, 18:06

        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 20 Nov 2020, 19:10 Reply Quote 0
        • 0 Offline
          007fred50 @dobey
          last edited by 20 Nov 2020, 19:10

          @dobey Thanks it works now 🙂

          1 Reply Last reply Reply Quote 0
          • K Offline
            kugiigi
            last edited by 21 Nov 2020, 09:21

            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
            2 out of 4
            • First post
              2/4
              Last post