QML fit screen on all resolutions



  • Hi all I have problem with my QML code. I made mistake and I went to put certain size to elements and now I have problem when putting app on other devices. I will paste you my code where I have width and height so you can change it to show me how to work with dynamic resizeing.

    I need to say that I am calling qml file from qt with this code:

    @QDeclarativeView *view= new QDeclarativeView;
    ui->setupUi(this);

    setCentralWidget(view);
    
    QDeclarativeContext *ctxt = view->rootContext();
    ctxt->setContextProperty("funkcije",this);
    ctxt->setContextProperty("myModel", QVariant::fromValue(MainWindow::dataList));
    
    view->setSource(QUrl("qrc:/gui.qml"));
    view->setResizeMode(QDeclarativeView::SizeRootObjectToView);
    showFullScreen();@
    

    And here goes my QML code:

    @Rectangle {

    id:window
    width: 602
    height: 1000
    anchors.fill: parent
     radius: 0
     .....
    
    
     ListView {
         id: listview1
         x: 0
         y: 219
        // width: 574
        // height: 967
         width: window.width
         height: window.height
         visible: true
         keyNavigationWraps: false
         boundsBehavior: Flickable.DragAndOvershootBounds
         opacity: 1
         maximumFlickVelocity: 2500
         anchors.leftMargin: 0
         highlightMoveSpeed: 489
         contentWidth: 0
         preferredHighlightEnd: 2
         spacing: 5
         highlightRangeMode: ListView.NoHighlightRange
         snapMode: ListView.SnapToItem
         anchors.bottomMargin: 0
         anchors.rightMargin: 0
         anchors.topMargin: 219
              anchors.fill: parent
              model: myModel
              delegate:Component {
                  //id: contactDelegate
                  Item {
                      id:it;
                      property variant myData: model
                      width: 574; height: 220
                      Column {
                          id:col
                          x: 12
                          y: 0
                          width: 561
                          height: 164
                          smooth: true
                          anchors.rightMargin: 0
                          anchors.bottomMargin: 7
                          anchors.leftMargin: 13
                          anchors.topMargin: 7
                          anchors.fill: parent
                          spacing: 15
                          ......
    
    
              highlight: Rectangle
              {
                  width: 600
                  height: 222
                  color:"black"; radius: 5; opacity: 0.7
    
              focus: true
    
              }
    

    }@

    I have put all the code with width and height so you can see what I have done wrong. And please if someone can say me how to make it dynamically fill.



  • Try to use:

    @anchors.fill: parent@

    on your top QML, so you fit the whole screen



  • I wanted to put all code but I couldn't because it's too big. I know what you mean by that. Problem is that I am porting this app on android, desktop...
    I want to make it scalable to any display.

    I was thinking of using some scale factor, but have no idea how to make it work with my code.



  • Hi all I have problem with my QML code. I made mistake and I went to put certain size to elements and now I have problem when putting app on other devices. I will paste you my code where I have width and height so you can change it to show me how to work with dynamic resizeing.

    I need to say that I am calling qml file from qt with this code:

    @QDeclarativeView *view= new QDeclarativeView;
    ui->setupUi(this);

    setCentralWidget(view);
    
    QDeclarativeContext *ctxt = view->rootContext();
    ctxt->setContextProperty("funkcije",this);
    ctxt->setContextProperty("myModel", QVariant::fromValue(MainWindow::dataList));
    
    view->setSource(QUrl("qrc:/gui.qml"));
    view->setResizeMode(QDeclarativeView::SizeRootObjectToView);
    showFullScreen();@
    

    And here goes my QML code:

    @Rectangle {

    id:window
    width: 602
    height: 1000
    anchors.fill: parent
     radius: 0
     .....
    
    
     ListView {
         id: listview1
         x: 0
         y: 219
        // width: 574
        // height: 967
         width: window.width
         height: window.height
         visible: true
         keyNavigationWraps: false
         boundsBehavior: Flickable.DragAndOvershootBounds
         opacity: 1
         maximumFlickVelocity: 2500
         anchors.leftMargin: 0
         highlightMoveSpeed: 489
         contentWidth: 0
         preferredHighlightEnd: 2
         spacing: 5
         highlightRangeMode: ListView.NoHighlightRange
         snapMode: ListView.SnapToItem
         anchors.bottomMargin: 0
         anchors.rightMargin: 0
         anchors.topMargin: 219
              anchors.fill: parent
              model: myModel
              delegate:Component {
                  //id: contactDelegate
                  Item {
                      id:it;
                      property variant myData: model
                      width: 574; height: 220
                      Column {
                          id:col
                          x: 12
                          y: 0
                          width: 561
                          height: 164
                          smooth: true
                          anchors.rightMargin: 0
                          anchors.bottomMargin: 7
                          anchors.leftMargin: 13
                          anchors.topMargin: 7
                          anchors.fill: parent
                          spacing: 15
                          ......
    
    
              highlight: Rectangle
              {
                  width: 600
                  height: 222
                  color:"black"; radius: 5; opacity: 0.7
    
              focus: true
    
              }
    

    }@
    I have put all the code with width and height so you can see what I have done wrong. And please if someone can say me how to make it dynamically fill.

    This is only a part of code..I have a lot of components. Maybe somone can tell me how to determine some factor that I can use on all object sizes. Something like parent.width()*factor... or something like that?



  • Please dont make duplicated posts: http://qt-project.org/forums/viewthread/15097/



  • Closed the duplicate post.


  • Moderators

    I just merged them...


Log in to reply
 

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