QML-тип SearchField

Текстовое поле для ввода поискового запроса. Подробнее...

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

Свойства

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

Тип SearchField отображает поле поиска — одну строку редактируемого текста вместе со значком поиска и кнопкой, которая очищает введенный текст.

Ниже приведен пример с полем поиска, расположенным в заголовке страницы:

 import QtQuick 2.2
 import Sailfish.Silica 1.0

 SilicaListView {
     property alias searchField: headerItem

     anchors.fill: parent

     header: SearchField {
         width: parent.width
         placeholderText: "Search"

         onTextChanged: {
             listModel.update()
         }
     }

     // предотвращает перемещение фокуса с поля поиска на вновь создаваемые делегаты списка
     currentIndex: -1

     model: ListModel {
         id: listModel
         property var continents: ["Africa", "Antarctica", "Asia", "Europe", "North America", "Oceania", "South America"]

         function update() {
             clear()
             for (var i=0; i= 0) {
                     append({"name": continents[i]})
                 }
             }
         }

         Component.onCompleted: update()
     }

     delegate: ListItem {
         Label {
             anchors {
                 left: parent.left
                 leftMargin: searchField.textLeftMargin
                 verticalCenter: parent.verticalCenter
             }
             text: name
         }
     }
 }

Тип SearchField наследуется от TextField, поэтому свойство text можно использовать для доступа к введенному тексту.

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

См. также TextField.

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

active : bool

True if the search field is active. Setting this to false will set opacity to 0 and visible to false, shrink the height to 0, and clear the search text.

Note this property is changed by the search field (and thus any binding is cleared) when the user clicks the "hide" button.

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

canHide : bool

True if the search field should show a "hide" button when the search text is empty.

If this property is true, the search field's "clear" button (that normally clears the search text when clicked) will change to a "hide" icon when the search text is empty, and if the button is clicked in this state, active is set to false and the search field will be visually hidden.

transitionDuration : int

The duration of the animation (in milliseconds) that is run when the search field transitions between active and inactive states.

The default value is 200.