屏幕較大，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）或整個屏幕等。