qmltextfieldqtquick2sailfish-os

How to display TextField at the bottom of the screen


I want to display a TextField at the bottom of the screen in QML for SailfishOS.

I attempted multiple tries but the TextField is always at the top of the screen.

import QtQuick 2.0
import Sailfish.Silica 1.0

ApplicationWindow {
     id: screen
     anchors.fill: parent
    Item {
        width: parent.width;
        anchors.bottom: screen.bottom
        TextField {
            width: parent.width;
            anchors.bottom: screen.bottom
            id: input
            placeholderText: "URL"
            inputMethodHints: Qt.ImhNoPredictiveText
            validator: RegExpValidator { regExp: /^[a-zA-Z]{3,}$/ }
        }
    }
}

Solution

  • Kaymaz, in common, your question is not related to SailfishOS. And you was almost right, but made several errors in your code. You can use this code:

    // Its desktop version, and everyone can run it. It will be easy 
    // to insert correct includes for SailfishOS
    import QtQuick 2.3
    import QtQuick.Controls 1.2
    import QtQuick.Window 2.2
    
    ApplicationWindow {
        id: appWindow
    
        // Explicitly set window size (just for testing on desktop)
        width: 200
        height: 400
    
        // Item that represents "main application rectangle"
        // it will contain all child items
        Item {
            id: root
            anchors.fill: parent
    
            TextField {
                id: input
                anchors {
                    left: parent.left
                    right: parent.right
                    bottom: root.bottom
                }
                placeholderText: "URL"
                inputMethodHints: Qt.ImhNoPredictiveText
                validator: RegExpValidator { regExp: /^[a-zA-Z]{3,}$/ }
            }
        }
    }
    

    I do not recommend use folibis's approach for several reasons: