如何在 QML 中创建带有背景的 TextInput 框表

Question

我如何制作一个带有背景的、有 6 行 5 个表格和 25 个 TextInput 框的表格。

我几乎尝试了所有方法来为 TextInput 框添加背景，但仍然无法成功。

我的 TextInput 框代码如下：

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

我怎样才能制作它们并为它们添加背景颜色？

Answer 1

要获得具有此类元素的背景，请选择文本域组件（我建议在这个回答）。

对应代码：

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
                }
            }
        }
    }
}