2017-10-27 9 views
0

残念ながら、QtQuick.Controlsの後のバージョンで多くのドキュメントを見つけることに困っています。QMLのマテリアルスタイルに問題がある

私は以下の問題を抱えています:ボタン80x80を作成しましたが、それは問題ありませんでしたが、マテリアルスタイルで少し実験することにしました。

ボタンの幅のデフォルトスタイルは、正しい高さ80です。マテリアルスタイルを使用しているとき、写真の高さが異なって見えます。オレンジ色の線は80x3ピクセルで、最初はボタンはボタンよりも高く、2番目のボタン(デフォルトスタイルのボタン)はOKです。

なぜこのような動作とそれを修正するのですか?最初のボタンの

enter image description here

コード(二つだけの構成でデフォルトのスタイルで、同じです)。

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

答えて

1

デフォルト寸法は48dpタッチ領域対36dp視覚高さを規定Material design guidelines、からです。したがって、上下に6dpのデフォルトパディングがあります。明らかに、パディングはよりスマートな方法で定義され、次元が何であってもそこに固執する必要はありません。お気軽にreport a bugにお問い合わせください。当面は、 background.anchors.fillボタンを全体の背景にする:

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