在 Qt Quick 应用程序中，全高清 phone 上开发的应用程序运行中的元素混乱

Question

我在 Qt Quick 上开发了应用程序，我根据半高清屏幕安排了所有元素的大小和 space，在每个半高清屏幕上看起来都不错 phone，但是当我尝试运行这个全高清应用程序 phone，所有元素都乱七八糟，看起来很乱。

我在两个不同的 android phone 上测试了我的应用程序，一个是 Samsung Galaxy Grand Neo（显示分辨率 480x800），另一个是 Samsung Galaxy S4（显示分辨率 1080x1920 ).如下图，一张好看，一张是三星galaxy grand neo的快照，第二张是乱七八糟的，一张是三星galaxy S4的快照。

简而言之，我的主要问题与显示分辨率有关，当它更改时我的应用程序看起来很乱。

请帮助设置半高清和全高清的元素phone。

MainForm.ui.qml:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

Item {
    id: item1
    width:640 //1080
    height:480 //1920

    property alias button3: button3
    property alias button2: button2
    property alias button1: button1

    Button {
        id: button2
        width: parent.width/4
        height: parent.height/12
        text: qsTr("Press Me 2")
        anchors.left: button1.right
        anchors.leftMargin: 6
        anchors.top: image1.bottom
        anchors.topMargin: 108
    }

    Button {
        id: button3
        width: parent.width/4
        height: parent.height/12
        text: qsTr("Press Me 3")
        anchors.left: button2.right
        anchors.leftMargin: 6
        anchors.top: image1.bottom
        anchors.topMargin: 108
    }

    Button {
        id: button1
        width: parent.width/4
        height: parent.height/12
        text: qsTr("Press Me 1")
        anchors.left: parent.left
        anchors.leftMargin: 48
        anchors.top: image1.bottom
        anchors.topMargin: 108
    }

    Text {
        id: text1
        width: parent.width/3.2
        height: parent.height/12.30
        color: "#ffffff"
        text: _myClass.response
        anchors.top: textEdit2.bottom
        anchors.topMargin: 6
        anchors.left: image1.right
        anchors.leftMargin: 162
        font.italic: true
        font.bold: true
        textFormat: Text.RichText
        verticalAlignment: Text.AlignTop
        style: Text.Normal
        font.pointSize: parent.height/33
    }

    Text {
        id: text2
        width: parent.width/6.5
        height: parent.height/12.30
        color: "#ffffff"
        text: qsTr("Device Name :")
        anchors.top: text6.bottom
        anchors.topMargin: 6
        anchors.left: image1.right
        anchors.leftMargin: 2
        font.bold: true
        verticalAlignment: Text.AlignTop
        horizontalAlignment: Text.AlignLeft
        font.pixelSize: parent.height/34.30
    }

    Text {
        id: text3
        width: parent.width/6.5
        height: parent.height/12.30
        color: "#ffffff"
        text: qsTr("MacAddress :")
        anchors.top: text2.bottom
        anchors.topMargin: 6
        anchors.left: image1.right
        anchors.leftMargin: 2
        font.bold: true
        verticalAlignment: Text.AlignTop
        horizontalAlignment: Text.AlignLeft
        font.pixelSize: parent.height/34.30
    }

    Text {
        id: text4
        width: parent.width/3.2
        height: parent.height/12.30
        color: "#ffffff"
        text: _myClass.response2
        anchors.top: text1.bottom
        anchors.topMargin: 6
        anchors.left: image1.right
        anchors.leftMargin: 162
        font.italic: true
        font.bold: true
        verticalAlignment: Text.AlignTop
        font.pixelSize: parent.height/33
    }

    Text {
        id: text5
        width: parent.width/6.5
        height: parent.height/12.30
        color: "#ffffff"
        text: qsTr("Username :")
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.left: image1.right
        anchors.leftMargin: 6
        font.bold: true
        verticalAlignment: Text.AlignTop
        font.pixelSize: parent.height/34.30
    }

    Text {
        id: text6
        width: parent.width/6.5
        height: parent.height/12.30
        color: "#fbfbfb"
        text: qsTr("Password :")
        verticalAlignment: Text.AlignTop
        anchors.top: text5.bottom
        anchors.topMargin: 6
        anchors.left: image1.right
        anchors.leftMargin: 6
        font.bold: true
        font.pixelSize: parent.height/34.30
    }

    TextEdit {
        id: textEdit1
        width: parent.width/3.2
        height: parent.height/12.30
        color: "#ffffff"
        text: qsTr("Text Edit")
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.left: image1.right
        anchors.leftMargin: 162
        font.pixelSize: parent.height/34.30
    }

    TextEdit {
        id: textEdit2
        width: parent.width/3.2
        height: parent.height/12.30
        color: "#ffffff"
        text: qsTr("Text Edit")
        anchors.top: textEdit1.bottom
        anchors.topMargin: 6
        anchors.left: image1.right
        anchors.leftMargin: 162
        font.underline: false
        font.pixelSize: parent.height/34.30
    }

    Image {
        id: image1
        width: parent.width/5.5
        height: parent.height/6.2
        sourceSize.height: 0
        sourceSize.width: 0
        anchors.top: parent.top
        anchors.topMargin: 50
        anchors.left: parent.left
        anchors.leftMargin: 13
        source: "veejansh.png"
    }

    Rectangle {
        id: rectangle1
        x: 0
        y: 0
        width: parent.width
        height: parent.height
        z: -1
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#000000"
            }

            GradientStop {
                position: 1
                color: "#00239b"
            }
        }
    }
}

