Using TextInput in Qt Quick (QML)

Recently I wanted to created a text input dialog box in QML. QML has nice support for editing large text and one line text. For editing large text we can use TextEdit QML element and for one line text we can use TextInput QML element.

But default appearance of TextInput might not suite look and feel of your application. It was not suited for my application as well. Following is my initial code.

TextInput {
        y:50
        anchors.horizontalCenter: parent.horizontalCenter
        id: text1
        font.pixelSize: 20; font.bold: true
        text: "Enter text here ..."
        focus: true
        width: container.width - 30 ; height: 40
    }

And following is output from above code.

To change appearance, I put it inside Rectangle element and modified its border and other properties.

Here how it looks after my change.

Here is modified code. In following code container is parent Rectangle element.

    Rectangle{
        y: 100
        width: container.width - 30 ; height: 40
        anchors.horizontalCenter: parent.horizontalCenter
        border.width: 3
        border.color: "#4b4b4b"
        color: "lightsteelblue"
        radius: 5
        TextInput {
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            id: text2
            font.pixelSize: 20; font.bold: true
            text: "Enter text here..."
            width: container.width - 40 ;
            color: "#4b4b4b"
            focus: true
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                text2.selectAll();
            }
        }
    }

Hope it will help someone.

Creating scrollable large text with QML

Recently I wanted to show large text of help in my QML application. I used TextEdit QML element to show large text but it dose not support scrolling by default. We need to add it to Flickable element to support scrolling of text. We can add other QML element as well to Flickable to add scrolling support to those element.

Following is my code, My code dose not shows scrollbar, There are some QML example from Qt which shows how to add scrollbar to Flickable element.

Rectangle {
    id:main
    width:300; height:300

    Rectangle {
        id:helpScreen
        width:main.width; height:main.height

        Flickable {
            id: flickArea
             anchors.fill: parent
             contentWidth: helpText.width; contentHeight: helpText.height
             flickableDirection: Flickable.VerticalFlick
             clip: true

             TextEdit{
                  id: helpText
                   wrapMode: TextEdit.Wrap
                   width:helpScreen.width;
                   readOnly:true

                   text:  "Text goes here"
            }
        }
    }
}

Hope this helps.