SearchBar

A search bar with native styling for iOS and Android based on the Theme settings. More...

Import Statement: import VPlayApps 1.0
Since: V-Play 2.9.2
Inherits:

Item

Properties

Signals

Methods

Detailed Description

The SearchBar control provides a native-looking search input field for Android and iOS based on the Theme settings.

iOS Android

Note: The item offers two different styles for the search bar on iOS. To switch to the second style, which is used in the image above, set iosAlternateStyle to true.

Example Usage

Simple Example

 import VPlayApps 1.0

 App {
   NavigationStack {

     Page {
       title: "SearchBar Example"

       SearchBar {
         id: searchBar
         onAccepted: {
           console.log("search accepted: "+text)
           listView.model = 2 // update result
         }
       }

       AppListView {
         id: listView
         anchors.top: searchBar.bottom
         model: 50
         delegate: SimpleRow { text: "Entry "+index }
       }

     } // Page

   }
 }

Pull-To-Search Example

The SearchBar can also be combined with a ListView to hide the bar by default and only show it after pulling down the list. To use this feature, activate pullEnabled and specify the target ListView.

 import VPlayApps 1.0

 App {
   NavigationStack {

     Page {
       title: "SearchBar Example"

       SearchBar {
         id: searchBar
         target: listView
         pullEnabled: true
         onAccepted: {
           console.log("search accepted: "+text)

           // if the search bar is not empty, we prevent it from disappearing
           if(text !== "") {
             searchBar.keepVisible = true
             listView.model = 2 // update result
           }
           else {
             // initial settings
             searchBar.keepVisible = false
             listView.model = 50
           }
         }
       }

       AppListView {
         id: listView
         height: parent.height - y // the search bar modifies the y-position of the list
         model: 50
         delegate: SimpleRow { text: "Entry "+index }
       }

     } // Page

   }
 }

Note: The pullEnabled setting modifies the y-position of the ListView, so we decrease its height in the example to always exactly fill the page.

Property Documentation

barBackgroundColor : color

The background color of the search bar. Matches platform-specific values by default.


icon : string

The search icon, matches IconType.search by default.


iconColor : color

The color of the search icon. Matches Theme::tintColor if the search field has focus, Theme::placeholderTextColor otherwise.


iconSpacing : real

The spacing to the right of the search icon. The default value is 10 dp.


inputBackgroundColor : color

The background color of the input field. Matches platform-specific values by default.


iosAlternateStyle : bool

Set this property to true to use select an alternate search-bar style on iOS.

Default Style Alternate Style


keepVisible : bool

If pullEnabled is activated and the search bar is linked with a ListView target, the search bar will stay visible as long as this property is true. The default is false, which hides the search bar if the list is scrolled down again.

See also target and pullEnabled.


placeHolderColor : alias

The color of the placeholder text in the input field. Matches Theme::placeholderTextColor by default.


placeHolderText : string

The placeholder text of the search input field. The default value is Search.


pullEnabled : bool

If set to true and the search bar is linked with a ListView target, the search will become visible by dragging down the list while it is on top position.

Note: The target ListView's y-position will be set to match the search bar height (to show the search) or zero (to hide the search).

See also target and keepVisible.


showClearButton : bool

If set to true, a clear button is displayed at the right side of the search bar as soon as the text field has content, as a way for the user to remove the current text.

The default value is true.

This QML property was introduced in V-Play 2.10.0.


target : ListView

If pullEnabled is set to true, the search bar will be linked to the target ListView to only become visible when pulling down the list.

Note: The target ListView's y-position will be set to match the search bar height (to show the search) or zero (to hide the search). Please do not anchor the list-view or set a custom y-position if you want to use this feature.

See also pullEnabled and keepVisible.


text : alias

The text of the search input field.


textColor : alias

The color of entered text in the search input field. The default value matches Theme::textColor.


Signal Documentation

accepted(string text)

This signal is emitted when the Return or Enter key is pressed by the user to trigger the search.


editingFinished(string text)

This signal is emitted when the Return or Enter key is pressed or the text field loses focus.


Method Documentation

hide()

Hides the search bar by modifying the target ListView's y-position.

See also target, pullEnabled, and keepVisible.


show()

Shows the search bar by modifying the target ListView's y-position.

See also target, pullEnabled, and keepVisible.


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support