Как сделать изображение для заполнения кнопки управления qml

Question

Я хочу, чтобы значок был заполнен Button. Вот код:

import QtQuick 2.3 
import QtQuick.Controls 1.2 
import QtQuick.Layouts 1.1 
import QtQuick.Window 2.2 

Window{ 
    id: root 
    title: "settings" 
    flags: Qt.Dialog 
    minimumHeight: 700 
    minimumWidth: 700 
    maximumHeight: 700 
    maximumWidth: 700 

    ColumnLayout{ 
     id: columnLayout 
     anchors.fill: parent 
     RowLayout{ 
      Button{ 
       iconSource: "images/1x1.png" 
       checkable: true 
       checked: true 
       Layout.minimumWidth: 100 
       Layout.minimumHeight: 100 
       } 

      Button{ 
       iconSource: "images/1x2.png" 
       checkable: true 
       checked: false 
       Layout.minimumWidth: 100 
       Layout.minimumHeight: 100 
      } 
      Button{ 
       iconSource: "images/2x1.png" 
       checkable: true 
       checked: false 
       Layout.minimumWidth: 100 
       Layout.minimumHeight: 100 
      } 
      Button{ 
       iconSource: "images/2x2.png" 
       checkable: true 
       checked: false 
       Layout.minimumWidth: 100 
       Layout.minimumHeight: 100 
      } 
     } 
     Rectangle{ 
      visible: true 
      implicitHeight: 600 
      implicitWidth: 700 
      color: "red" 
     } 
    } 
} 

Размер кнопки: 100 * 100 пикселей, но размер изображения намного ниже. Как сделать изображение, чтобы быть столь же большим, как кнопка

Answer 1

Если вы не возражаете против использования частный API, есть свойство обивки:

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 
} 

Answer 2

Если вы хотите, чтобы изображение заполнило кнопку:

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

или какой-либо другой fillMode, как вам нужно

Answer 3

Это действительно зависит от того, чего вы хотите достичь. ИМО, есть три решения здесь:

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) Если вы хотите использовать кнопку с образ, переопределить label свойство style следующим образом:

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, следуйте разумному подходу, предложенному Митчем.

Answer 4

Я прошел через ту же проблему, изложенную здесь. Большое спасибо за различные решения. Но тот, который предложил @folibis, наконец, дал платформу, выглядящую (плоскую в окнах 10) кнопку с моим svg-изображением. Но это работает очень хорошо. три причины: 1. Изображение было плотно прилегало к кнопке. Чтобы сохранить как значок, я использовал групповой пакет FLAT. 2. fillmode tile не подходит, когда мы ищем простое знаковое изображение на кнопке. Я изменил его на PreserveASpectFit. 3. Проверяемые и проверенные свойства не предназначены для кнопок нормального действия. Но, конечно, у этого образца кода вопроса есть. pl см. Мой код здесь. могут быть полезны. Еще раз спасибо @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 
      }