main.qml

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtQml 2.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: Screen.width //640//1920
    height: Screen.height //480//1080
    visible: true

    menuBar: MenuBar {
        Menu {
            title: qsTr("&File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: messageDialog.show(qsTr("Open action triggered"));
            }
            MenuItem {
                text: qsTr("E&xit")
                onTriggered: Qt.quit();
            }
        }
    }

    MainForm {
        //width: parent.width
        //height: parent.height

        anchors.fill: parent

        function testing1(){
            _myClass.test1()
            //messageDialog.show(qsTr());
        }

        function testing2(){
            _myClass.test2()
            //messageDialog.show(qsTr("Hello!!!"));
        }

        button1.onClicked: testing1()
        button2.onClicked: testing2()
        button3.onClicked: messageDialog.show(qsTr("Button 3 pressed"))
    }

    MessageDialog {
        id: messageDialog
        title: qsTr("May I have your attention, please?")

        function show(caption) {
            messageDialog.text = caption;
            messageDialog.open();
        }
    }
}

如图像所示，半高清看起来不错，但全高清看起来很乱。此问题只与QML文件有关，所以我只分享qml代码，如果有其他数据需求，请告诉我。

Answer 1

试试这个方法：

1 - 在 main.qml 文件中将 window 尺寸定义为设备的屏幕尺寸。

2 - 创建一个 qml 文件，在本例中称为 Componente.qml，其中包含 Item。

3 - 在 Componente.qml 中编写您想要的代码。在这种情况下，我修改了代码，移动了要首先创建的代码末尾的矩形，然后将元素放入其中。

4 - 在 main.qml 中调用 Componente.qml 并将其大小定义为父大小。

main.qml

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true

    width: Screen.width
    height: Screen.height

    Componente {
        width: parent.width
        height: parent.height
    }
}

Componente.qml

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1

