Question

目前我有一个qml应用程序，每个图像都有特定的边距集。它们看起来完全适合屏幕的特定宽度。但是，如果屏幕放大，它将全部搞砸并散落。因为边距设置为特定数字。什么是qml中这个问题的更好的解决方案？我试图设置position: relative，但这不起作用。

例如：

我们有两个按钮

Button1 {
        anchors {
            right: parent.right
            rightMargin: 175
            bottom: parent.bottom
            bottomMargin: 95
        }
    }


Button2 {
        iconNext: true
        anchors {
            right: parent.right
            rightMargin: 53
            bottom: parent.bottom
            bottomMargin: 95
        }
    }

这两个按钮在我的屏幕上看起来很棒。在更大的屏幕上可怕，因为他们彼此分开。

什么是解决方案

Answer 1

如果您希望它们彼此保持一定的距离，您应该将按钮彼此锚定，而不是两者都固定在父按钮上。例如：

<input id="stop" type="button" value="Submit Answers" onclick="stopClock()"/>

这将使两个按钮之间的间距保持一致（以像素为单位），即使按钮本身变大或变小。

然后，如果您希望间距是相对的（即，相对于按钮的大小或屏幕的大小）而不是以像素为单位固定，则可以执行更多类似的操作：

Button1 {
    anchors {
        right: button2.left
        rightMargin: 50
        bottom: button2.bottom
    }
}


Button2 {
    id: button2
    iconNext: true
    anchors {
        right: parent.right
        rightMargin: 53
        bottom: parent.bottom
        bottomMargin: 95
    }
}

这将保持按钮的相对间距。当它们变大或变小时，它们的间距会相互匹配。您可以通过其他方式使用相对间距的这种一般概念。例如，不是基于按钮大小的间距，而是基于封闭项目的大小（例如Button1 { id: button1 anchors { right: button2.left rightMargin: width bottom: button2.bottom } } Button2 { id: button2 iconNext: true anchors { right: parent.right rightMargin: width bottom: parent.bottom bottomMargin: height*2 } }），或整个屏幕等。

屏幕较大，固定边距为QML按钮和图像

1 个答案: