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

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

你应该锚定的按钮给对方，既没有固定的父母，如果你希望他们彼此保持一定的距离。例如：

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

这将保持按钮的相对间距。随着他们变得更大或更小，他们的间距尺度匹配。您可以通过其他方式使用这种相对间距的一般概念。例如，不是基于按钮大小上的间距，而是基于封闭项目的大小（例如rightMargin: parent.width/10）或整个屏幕等。