TextField：当文本的宽度大于 TextField 的宽度时，文本会被裁剪一点

Question

当文本的宽度小于 TextField 的宽度时，文本位于 TextField 上方。

但是当文本的宽度大于 TextField 的宽度时，文本会被 TextField 裁剪。

是否可以做些什么来始终在上方显示文本？

import QtQuick 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.3

Item {
    width: 300
    height: 300

    TextField {
        id: textField1
        x: 25
        y: 163
        width: 62
        height: 20
        font.pixelSize: 20
        placeholderText: qsTr("Text Field")
    }
}

Answer 1

设置 TextField 的高度不裁剪文本并使其背景矩形变小。

TextField {
    id: textField1
    x: 25
    y: 163
    width: 62
    height: 30
    font.pixelSize: 20
    placeholderText: qsTr("Text Field")

    style: TextFieldStyle {
        textColor: "black"
        background: Rectangle {
            radius: 2
            color: "transparent"

            Rectangle {
                width: parent.width
                height: parent.height / 2
                border.width: 1
                anchors.bottom: parent.bottom
                radius: 2
                border.color: "steelblue"
            }
        }
    }
}

TextField：当文本的宽度大于 TextField 的宽度时，文本会被裁剪一点

TextField: text is cropped a bit when its width is greater than the width of TextField

qt

qml

qtquick2