Item {
    id: item1

    property alias button3: button3
    property alias button2: button2
    property alias button1: button1

    Rectangle {
        id: rectangle1
        anchors.fill: parent
        gradient: Gradient {
            GradientStop {
                position: 0
                color: "#000000"
            }

            GradientStop {
                position: 1
                color: "#00239b"
            }
        }


        Button {
            id: button2
            width: parent.width/4
            height: parent.height/12
            text: qsTr("Press Me 2")
            anchors.left: button1.right
            anchors.leftMargin: 6
            anchors.top: image1.bottom
            anchors.topMargin: 108
        }

        Button {
            id: button3
            width: parent.width/4
            height: parent.height/12
            text: qsTr("Press Me 3")
            anchors.left: button2.right
            anchors.leftMargin: 6
            anchors.top: image1.bottom
            anchors.topMargin: 108
        }

        Button {
            id: button1
            width: parent.width/4
            height: parent.height/12
            text: qsTr("Press Me 1")
            anchors.left: parent.left
            anchors.leftMargin: 48
            anchors.top: image1.bottom
            anchors.topMargin: 108
        }

        Text {
            id: text1
            width: parent.width/3.2
            height: parent.height/12.30
            color: "#ffffff"
            text: "Texto"
            anchors.top: textEdit2.bottom
            anchors.topMargin: 6
            anchors.left: image1.right
            anchors.leftMargin: 162
            font.italic: true
            font.bold: true
            textFormat: Text.RichText
            verticalAlignment: Text.AlignTop
            style: Text.Normal
            font.pointSize: parent.height/33
        }

        Text {
            id: text2
            width: parent.width/6.5
            height: parent.height/12.30
            color: "#ffffff"
            text: qsTr("Device Name :")
            anchors.top: text6.bottom
            anchors.topMargin: 6
            anchors.left: image1.right
            anchors.leftMargin: 2
            font.bold: true
            verticalAlignment: Text.AlignTop
            horizontalAlignment: Text.AlignLeft
            font.pixelSize: parent.height/34.30
        }

        Text {
            id: text3
            width: parent.width/6.5
            height: parent.height/12.30
            color: "#ffffff"
            text: qsTr("MacAddress :")
            anchors.top: text2.bottom
            anchors.topMargin: 6
            anchors.left: image1.right
            anchors.leftMargin: 2
            font.bold: true
            verticalAlignment: Text.AlignTop
            horizontalAlignment: Text.AlignLeft
            font.pixelSize: parent.height/34.30
        }

        Text {
            id: text4
            width: parent.width/3.2
            height: parent.height/12.30
            color: "#ffffff"
            text: "Texto"
            anchors.top: text1.bottom
            anchors.topMargin: 6
            anchors.left: image1.right
            anchors.leftMargin: 162
            font.italic: true
            font.bold: true
            verticalAlignment: Text.AlignTop
            font.pixelSize: parent.height/33
        }

        Text {
            id: text5
            width: parent.width/6.5
            height: parent.height/12.30
            color: "#ffffff"
            text: qsTr("Username :")
            anchors.top: parent.top
            anchors.topMargin: 50
            anchors.left: image1.right
            anchors.leftMargin: 6
            font.bold: true
            verticalAlignment: Text.AlignTop
            font.pixelSize: parent.height/34.30
        }

        Text {
            id: text6
            width: parent.width/6.5
            height: parent.height/12.30
            color: "#fbfbfb"
            text: qsTr("Password :")
            verticalAlignment: Text.AlignTop
            anchors.top: text5.bottom
            anchors.topMargin: 6
            anchors.left: image1.right
            anchors.leftMargin: 6
            font.bold: true
            font.pixelSize: parent.height/34.30
        }

        TextEdit {
            id: textEdit1
            width: parent.width/3.2
            height: parent.height/12.30
            color: "#ffffff"
            text: qsTr("Text Edit")
            anchors.top: parent.top
            anchors.topMargin: 50
            anchors.left: image1.right
            anchors.leftMargin: 162
            font.pixelSize: parent.height/34.30
        }

        TextEdit {
            id: textEdit2
            width: parent.width/3.2
            height: parent.height/12.30
            color: "#ffffff"
            text: qsTr("Text Edit")
            anchors.top: textEdit1.bottom
            anchors.topMargin: 6
            anchors.left: image1.right
            anchors.leftMargin: 162
            font.underline: false
            font.pixelSize: parent.height/34.30
        }

        Image {
            id: image1
            width: parent.width/5.5
            height: parent.height/6.2
            sourceSize.height: 0
            sourceSize.width: 0
            anchors.top: parent.top
            anchors.topMargin: 50
            anchors.left: parent.left
            anchors.leftMargin: 13
            source: "veejansh.png"
        }
    }
}

Answer 2

问题很小，我还必须设置边距，我必须根据父级的高度和宽度设置左边距和上边距。我更改了我的代码，如下所示。

Button {
        id: button1
        width: parent.width/4
        height: parent.height/12
        text: qsTr("Press Me 1")
        anchors.left: parent.left
        anchors.leftMargin: 48
        anchors.top: image1.bottom
        anchors.topMargin: parent.height/5.92 //108
    }

    Text {
        id: text1
        width: parent.width/3.2
        height: parent.height/12.30
        color: "#ffffff"
        text: _myClass.response
        anchors.top: textEdit2.bottom
        anchors.topMargin: 6
        anchors.left: image1.right
        anchors.leftMargin: parent.width/2.96 //162
        font.italic: true
        font.bold: true
        textFormat: Text.RichText
        verticalAlignment: Text.AlignTop
        style: Text.Normal
        font.pixelSize: parent.height/33
    }

anchors.leftMargin: parent.width/2.96 我们必须根据我们的要求设置这个东西.

在 Qt Quick 应用程序中，全高清 phone 上开发的应用程序运行中的元素混乱

In Qt Quick application, Element mess up in developed application run on full HD phone

c++

qt

android

screen-resolution

qml

在 Qt Quick 应用程序中，全高清 phone 上开发的应用程序 运行 中的元素混乱

In Qt Quick application, Element mess up in developed application run on full HD phone

c++

qt

android

screen-resolution

qml

在 Qt Quick 应用程序中，全高清 phone 上开发的应用程序运行中的元素混乱