android - 在 Qt Quick 应用程序中，Element 在全高清手机上运行的开发应用程序中出现困惑

Question

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

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

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

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

主窗体.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"
            }
        }
    }
}

主.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 文件中将窗口大小定义为设备的屏幕大小。

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

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

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

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

组件.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"
        }
    }
}