如何在调整窗口大小后保持相同形式的Qt Quick应用程序

时间:2017-06-21 23:24:31

标签: qt qml qtquick2

问题是,在低分辨率Android设备上构建应用程序后,屏幕看起来并不兼容。某些应用程序页面没有足够的空间。例如,文本输入溢出屏幕,一些页面具有半视图图像。我希望应用程序必须保持其形式,即使我将其调整到最小屏幕。 Qt软件中有一些例子,如Gallery样本,可以扩展。但我找不到我错过的东西。

以下是我申请的一部分:

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0
import QtQuick.Controls.Universal 2.0
import Fluid.Controls 1.0

Flickable {
    id:optionsPage
    anchors {
        left: parent.left
        top: parent.top
        bottom: parent.bottom
        margins: 5
    }
    width: parent.width
    clip: true
    contentHeight: Math.max(optionsColumn.implicitHeight, height)
    ScrollBar.vertical: ScrollBar {}
    z: 2
    Material.background: "white"
    Material.elevation: 1
    Universal.background: Universal.accent
Column{
    anchors.horizontalCenter: parent.horizontalCenter
    id:optionsColumn
    spacing: 40
    anchors.fill : parent
    anchors.topMargin    : 15
    anchors.bottomMargin : 15
    anchors.leftMargin :15
    anchors.rightMargin  : 15
TextField {
    anchors.horizontalCenter: parent.horizontalCenter
    id:abg_to3
    anchors.margins: 1
    Text {
        color: "#002aff"
        anchors.right: abg_to3.left
        text: "(AB): "
        font.pointSize: 15
    }
}
TextField {
    anchors.horizontalCenter: parent.horizontalCenter
    id:beta_to3
    anchors.margins: 1

    Text {
        color: "#002aff"
        anchors.right: beta_to3.left
        text: "Beta: "
        font.pointSize: 15
    }
}
Row{
    anchors.horizontalCenter: parent.horizontalCenter
    spacing:50
    Button {
        id:hesapla_to3
        text: "Calculate"
    }
    Button {
        id:sil_to3
        text: "Delete"
    }
}
Column{
    anchors.horizontalCenter: parent.horizontalCenter
    spacing: 50
    TextField {
        anchors.horizontalCenter: parent.horizontalCenter
        id:bcg_to3
        anchors.margins: 1

    Text {
        color: "#002aff"
        anchors.right: bcg_to3.left
        text: "(BC): "
        font.pointSize: 15
    }
}
    Rectangle{
        id:reco
        height:geri.height
        width:geri.width
        anchors.horizontalCenter: parent.horizontalCenter
        Image {
            id:geri
            source:"../images/third.png"
        }
      }
  }
}
}

这是正常的应用程序。 enter image description here

这是在调整窗口大小之后。

enter image description here

1 个答案:

答案 0 :(得分:0)

对于图像,您应指定与父级或设备大小成比例的宽度和高度,并使用Image.PreserveAspectFit作为fillMode。 对于字体,我认为你应该使用一个因子比率,这取决于屏幕的分辨率,这里有一个例子:http://doc.qt.io/qt-5/scalability.html#calculating-scaling-ratio 边距也可能存在问题,再次使用比率可能是解决方案。 更一般地说如果你想要一个完全可扩展的应用程序,有一些规则可以帮助你,你可以在这里找到它们:http://doc.qt.io/qt-5/scalability.html 希望它有所帮助。