Roson讲Qt#30 Quick Controls 2之TextField(单行文本编辑)

电玩女神 2022-09-11 11:22 27阅读 0赞

# 1.概念 #

TextField是一个单行文本编辑器。TextField扩展了TextInput的占位符文本功能，并添加了装饰。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16][]

TextField {
          placeholderText: qsTr("单行文本")
      }

![20210916113609714.png][]

# 2.属性 #

## 2.1 background : Item ##

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

## 2.2 focusReason : enumeration ##

此属性保存上次更改焦点的原因。  
注意:此属性不指示控件是否具有活动焦点，但指示控件获得或失去焦点的原因。

可选值如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16][]

## 2.3 hoverEnabled : bool ##

此属性确定文本字段是否接受悬停事件。 默认值为false。

## 2.4 \[read-only\] hovered : bool ##

此属性用于保持文本字段是否被悬停。

## 2.5 placeholderText : string ##

此属性保存在用户输入文本之前在TextField中显示的提示。

#    3.信号 #

## 3.1 void pressAndHold(MouseEvent event) ##

这个信号在长按时发出(延迟取决于平台插件)。事件参数提供关于按下的信息，包括按下的x和y位置，以及按下的是哪个按钮。

##    3.2 void pressed(MouseEvent event) ##

当用户按下文本字段时将发出此信号。事件参数提供关于按下的信息，包括按下的x和y位置，以及按下的是哪个按钮。

##    3.3 void released(MouseEvent event) ##

当用户释放文本字段时将发出此信号。 事件参数提供有关释放的信息，包括按下的x和y位置，以及按下的按钮。

# 4.自定义样式 #

//TextField由一个背景项组成
       TextField {
          id: control
    	  x:200
    	  y:200
          placeholderText: qsTr("输入文本")
    
          background: Rectangle {
              implicitWidth: 200
              implicitHeight: 40
              color: control.enabled ? "transparent" : "#353637"	//背景颜色
              border.color: control.enabled ? "#21be2b" : "transparent"	//边框颜色
          }
      }

![202109161141318.png][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_8_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6a07f55b776344749676ea8215023185.png
[20210916113609714.png]: /images/20220828/f2b9a11b43474c4385e88858a11b36d5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/da9588f1a8834b96a8ce31f4a675b071.png
[202109161141318.png]: /images/20220828/ec7e6d5b4e1d49aa903161f7500f706b.png