QML控件类型：TextField、TextArea

TextField

一、描述

TextField 是单行文本编辑器，继承自 TextInput。TextField 使用占位符文本功能扩展了 TextInput。

二、属性成员

1、background : Item

背景项目。

如果背景项没有明确指定大小，它会自动遵循控件的大小。在大多数情况下，不需要为背景项目指定宽度或高度。

大多数控件使用背景项的隐式大小来计算控件本身的隐式大小。如果将背景项目替换为自定义项目，还应该考虑为其提供一个合理的隐式大小（除非它是像 Image 这样的项目，它有自己的隐式大小）。

2、bottomInset : real、leftInset : real、rightInset : real、topInset : real

见：Control

3、focusReason : enumeration

上次焦点更改的原因。

• Qt.MouseFocusReason：发生鼠标操作。
• Qt.TabFocusReason：Tab 键被按下。
• Qt.BacktabFocusReason：Backtab 发生。输入可能包括 Shift 或 Control 键；例如 Shift+Tab。
• Qt.ActiveWindowFocusReason：窗口系统使该窗口处于活动或非活动状态。
• Qt.PopupFocusReason：应用程序打开/关闭了一个抓取/释放键盘焦点的弹出窗口。
• Qt.ShortcutFocusReason：用户输入了标签的好友快捷方式。
• Qt.MenuBarFocusReason：菜单栏获得焦点。
• Qt.OtherFocusReason：其他原因，通常是特定于应用程序的。

4、hoverEnabled : bool

是否接受悬停事件。默认为 false。

5、【只读】hovered : bool

当前是否悬停。

6、【只读】implicitBackgroundHeight : real

隐式背景高度。等于 background ? background.implicitHeight : 0。

7、【只读】implicitBackgroundWidth : real

隐式背景宽度。等于 background ? background.implicitWidth : 0。

8、placeholderText : string

提示文本。

9、placeholderTextColor : color

placeholderText 的颜色。

三、信号成员

1、pressAndHold(MouseEvent event)

长按时发出此信号（延迟取决于平台）。 event 参数提供有关按下的信息，包括按下的 x 和 y 坐标，以及按下了哪个按钮。

2、pressed(MouseEvent event)

按下鼠标时会发出此信号。

3、released(MouseEvent event)

释放鼠标时发出此信号。

四、自定义TextField

import QtQuick
import QtQuick.Controls

TextField
{
    id: control
    placeholderText: qsTr("请输入内容")

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

import QtQuick
import QtQuick.Controls
import "qrc:/qml/"

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    MYTextField
    {
    }

    TextField
    {
        y:100
    }
}

---

TextArea

一、描述

TextArea  是多行文本编辑器，继承自 TextEdit。TextField 使用占位符文本功能扩展了 TextEdit 。

TextArea 本身不可滚动。如果想让 TextArea 可滚动，可以将其放置在 ScrollView  中。

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    ScrollView {
        id: view
        anchors.fill: parent

        TextArea {
            text: "TextArea\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n...\n"
        }
    }
}

Tab 焦点

默认情况下，在 TextArea 具有活动焦点时按下 Tab 键会导致将 Tab 字符输入到控件本身中。要使选项卡将活动焦点传递到另一个项目，使用附加的 KeyNavigation 属性：

TextField {
    id: textField
}

TextArea {
    KeyNavigation.priority: KeyNavigation.BeforeItem
    KeyNavigation.tab: textField
}

二、属性成员

与 TextField 相同。

三、附加属性成员

1、TextArea.flickable : TextArea

附加到 Flickable  的 TextArea。

四、信号成员

与 TextField 相同。

五、自定义TextArea

import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    TextArea {
        id: control
        placeholderText: qsTr("请输入内容")
        placeholderTextColor:"#ee5555"

        background: Rectangle {
            implicitWidth: 200
            implicitHeight: 40
            border.color: control.enabled ? "#21be2b" : "transparent"
        }
    }
}