QML 适合所有分辨率的屏幕答案

【问题标题】：QML fit screen on all resolutionsQML 适合所有分辨率的屏幕
【发布时间】：2012-03-03 23:38:57
【问题描述】：

大家好，我的 QML 代码有问题。我犯了错误，我给元素设置了一定的大小，现在将应用程序放在其他设备上时出现问题。我会将我的代码粘贴到我有宽度和高度的地方，以便您可以更改它以向我展示如何使用动态调整大小。

我需要说我是用这个代码从 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
        }


]
 }

我已将所有代码的宽度和高度放在一起，这样您就可以看到我做错了什么。如果有人能告诉我如何让它动态填充，请告诉我。

【问题讨论】：

标签： qt screen resolution qml

【解决方案1】：

不幸的是，要完美是很棘手的，因为随着屏幕尺寸的缩小，您可能实际上希望按钮更大，并从屏幕上删除内容以确保用户可以访问和阅读一切正常。

但是一般的做法其实是在C++端设置一个比例因子：

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

然后在 QML 方面，使用每个人来缩放所有对象：

Rectangle {

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

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

【讨论】：

你能给我举个例子吗，你的意思是如何计算？所以我在 C++ 中确定了我的大小，然后我测量了比例？你对公式有一些想法吗？
一般来说，它会涉及一些#ifdefs 来确定它是什么类型的设备。例如，如果它是一个小型设备，那么您将比例因子设置为一个较小的值，等等。我一直想写一篇关于我在 Qt Widgets 与 QML 之间进行选择的博客文章。它也对你有用......我会在这周尝试完成它并在此处发布链接。
您可以直接更改父 qml 文件的 'scale' 属性，从而自动缩放所有后续子 qml 文件，而不是做这么多。（假设画布以相同的宽度和高度比例变化）

【解决方案2】：

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

它推荐了这些技术（我在这里引用了页面），然后提供了更多细节。

为每个外形尺寸创建单独的顶级布局定义。
保持布局小，让组件相对于它们的缩放直系父母。
定义独立于设备的测量，例如 dp（设备独立像素），并使用这些来缩放组件和布局测量。
使用内置布局按比例定义布局 QML 的特点。

2014-11-18 更新 这篇视频文章看起来确实非常有用： Supporting Multiple Screen Sizes & Screen Densities with Qt and V-Play

2017-01-24 更新上面提到的可扩展性页面有一个updated Qt 5.8 version。

【讨论】：

【解决方案3】：

更改设备，实际上是在更改屏幕像素密度。如果您的设备显示质量较低，则每英寸或每厘米的像素数会低于显示质量高的设备。

了解这一点后，我们可以轻松设计一种方法来根据像素密度缩放我们的内容。例如，在我的情况下，我有一台使用 Qt creator 的笔记本电脑。它的像素密度为 4。但我的 android 手机质量高，密度为 16（是笔记本电脑的 4 倍）。这意味着如果一个项目在我的笔记本电脑上显示时具有宽度 'X' 和高度 'Y' ，在我的手机上它将显示为宽度 'X'/4 和高度 'Y'/4 。因此，我必须将高度和宽度缩放 4。

现在，如何实现呢？在 QML 中，我们在对象 Screen 下有一个属性“pixelDensity”，它将为您提供运行应用程序的屏幕的像素密度。将其除以您测试应用程序的屏幕密度将为您提供比例因子。所以现在您无需担心其他设备，您只需找到您当前正在使用的屏幕的像素密度。

以下代码非常适合我。

property int default_pix_density: 4  //pixel density of my current screen
property int scale_factor: Screen.pixelDensity/default_pix_density
Rectangle
{
    width: 50*scale_factor
    height: 20*scale_factor
}

【讨论】：

那么，对于 Samsung Galaxy Tab 3 10.1，default_pix_density 应该是 149 ppi pixel density 规范？
@KernelPanic 你可以通过'Screen.pixelDensity'找到屏幕密度。仅当您用于开发/测试的设备与您要部署应用程序的设备具有不同的像素密度时，此方法才有用。 'default_pix_density' 是您正在测试/开发的设备的像素密度。