2017-10-15 147 views
0

的图象比语言更好(在红色 ApplicationWindow 黑色矩形):矩形不覆盖整个ApplicationWindow

enter image description here

通知在顶部和右侧的红色未填充区域。右侧的红色可能很难注意到,但它在那里!我想这是我在有彩色填充整个应用程序窗口的矩形。看到代码:

main.qml

import QtQuick 2.9 
import QtQuick.Controls 2.2 
import QtQuick.Layouts 1.3 

ApplicationWindow {  
    id: window 
    visible: true 

    /* Developing mobile apps you don’t need to set width 
     and height, because the ApplicationWindow always grabs 
     the total available space. 
    */ 
    //width: 640 
    //height: 480 

    color: "#ff0000" // Red color 

    /* For some reasons i want this Rectangle here 
    * and it MUST fill the entire window but I notice 
    * a pixel or two line on top and right of the 
    * screen. 
    */ 
    Rectangle { 
     id: page 
     width: window.width; height: window.height 
     //anchors.fill: parent // same output 
     color: "#000000" // Black color 
    } 
} 

的main.cpp

#include <QGuiApplication> 
#include <QQmlApplicationEngine> 

int main(int argc, char *argv[]) 
{ 
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 
    QGuiApplication app(argc, argv); 

    QQmlApplicationEngine engine; 
    engine.load(QUrl(QLatin1String("qrc:/main.qml"))); 
    if (engine.rootObjects().isEmpty()) 
     return -1; 

    return app.exec(); 
} 

