QML-тип PullDownMenu

Добавляет вытягиваемое сверху меню в представлениях Silica. Подробнее...

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

Свойства

Методы

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

Тип PullDownMenu предоставляет глобальные действия для представлений SilicaFlickable, SilicaListView, SilicaGridView и SilicaWebView. Раскрывающееся меню располагается над содержимым экрана. Чтобы открыть раскрывающееся меню, следует коснуться экрана ниже полосы и, не отрываясь, провести по экрану вниз. Чтобы активировать пункт такого меню, необходимо выполнить одно из следующих действий:

  • не отрывая пальца от экрана, провести его вниз, остановить выбор на нужном пункте, отпустить палец от экрана;
  • проведя пальцем по экрану сверху вниз, раскрыть меню целиком, затем коснуться нужного пункта.

Вытягиваемое сверху меню заполняется путем создания объектов типа MenuItem в качестве дочерних элементов PullDownMenu. Сюда же в качестве дочерних элементов можно включить объекты типа MenuLabel (неинтерактивные метки).

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 ApplicationWindow {
     initialPage: Page {
         SilicaListView {
             PullDownMenu {
                 MenuItem {
                     text: "Option 1"
                     onClicked: console.log("Clicked option 1")
                 }
                 MenuItem {
                     text: "Option 2"
                     onClicked: console.log("Clicked option 2")
                 }
                 MenuLabel { text: "Informational label" }
             }

             anchors.fill: parent
             header: PageHeader { title: "Header" }
             model: 100
             delegate: ListItem {
                 Label {
                     text: "Item " + model.index
                     anchors.centerIn: parent
                 }
             }
         }
     }
 }

Следует обратить внимание, что элементы типа PullDownMenu можно создавать только внутри контейнеров SilicaFlickable, SilicaListView, SilicaGridView или SilicaWebView. Для добавления меню проще всего "завернуть" его в контейнер типа SilicaFlickable:

 // Без вытягиваемого сверху меню
 Page {
     Column {
         width: parent.width

         PageHeader {}
         Slider { width: parent.width }
     }
 }
 // С вытягиваемым сверху меню
 Page {
     SilicaFlickable {
         anchors.fill: parent
         contentHeight: column.height

         PullDownMenu {
             MenuItem {
                 text: "Option 1"
                 onClicked: console.log("Clicked option 1")
             }
         }

         Column {
             id: column
             width: parent.width

             PageHeader {}
             Slider { width: parent.width }
         }
     }
 }

Выпадающее меню имеет настраиваемые отступы и фон.

Для изменения фона и его цвета для вытягиваемого сверху меню используются свойства background и backgroundColor, соответственно. Также можно настраивать значения отступов и интервалов для пунктов меню следующим образом:

Элементы типов PullDownMenu и PushUpMenu позволяют создавать меню сверху и снизу экрана, соответственно.

См. также MenuItem, PushUpMenu и ContextMenu.

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

active : bool

Истинно, если вытягиваемое сверху меню частично или полностью отображается на экране.

background : Component

Содержит компонент, который используется для отрисовки фона меню. Рекомендуется, чтобы фон имел нулевой зазор относительно нижней кромки области меню. Например:

 PullDownMenu {
     background: Rectangle {
         anchors {
             fill: parent
             bottomMargin: parent.spacing
         }
         opacity: Theme.highlightBackgroundOpacity
         color: Theme.highlightColor
     }
 }

backgroundColor : color

Содержит цвет фона меню. Отрисовывается с применением эффекта градиента.

См. также highlightColor.

bottomMargin : real

Отступ между последним пунктом меню и индикатором меню.

Значение по умолчанию учитывает возможное наличие элемента MenuLabel в конце меню. Если последним дочерним элементом меню является MenuLabel, значение этого свойства равно 0, в противном случае — высоте элемента MenuLabel. Таким образом при открытии меню как с элементом MenuLabel, так и без него обеспечивается характерное поведение пользовательского интерфейса.

См. также topMargin и spacing.

busy : bool

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

flickable : Item

Указывает представление SilicaFlickable, SilicaListView, SilicaGridView или SilicaWebView, в которое будет добавлено меню PullDownMenu.

Если свойство flickable не задано, то меню будет добавлено в ближайший родительский элемент с прокруткой (Flickable).

highlightColor : color

Содержит цвет индикатора меню и цвет подсвечивающего прямоугольника меню.

См. также backgroundColor.

quickSelect : bool

Если свойство quickSelect имеет истинное значение, то меню, состоящее из одного пункта, не фиксируется при вытягивании.

Это позволяет быстро выбирать пункт меню сразу же после открытия меню. Такое поведение уместно использовать в сигнализирующих диалогах, когда от пользователя требуется быстрая реакция.

spacing : real

Зазор в пикселях между индикатором меню и содержимым страницы.

Значение по умолчанию: 0.

См. также topMargin и bottomMargin.

topMargin : real

Отступ между верхней границей меню и первым пунктом меню.

Значение по умолчанию: Theme.itemSizeSmall.

См. также bottomMargin и spacing.

Описание методов

cancelBounceBack()

Обычно после того, как пункт меню выбран, выполняется короткая анимация возврата вытягиваемого сверху меню в исходное закрытое положение. Однако, в некоторых случаях это может противоречить действию, которое выполняется в результате выбора пункта меню. Чтобы отключить анимацию возврата меню после выбора пункта меню, следует вызвать метод cancelBounceBack() в обработчике onClicked соответствующего пункта меню. Анимация возврата меню в исходное положение снова будет выполняться при следующем открытии меню.

См. также close.

close(bool immediate)

Закрывает меню.

По умолчанию после выбора пункта меню выполняется короткая анимация возврата меню в исходное закрытое положение. Если же параметру immediate задать значение true, то эта анимация будет пропущена, а меню будет закрыто сразу.

См. также cancelBounceBack.