QML-тип Button

Кнопка с текстовой меткой. Подробнее…

Строка импорта:	import Sailfish.Silica 1.0
Наследуется от:	MouseArea

• Список всех членов класса, включая унаследованные

Свойства

• border
  • border.color : color
  • border.highlightColor : color
• color : color
• down : bool
• highlightBackgroundColor : color
• highlightColor : color
• icon : Image
• layoutDirection : enumeration
• preferredWidth : real
• text : string

Подробное описание

Тип Button реализует оформленную в стиле ОС Аврора кнопку с текстовой меткой.

Ниже приведён пример кода, который реализует простую кнопку:

import QtQuick 2.2
import Sailfish.Silica 1.0

Button {
   text: "Нажми меня"
   onClicked: console.log("clicked!")
}

Button наследуется от типа QtQuick MouseArea. Поэтому свойства, сигналы и методы MouseArea (например, onClicked в примере выше) также доступны для объектов Button. Полный список доступных свойств, сигналов и методов приведён в документации MouseArea.

При назначении ширины кнопки рекомендуется вместо свойства width использовать свойство preferredWidth. Это позволит автоматически увеличить размер кнопки для вмещения текста.

Если для объекта типа Button установлено значение высоты, то визуально кнопка сохраняет размер, увеличивается лишь область нажатия.

SecondaryButton предоставляет кнопку с меньшим визуальным акцентом и предполагает, что это не главное действие на странице.

import QtQuick 2.6
import Sailfish.Silica 1.0

SecondaryButton {
   text: "Нажми меня"
   onClicked: console.log("Вторая кнопка нажата!")
}

Описание свойств

border group
border.color : color
border.highlightColor : color

Дополнительные настройки стиля кнопки позволяют изменить цвет её границы.

См. также highlightBackgroundColor, highlightColor и color.

color : color

С помощью свойства color задаётся цвет кнопки и размещенного на ней текста.

См. также highlightBackgroundColor и highlightColor.

down : bool

Истинно, пока кнопка нажата, и положение касания остаётся в области этой кнопки.

См. также MouseArea::pressed.

highlightBackgroundColor : color

При истинном значении свойства down цвет кнопки задаётся с помощью свойства highlightBackgroundColor.

См. также highlightColor и color.

highlightColor : color

При истинном значении свойства down цвет текста кнопки задаётся с помощью свойства highlightColor.

См. также highlightBackgroundColor и color.

icon : Image

Содержит отображаемое на кнопке-переключателе изображение. Если устанавливается только иконка, то preferredWidth кнопки изменится на Theme.buttonWidthTiny. Не рекомендуется использовать кнопки только с иконками, кнопки только с текстом, и кнопки с текстом и иконкой в одном и том же макете.

layoutDirection : enumeration

Этот параметр управляет положением текста и значка внутри кнопки относительно друг друга.

• Qt.LeftToRight (значением по умолчанию) — сначала отображается иконка. Текст располагается справа от иконки.
• Qt.RightToLeft — зеркальное отображение элементов относительно значения по умолчанию. Иконка располагается справа от текста.

Если кнопка с текстом и значком расположена внутри макета, который по своей структуре является столбцом, то содержимое внутри кнопки выравнивается по левому краю самого большого по ширине элемента. В противном случае используется выравнивание по центру.

См. также ButtonLayout.

preferredWidth : real

Содержит размер кнопки. Данное свойство может принимать следующие значения:

• Theme.buttonWidthTiny — размер по умолчанию для квадратных кнопок, состоящих только из иконок.
• Theme.buttonWidthExtraSmall — значение ширины самой маленькой кнопки в интерфейсе ОС Аврора, которое используется только в случае плотной компоновки кнопок. На экране с портретной ориентацией могут быть размещены три такие кнопки. В большинстве приложений следует избегать использования данного варианта.
• Theme.buttonWidthSmall — значение ширины маленькой кнопки, которое используется по умолчанию. Данное значение подобрано так, что на экране с портретной ориентацией могут быть размещены две такие кнопки. На больших экранах или на экранах с альбомной ориентацией может быть размещено больше двух маленьких кнопок.
• Theme.buttonWidthMedium — значение ширины средней кнопки. На экране (в зависимости от его размера и ориентации), как правило, может быть размещена только одна средняя кнопка.
• Theme.buttonWidthLarge — значение ширины большой кнопки. На экране (в зависимости от его размера и ориентации), как правило, может быть размещена только одна большая кнопка.

В случае, если заданный текст не вмещается в указанный размер кнопки, ее ширина будет автоматически увеличена, чтобы вместить текст.

text : string

Содержит отображаемый на кнопке текст.