Как создать квадратную кнопку в Qt QML?

Question

Я пытаюсь создать простую квадратную кнопку в QML, но она работает не так, как ожидалось.Вот минимальное количество кода:

import QtQuick 2.7
import QtQuick.Controls 2.1

Page {
    id: app
    width: 400
    height: 640


    Button {
        width: 48
        height: 48
    }
}

Который дает этот результат:

Есть идеи, что происходит?Я просмотрел документы и попытался установить implicitWidth и implicitHeight с помощью определенного элемента фона , но это блокирует встроенные функции наведения и тени кнопки.

Button {
    background: Rectangle {
        implicitWidth: 48
        implicitHeight: 48
        color: "gray" 
    }
}

приводит к:

Есть ли способы установить желаемый размер без явного определения элемента фона?

---

Редактировать: Я также попытался установить все padding на 0, чтобы увидеть, если заполнение является проблемой:

Button {
    width: 48
    height: 48

    topPadding: 0
    bottomPadding: 0
    leftPadding: 0
    rightPadding: 0
}

А также следуя совету коллеги, добавьте текстовый элемент, чтобы увидеть, где он находится:

Button {
    width: 48
    height: 48

    Text {
        text: "hello"
    }
}

Расположение текста подсказывает мне, что кнопка может простираться за верхние границы видимого серого прямоугольника.Может ли это быть так?

Еще одно замечание: я использую эмулятор - эмулятор AppStudio for ArcGIS, установленный в Qt Creator.Qt 5.10.0, Windows 10.

Answer 1

Митч был на правильном пути, что кнопка стиля Qml Material имеет некоторые отступы, но фон Rectangle также имеет эту строку:

height: parent.height - 12

, чтонемного хлопотноВы могли бы сделать хакерское решение, установив высоту вашей кнопки на 12 больше ширины (и также изменив отступ), но я бы не стал ее предлагать.

Вместо этого, как они предлагают с Настройка Qt Quick Controls Я бы сделал MyButton.qml и скопировал туда код Button.qml в стиле Material и просто изменил бы высоту фона и отступы для элемента управления.Это облегчает дальнейшее изменение стиля, поскольку вам не нужно менять все кнопки в вашем приложении.

Answer 2

Есть идеи, что происходит?Я просмотрел документы и попытался установить implicitWidth и implicitHeight через определенный фоновый элемент, но он блокирует встроенные функции наведения и тени кнопки.

Стиль материала *Кнопка имеет некоторый отступ , что, вероятно, является причиной того, что она не является квадратной.Установка каждого свойства заполнения на 0 (или равные значения) должна помочь:

leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 0