QML의 머티리얼 스타일에 문제가 있습니다.

Question

불행히도 QtQuick.Controls의 이후 버전에서 많은 문서를 찾는 데 어려움을 겪고 있습니다.

다음과 같은 문제가 있습니다. 80x80 버튼을 만들었지 만 괜찮 았지만 재질 스타일을 조금 실험하기로 결정했습니다.

버튼 폭 기본 ​​스타일을 사용하는 경우 올바른 높이 80입니다. 재료 스타일을 사용하면 높이가 다르게 보입니다. 사진에서 보듯이 주황색 선은 80x3 픽셀이고 첫 번째 선은 버튼은 버튼보다 높지만 두 번째 버튼 (기본 스타일을 가진 버튼)은 괜찮습니다.

왜 이런 동작을 어떻게 고쳐야합니까? 첫 번째 버튼에 대한

코드 (두 번째 단지 구성의 기본 스타일로, 동일).

Button { 
    id: testButton 
    width: 80 
    height: 80 
    z: 1 
    anchors.top: parent.top 
    anchors.left: parent.left 
    //Material.elevation: 3 
    Material.background: "#404244" 
    highlighted: true 

    contentItem: Rectangle { 
     anchors.fill: parent 
     opacity: 0.0 
     Text { 
      text: "test1" 
      color: "white" 
      font.pixelSize: 26 
      anchors.top: parent.top 
      anchors.topMargin: 15 
      anchors.horizontalCenter: parent.horizontalCenter 
     } 
     Text { 
      text: "test2" 
      color: "white" 
      font.pixelSize: 14 
      anchors.bottom: parent.bottom 
      anchors.bottomMargin: 20 
      anchors.horizontalCenter: parent.horizontalCenter 
     } 
    } 
    Rectangle { 
     color: "#ff5e00" 
     width: 4 
     height: 80 
    } 
} 

Answer 1

기본 사이즈 48dp 터치 영역 N 대 36dp 시각 높이를 정의 Material design guidelines에서이다. 따라서 위쪽과 아래쪽에는 기본 여백이 6dp입니다. 분명히, 패딩은 더 똑똑한 방법으로 정의되어야하며, 치수가 무엇이든간에 거기에 달라 붙지 않아야합니다. 부담없이 report a bug. 당분간 예를 들어 배경 전체 버튼을 채우기 위해 background.anchors.fill :

Button { 
    id: button 
    background.anchors.fill: button 
}