QML fit screen on all resolutions

denonth

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.

GentooXativa

Try to use:

@anchors.fill: parent@

on your top QML, so you fit the whole screen

denonth

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.

denonth

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?

GentooXativa

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

goetz

Closed the duplicate post.

tobias.hunger

I just merged them...