如何使图像填充qml控件按钮

4 回答

• 7

  如果你不介意使用私有API，那就是padding属性：

  import QtQuick 2.4
  import QtQuick.Controls 1.2
  import QtQuick.Controls.Styles 1.2
  
  Item {
      width: 200
      height: 200
  
      Button {
          iconSource: "http://www.sfweekly.com/imager/the-exhikittenist-cattown-cat-pics-and-m/b/square/3069319/58c8/WikiCat.jpg"
          anchors.centerIn: parent
          style: ButtonStyle {
              padding {
                  left: 0
                  right: 0
                  top: 0
                  bottom: 0
              }
          }
  
          Rectangle {
              anchors.fill: parent
              color: "black"
              opacity: parent.pressed ? 0.5 : 0
          }
      }
  }
  

  看 ButtonStyle.qml ：

  /*! The padding between the background and the label components. */
  padding {
      top: 4
      left: 4
      right:  control.menu !== null ? Math.round(TextSingleton.implicitHeight * 0.5) : 4
      bottom: 4
  }
  

  回复于 2024-05-04T09:14:31+08:00
• 0

  这实际上取决于你想要达到的目标 . IMO，这里有三个解决方案：

  1）如果您需要将图像作为按钮，只需使用 Image 并填充 MouseArea ：

  Image {
      source: "http://images5.fanpop.com/image/photos/27500000/Cool-beans-azkaban-27533920-200-200.gif"
  
      MouseArea {
          anchors.fill: parent
          onClicked: {
             console.info("image clicked!")
          }
      }
  }
  

  2）如果要使用带图像的按钮，请重新定义 style 的 label 属性，如下所示：

  Button{
      width: 200
      height: 200
  
      style: ButtonStyle {
  
          label: Image {
              source: "http://images5.fanpop.com/image/photos/27500000/Cool-beans-azkaban-27533920-200-200.gif"
              fillMode: Image.PreserveAspectFit  // ensure it fits
          }
      }
  }
  

  这样，您可以在 Button 中放置任何图像，并且边框的小填充允许您查看按钮被单击/选中的时间 . 请注意，通过使用 ButtonStyle ，您将失去平台风格 .

  3）如果你真的想使用 Button 并让它看起来像是一个 Image 遵循米奇提出的智能方法 .

  回复于 2024-05-04T09:14:31+08:00
• 2

  如果您想要图像将填充按钮：

  Button{
      Image {
          anchors.fill: parent
          source: "images/1x1.png"
          fillMode: Image.Tile
      }
      checkable: true
      checked: true
      Layout.minimumWidth: 100
      Layout.minimumHeight: 100
  }
  

  或者其他 fillMode ，如你所知

  回复于 2024-05-04T09:14:31+08:00
• 2

  我在这里说过同样的问题 . 非常感谢不同的解决方案 . 但@folibis建议的那个最终给了一个平台（在Windows 10中是平的）按钮和我的svg图像 . 但它确实可以很好地工作 . 原因有三：1 . 图像与按钮紧密贴合 . 为了保持图标，我使用了FLAT组合框 . 2.当我们在按钮上寻找简单的标志性图像时，fillmode tile是不合适的 . 我已将其更改为PreserveASpectFit . 3.可检查和检查的属性不适用于普通操作按钮 . 但问题的代码示例肯定有这些 . 请在这里查看我的代码 . 可能有用 . 再次感谢@Folibis

  Button {
              id: nextButton
              GroupBox {
                  flat: true
                  anchors.fill: parent
                  Image {
                      anchors.fill: parent
                      source: "qrc:/next.svg"
                      fillMode: Image.PreserveAspectFit
                  }
              }
              Layout.minimumWidth: 100
              Layout.minimumHeight: 100
             }
  

  回复于 2024-05-04T09:14:31+08:00