我不知道我在这里失踪:(

请分享解决方案/解决此问题的

我也试过,但还是一样的输出。

import QtQuick 2.9 
import QtQuick.Controls 2.2 
import QtQuick.Layouts 1.3 
import QtQuick.Window 2.2 

Window { 
    id: window 
    visible: true 

    height: Screen.height 
    width: Screen.width 

    /* Developing mobile apps you don’t need to set width 
     and height, because the ApplicationWindow always grabs 
     the total available space. 
    */ 
    //width: 640 
    //height: 480 

    color: "#ff0000" // Red color 

    /* For some reasons i want this Rectangle here 
    * and it MUST fill the entire window but I notice 
    * a pixel or two line on top and right of the 
    * screen. 
    */ 
    Rectangle { 
     id: page 
     width: window.width; height: window.height 
     //anchors.fill: parent // same output 
     color: "#000000" // Black color 
    } 
} 

我注意到,在main.cpp中的以下行注释解决了问题,但现在所有的小部件,我想在UI中显示看起来真的很小..!他们在小屏幕设备,而小大屏幕的设备看起来很好。 :(

QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 

这个任何解决方案

编辑:?! 这是已报道HERE因为几乎一年一个如果你正面临着同样的问题一个确认的错误,那么请登录https://bugreports.qt.io/和投票THIS错误。

+0

也许是因为ApplicationWindow后不抓住所有内容?你可以试着用'import QtQuick.Window 2.2'来显式设置宽度和高度:'height:Screen.height'和'width:Screen.width'。 – sk2212

+0

@ sk2212我试过了,但没有奏效。我编辑了我的问题以包含您的建议。 –

+0

@ sk2212我们走吧!我注意到,如果我评论 QCoreApplication :: setAttribute(Qt :: AA_EnableHighDpiScaling); 然后矩形按预期填充整个窗口,但现在UI小部件看起来很小。 –

回答

2

嗯,你可以用你的 “自己” 的DP计算。

main.cpp中

int density = 0; 
float logicalDensity = 0; 
float yDpi = 0; float xDpi = 0; 

#if defined(ANDROID) 
    QAndroidJniObject qtActivity = QAndroidJniObject::callStaticObjectMethod("org/qtproject/qt5/android/QtNative", "activity", "()Landroid/app/Activity;"); 
    QAndroidJniObject resources = qtActivity.callObjectMethod("getResources", "()Landroid/content/res/Resources;"); 
    QAndroidJniObject displayMetrics = resources.callObjectMethod("getDisplayMetrics", "()Landroid/util/DisplayMetrics;"); 
    density = displayMetrics.getField<int>("densityDpi"); 
    logicalDensity = displayMetrics.getField<float>("density"); 
    yDpi = displayMetrics.getField<float>("ydpi"); 
    xDpi = displayMetrics.getField<float>("xdpi"); 
    qDebug() << "Native Android Call =>>> | Logical Density: " << logicalDensity << " | DensityDPI: " << density << " | " << "++++++++++++++++++++++++"; 
#endif 
[...] 
// Set Android pixel data for QML context 
engine.rootContext()->setContextProperty("densityData", density); 
engine.rootContext()->setContextProperty("logicalDensityData",logicalDensity); 
engine.rootContext()->setContextProperty("xDpiData",xDpi); 
engine.rootContext()->setContextProperty("yDpiData",yDpi); 

为了您ApplicationWindow组件补充一点:

main.qml

Component.onCompleted: { 
     Units.pixelDensity = Qt.binding(function() { 
      if (Qt.platform.os === "android") { 
       return densityData/25.4; // densityData is per inch but we need per mm 
      } 
      return Screen.pixelDensity 
     }); 

     function calculateDiagonal() { 
      if (Qt.platform.os === "android") { 
       return Math.sqrt(Math.pow(Screen.width, 2) + 
           Math.pow(Screen.height, 2))/densityData; 
      } 
      return Math.sqrt(Math.pow(Screen.width, 2) + 
          Math.pow(Screen.height, 2))/(Screen.pixelDensity * 25.4); 
     } 

     Units.multiplier = Qt.binding(function() { 
      var diagonal = calculateDiagonal(); 
      Device.diagonal = diagonal; 
      var baseMultiplier = 1; 
      if (diagonal >= 3.5 && diagonal < 5.1) { //iPhone 1st generation to phablet 
       return 0.8; 
      } else if (diagonal >= 5.1 && diagonal < 6.5) { 
       return 1; 
      } else if (diagonal >= 6.5 && diagonal < 15.1) { 
       return baseMultiplier; 
      } else if (diagonal >= 15.1 && diagonal < 29) { 
       return 1.4 * baseMultiplier; 
      } else if (diagonal >= 29 && diagonal < 92) { 
       return 1.4 * baseMultiplier; 
      } else { 
       return 1.4 * baseMultiplier; 
      } 
     }); 

     Device.type = Qt.binding(function() { 
      var diagonal = calculateDiagonal(); 
      Device.diagonal = diagonal; 
      if (diagonal >= 3.5 && diagonal < 5) { //iPhone 1st generation to phablet 
       return Device.phone; 
      } else if (diagonal >= 5 && diagonal < 7.2) { 
       return Device.phone; 
      } else if (diagonal >= 7.2 && diagonal < 15.1) { 
       return Device.tablet; 
      } else if (diagonal >= 15.1 && diagonal < 29) { 
       return Device.desktop; 
      } else if (diagonal >= 29 && diagonal < 92) { 
       return Device.tv; 
      } else { 
       return Device.unknown; 
      } 
     }); 

     // Nasty hack because singletons cannot import the module they were declared in, so 
     // the grid unit cannot be defined in either Device or Units, because it requires both. 
     // See https://bugreports.qt.io/browse/QTBUG-39703 
     Units.gridUnit = Qt.binding(function() { 
      return Device.type === Device.phone || Device.type === Device.phablet 
        ? Units.dp(48) : Device.type == Device.tablet ? Units.dp(56) : Units.dp(64) 
     }); 
} 

Units.qml

Object { 
    id: units 

    /*! 
     \internal 
     This holds the pixel density used for converting millimeters into pixels. This is the exact 
     value from \l Screen:pixelDensity, but that property only works from within a \l Window type, 
     so this is hardcoded here and we update it from within \l ApplicationWindow 
    */ 
    property real pixelDensity: 4.46 
    property real multiplier: 1.4 //default multiplier, but can be changed by user 

    /*! 
     This is the standard function to use for accessing device-independent pixels. You should use 
     this anywhere you need to refer to distances on the screen. 
    */ 
    function dp(number) { 
     return Math.round(number*((pixelDensity*25.4)/160)*multiplier); 
    } 

    function gu(number) { 
     return number * gridUnit 
    } 

    property int gridUnit: dp(64) 
} 

设备。QML

import QtQuick 2.0 

pragma Singleton 

/*! 
    \qmltype Device 
    \inqmlmodule Material 0.1 

    \brief A singleton that provides information about the current device. 
*/ 
Object { 
    id: device 

    //some kind of enum, by screen size 
    property int type: desktop 
    property int diagonal: -1 

    readonly property int phone: 0 
    readonly property int phablet: 1 
    readonly property int tablet: 2 
    readonly property int desktop: 3 
    readonly property int tv: 4 
    readonly property int unknown: 5 //it's either bigger than tv or smaller than phone 

    readonly property string name: { 
     switch (type) { 
      case 0: 
       return "phone"; 
      case 1: 
       return "phablet"; 
      case 2: 
       return "tablet"; 
      case 3: 
       return "computer"; 
      case 4: 
       return "TV"; 
      case 5: 
       return "device"; 
     } 
    } 

    readonly property string iconName: { 
     switch (type) { 
      case 0: 
       return "hardware/smartphone"; 
      case 1: 
       return "hardware/tablet"; 
      case 2: 
       return "hardware/tablet"; 
      case 3: 
       return "hardware/desktop_windows"; 
      case 4: 
       return "hardware/tv"; 
      case 5: 
       return "hardware/computer"; 
     } 
    } 

    readonly property bool isMobile: type == phone || type == phablet || type == tablet 
} 

单位和设备组件都是从这里拍摄QML材料项目“https://github.com/papyros/qml-material

加入这个你应该能够每个像素声明包装成width: Units.dp(30)

+0

这是一个严重的错误!它正在影响具有特定屏幕分辨率的所有平台。您永远不知道最终用户将使用屏幕分辨率,因此它可能会影响您的QtQuick应用程序!这个错误已经报道[HERE](https://bugreports.qt.io/browse/QTBUG-53247)近一年了! 。 如果您遇到同样的问题,请登录到https://bugreports.qt.io/并投票[THIS](https://bugreports.qt.io/browse/QTBUG-53247)错误。 注意:这不仅仅是矩形绘制不正确,实际上,所有的UI元素都会受到这个bug的影响! –

+0

@ShujaatAliKhan请不要“火焰”这样。只是尝试提供解决方法。 – sk2212