Android 在QtQuick应用程序中，在全高清手机上运行的已开发应用程序中，元素混乱

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

我在两款不同的android手机上测试了我的应用程序，一款是三星Galaxy Grand Neo（显示分辨率480x800），另一款是三星Galaxy S4（显示分辨率1080x1920）。如下图所示，其中一张很好看，一张是三星galaxy grand neo的快照，第二张是凌乱的，一张是三星galaxy S4的快照

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

请帮助设置半高清和全高清手机的元件

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

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
    }
}

如图所示，在semiHD中看起来不错，但在fullHD中看起来很凌乱。此问题仅与QML文件有关，因此我只共享QML代码，如果需要其他数据，请告诉我。

请尝试以下方法：

1-在

main.qml

文件中，将窗口大小定义为设备的屏幕大小

2-创建一个

qml

文件，在本例中称为

component.qml

，其中包含

项

3-在

component.qml

中生成所需的代码。在本例中，我修改了代码，移动了要首先创建的代码末尾的矩形，并将元素放入其中

4-在

main.qml

中调用

component.qml

，并将其大小定义为父级大小

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

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
    }
}

component.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"
        }
    }
}

试着这样做：

1-在

main.qml

文件中，将窗口大小定义为设备的屏幕大小

2-创建一个

qml

文件，在本例中称为

component.qml

，其中包含

项

3-在

component.qml

中生成所需的代码。在本例中，我修改了代码，移动了要首先创建的代码末尾的矩形，并将元素放入其中

4-在

main.qml

中调用

component.qml

，并将其大小定义为父级大小

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

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
    }
}

component.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"
        }
    }
}

---

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

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我们必须根据我们的要求设置此项

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

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我们必须根据我们的要求设置此项

请编辑问题并插入设备的完整分辨率屏幕截图。使用stackoverflow内置的图像托管。请编辑问题并插入设备的全分辨率屏幕截图。使用stackoverflow内置的图像托管。代码中的一些解释肯定会改进此答案。请再次检查我的问题，我添加了一些解释并尝试您的建议，但我仍然面临与不同显示分辨率相关的相同问题。我没有一台全高清分辨率的设备要测试，所以我在Android模拟器上测试了它，效果很好。代码中的一些解释肯定会改善这个答案。请再次检查我的问题，我添加了一些解释并尝试了你的建议，但我仍然面临与不同显示分辨率相关的相同问题。我没有一台全高清分辨率的设备需要测试，所以我在Android模拟器上测试了它，效果很好。