QML适合所有分辨率的屏幕

Question

大家好,我的QML代码有问题.我犯了错误,我把一定的大小放到了元素上,现在我把app放到其他设备上时遇到了问题.我会将我的代码粘贴到我有宽度和高度的位置,以便您可以更改它以向我展示如何使用动态调整大小.

我需要说我用qt从qt调用qml文件:

 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();

这是我的QML代码:

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

              }
}

          Rectangle {
              id: rectangle1
              x: 0
              y: 0
              width: 602
              height: 219
              ......

          //dodaj korisnika
          Flipable {
              id: flipable
              x: 6
              y: 32
              width: 173
              height: 179
              .......

                   MouseArea {
                       x: 10
                       y: 9
                       width: 146
                       height: 150
                       anchors.rightMargin: 7
                       anchors.leftMargin: 10
                       anchors.topMargin: 9
                       anchors.bottomMargin: 9
                       hoverEnabled: false
                       anchors.fill: parent
                       ........

          //Brisanje korisnika
          Flipable {
              id: flipable1
              x: 408
              y: 32
              width: 175
              height: 179
              .......

                   MouseArea {
                       x: 7
                       y: 9
                       width: 153
                       height: 151
                       anchors.rightMargin: 8
                       anchors.leftMargin: 7
                       anchors.topMargin: 9
                       anchors.bottomMargin: 8
                       hoverEnabled: false
                       anchors.fill: parent
                       .......

          //promjeni korisnika
          Flipable {
              id: flipable2
              x: 208
              y: 32
              width: 176
              height: 179
             .......

                   MouseArea {
                       x: 7
                       y: 9
                       width: 73
                       height: 76
                       anchors.rightMargin: 7
                       anchors.leftMargin: 7
                       anchors.topMargin: 9
                       anchors.bottomMargin: 9
                       hoverEnabled: false
                       anchors.fill: parent
                       .......

            Text {
                id: text1
                x: 200
                y: 212
                font.pixelSize: 12
                opacity: 0
            }

            Rectangle {
                id: rectangle2
                x: 259
                y: 510
                width: 200
                height: 200
                color: "#ffffff"
                opacity: 0
            }

            TextInput {
                id: text_input1
                x: 331
                y: 233
                width: 80
                height: 20
                font.pixelSize: 12
                opacity: 0
            }

            Text {
                id: text2
                x: 136
                y: 228
                font.pixelSize: 12
                opacity: 0
            }

            Text {
                id: text3
                x: 152
                y: 314
                font.pixelSize: 12
                opacity: 0
            }

            Rectangle {
                id: rectangle3
                x: 256
                y: 293
                width: 200
                height: 200
                color: "#ffffff"
                opacity: 0
            }

            Rectangle {
                id: rectangle4
                x: 339
                y: 787
                width: 200
                height: 200
                color: "#ffffff"
                opacity: 0
            }

            Rectangle {
                id: rectangle5
                x: 270
                y: 456
                width: 200
                height: 200
                color: "#ffffff"
                opacity: 0
            }

            TextInput {
                id: text_input2
                x: 269
                y: 316
                width: 80
                height: 20
                font.pixelSize: 12
                opacity: 0
            }

            TextInput {
                id: text_input3
                x: 269
                y: 401
                width: 80
                height: 20
                font.pixelSize: 12
                opacity: 0
            }

            TextInput {
                id: text_input4
                x: 269
                y: 495
                width: 80
                height: 20
                font.pixelSize: 12
                opacity: 0
            }



            TextInput {
                id: text_input5
                x: 143
                y: 465
                width: 80
                height: 20
                text: qsTr("text")
                font.pixelSize: 12
                opacity: 0
            }



states: [
    State {
        name: "State1"

        PropertyChanges {
            target: listview1
            x: 0
            y: 1049
            width: 574
            height: 967
            visible: false
            anchors.topMargin: 1049
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
        }



        PropertyChanges {
            target: rectangle1
            x: 0
            y: 0
            width: 602
            height: 253
            visible: true
        }

        PropertyChanges {
            target: text1
            x: 187
            y: 253
            width: 247
            height: 71
            color: "#c48d17"
            text: qsTr("Unesite novog korisnika")
            styleColor: "#e61717"
            style: "Raised"
            font.pixelSize: 31
            font.family: "Lucida Handwriting"
            verticalAlignment: "AlignVCenter"
            horizontalAlignment: "AlignHCenter"
            opacity: 1
        }

        PropertyChanges {
            target: rectangle2
            x: 251
            y: 353
            width: 258
            height: 42
            color: "#777e79"
            radius: 15
            smooth: true
            opacity: 1
        }

        PropertyChanges {
            target: text_input1
            x: 251
            y: 360
            width: 258
            height: 29
            font.pixelSize: 17
            font.family: "Lucida Handwriting"
            horizontalAlignment: "AlignHCenter"
            opacity: 1
        }

        PropertyChanges {
            target: text2
            x: 127
            y: 362
            width: 101
            height: 25
            color: "#fd0606"
            text: qsTr("Ime")
            style: "Raised"
            font.family: "Lucida Handwriting"
            font.pixelSize: 22
            verticalAlignment: "AlignVCenter"
            horizontalAlignment: "AlignHCenter"
            opacity: 1
        }

        PropertyChanges {
            target: text3
            x: 119
            y: 519
            color: "#f70606"
            text: qsTr("Prezime")
            style: "Raised"
            font.pixelSize: 20
            font.family: "Lucida Handwriting"
            verticalAlignment: "AlignVCenter"
            horizontalAlignment: "AlignHCenter"
            opacity: 1
        }

        PropertyChanges {
            target: rectangle3
            x: 251
            y: 514
            width: 258
            height: 40
            color: "#777e79"
            radius: 15
            opacity: 1
        }

        PropertyChanges {
            target: rectangle4
            x: 251
            y: 669
            width: 258
            height: 38
            color: "#777e79"
            radius: 15
            opacity: 1
        }

        PropertyChanges {
            target: rectangle5
            x: 251
            y: 823
            width: 258
            height: 36
            color: "#777e79"
            radius: 15
            opacity: 1
        }

        PropertyChanges {
            target: text_input2
            x: 251
            y: 519
            width: 258
            height: 29
            font.family: "Lucida Handwriting"
            font.pixelSize: 17
            horizontalAlignment: "AlignHCenter"
            opacity: 1
        }

        PropertyChanges {
            target: text_input3
            x: 251
            y: 674
            width: 258
            height: 29
            horizontalAlignment: "AlignHCenter"
            font.pixelSize: 17
            font.family: "Lucida Handwriting"
            opacity: 1
        }

        PropertyChanges {
            target: text_input4
            x: 251
            y: 827
            width: 258
            height: 29
            font.family: "Lucida Handwriting"
            font.pixelSize: 17
            horizontalAlignment: "AlignHCenter"
            opacity: 1
        }

        PropertyChanges {
            target: text4
            x: 127
            y: 669
            width: 85
            height: 31
            color: "#f70606"
            text: qsTr("Broj")
            style: "Raised"
            font.family: "Lucida Handwriting"
            font.pixelSize: 20
            horizontalAlignment: "AlignHCenter"
            verticalAlignment: "AlignVCenter"
            opacity: 1
        }


]
 }

我把所有代码都放在宽度和高度上,这样你就可以看到我做错了什么.如果有人可以说我如何让它动态填充,请.

Answer 1

令人遗憾的是,完美无瑕,因为随着屏幕尺寸缩小,您可能实际上希望按钮更大并从屏幕上删除内容以确保用户可以访问和读取所有内容.

但一般的方法实际上是在C++方面设置一个比例因子:

ctxt->setContextProperty("scale", /* put calculated scale factor here */);

然后在QML方面,使用每个人来扩展所有对象:

Rectangle {

    id:window
    width: 602 * scale
    height: 1000 * scale

这样你就可以调整scale变量来改变一切的大小.话虽如此,许多人最终会根据平台大小得到不同的QML文件.

Answer 2

我建议您阅读当前Qt(4.8)文档中的Scalability页面:它正是这个主题.

它推荐这些技术(我在这里引用页面),然后提供更多细节.

• 为每个外形创建单独的顶级布局定义.

• 保持布局较小,让组件相对于其直接父级进行缩放.

• 定义与设备无关的测量,例如dp(设备无关像素),并使用这些测量来缩放组件和布局测量.

• 使用QML的内置布局功能以比例方式定义布局.

更新2014-11-18此视频和视频文章看起来非常有用: 通过Qt和V-Play支持多屏尺寸和屏幕密度

更新2017-01-24上面提到的可扩展性页面的更新Qt 5.8版本.