Ubuntu – How to create in QML a table of TextInput boxes with background

qmlubuntu-sdkubuntu-touch

How can I make a table with 6 rows 5 tables and 25 TextInput boxes, with background.

I've tried almost everything to put an background to the TextInput boxes, but still I could not get it right.

My code for the TextInput box is there:

TextInput {
    y: 20;
    font.pixelSize: 10
    text: "Computador"
    cursorVisible: true;
    border.color: "#c0c0c0"
}

How can I make them and put a background color to them?

Best Answer

To get a background with such elements, prefer the TextField component instead (I suggested a similar usage in this answer).

enter image description here

The corresponding code:

import QtQuick 2.0
import Ubuntu.Components 0.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

MainView {
    id: main
    width: 400
    height: 300

    Column {
        spacing: units.gu(2)
        anchors.centerIn: parent
        TextInput {
            text: "default TextInput"
            cursorVisible: false
            width: main.width - units.gu(25)
        }
        TextField {
            placeholderText: "default TextField"
            width: main.width - units.gu(25)
        }
        TextField {
            placeholderText: "TextField with background"
            width: main.width - units.gu(25)
            text: "TextField with background"
            style: TextFieldStyle {
                textColor: "black"
                background: Rectangle {
                    radius: 5
                    color: "orange"
                    implicitWidth: 100
                    implicitHeight: 24
                    border.color: "#333"
                    border.width: 1
                }
            }
        }
    }
}