【Qt QML 入门】TextField

TextField 是一个单行文本编辑器，它继承自TextInput，具备TextInput的所有功能，同时扩展了 TextInput 并增加了占位符文本功能和装饰选项。

自定义文本输入框：

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
    id: win
    width: 800
    height: 600
    visible: true

    TextField {
        id: osdTextField
        height: font.pixelSize*1.8
        focus: true
        anchors.centerIn: parent
        selectByMouse: true
        background: Rectangle {
            implicitHeight: 40
            implicitWidth: 200
            border.color: "#21be2b"
        }
        color: "steelblue"
        placeholderTextColor: "gray" // 默认文字颜色

        font {
            family: "宋体"
            pixelSize: 16
            underline: false
        }
        verticalAlignment: TextInput.AlignVCenter
        inputMethodHints: Qt.ImhNoAutoUppercase | Qt.ImhPreferLowercase | Qt.ImhSensitiveData | Qt.ImhNoPredictiveText
    //    renderType: Text.NativeRendering;  // 字体渲染类型 与本地平台有关，此处可使字体更加清晰
    }
}

属性解释：

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
    id: win
    width: 800
    height: 600
    visible: true

    TextField {
        width: 200
        height: 50
        anchors.centerIn: parent
        text: "this is a TextField control!"
    }
}

自定义默认显示文本和输入框样式：

import QtQuick
import QtQuick.Window
import QtQuick.Controls

Window {
    id: win
    width: 800
    height: 600
    visible: true

    TextField {
        id: tf
        width: 200
        height: 50
        anchors.centerIn: parent
        placeholderText: "this is a TextField control!"

        background: Rectangle {
            implicitWidth: 200
            implicitHeight: 40
            color: tf.enabled ? "transparent" : "#353637"
            border.width: 1
            border.color: tf.enabled ? "#21be2b" : "transparent"
        }
    }
}

background : Item

如果背景项没有明确指定大小，它将自动遵循控件的大小。在大多数情况下，不需要为背景项指定宽度或高度。大多数控件使用背景项的隐式大小来计算控件本身的隐式大小。如果你用自定义项替换背景项，你也应该考虑为它提供一个合理的隐式大小(除非它是一个像Image这样有自己隐式大小的项)。

focusReason : enumeration

保存上次焦点更改的原因。

Qt.MouseFocusReason: 焦点改变是因为鼠标的操作。

Qt.TabFocusReason: 焦点改变是因为用户按下了Tab键。

Qt.BacktabFocusReason: 焦点改变是因为用户执行了反Tab操作，可能是通过Shift+Tab或其他类似的组合键。

Qt.ActiveWindowFocusReason: 焦点改变是因为窗口系统使这个窗口变为活动或非活动状态。

Qt.PopupFocusReason: 焦点改变是因为应用程序打开或关闭了一个弹出窗口，该窗口抢夺或释放了键盘焦点。

Qt.ShortcutFocusReason: 焦点改变是因为用户输入了一个标签的快捷键。

Qt.MenuBarFocusReason: 焦点改变是因为菜单栏获得了焦点。

Qt.OtherFocusReason: 焦点改变是因为其他原因，通常是特定于应用程序的。