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

爱被打了一巴掌 2022-09-11 11:21 2阅读 0赞

# 1.属性 #

TextArea是一个多行文本编辑器。TextArea扩展了texttedit的占位符文本功能，并添加了装饰。  
TextArea本身不能滚动。特别是在屏幕尺寸受限的平台上，通常更可取的做法是让整个应用程序页面可滚动。在这样一个可滚动的页面上，一个不可滚动的TextArea可能比嵌套的可滚动控件表现得更好。但是，请注意，在这种情况下，TextArea的背景装饰与其他可滚动内容一起滚动。

外观：

# ![20210916112138119.png][] #

#    2.滚动的文本区域 #

例如，如果你想让TextArea可滚动，当它覆盖整个应用程序页面时，可以把它放在ScrollView中。

ScrollView {
          id: view
    	  x:200
    	  y:200
    	  height:100
    
          TextArea {
              text: "TextArea\n...\n...\n...\n...\n...\n...\n"
          }
      }

![20210916112402513.png][]

放置在ScrollView内的TextArea执行以下操作:

*   自动设置内容大小
 *   确保背景装饰保持在合适的位置
 *   剪辑的内容

#    3.属性 #

## 3.1 background : Item ##

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

##    3.2 focusReason : enumeration ##

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16][]

##    3.3 hoverEnabled : bool ##

放置在ScrollView内的TextArea执行以下操作:

*   自动设置内容大小
 *   确保背景装饰保持在合适的位置
 *   剪辑的内容

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

此属性用于保持文本区域是否被悬停

##    3.5 placeholderText : string ##

此属性保存在用户输入值之前在文本区域中显示的简短提示。

## 3.6 TextArea.flickable : TextArea ##

此属性将文本区域附加到Flickable。

#    4.信号 #

## 4.1 void pressAndHold(MouseEvent event) ##

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

## 4.2 void pressed(MouseEvent event) ##

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

## 4.3 void released(MouseEvent event) ##

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

# 5.自定义样式 #

//TextArea由一个背景项组成。
      TextArea {
          id: control
    	  x:200
    	  y:200
          placeholderText: qsTr("这是我的多行文本\n换个行试一试")//要显示的文字
    
          background: Rectangle {
              implicitWidth: 200
              implicitHeight: 40
              border.color: control.enabled ? "#21be2b" : "transparent"	//边框颜色
    		  color: "#f0f0f0"	//背景颜色
          }
      }

![20210916111914802.png][]

[20210916112138119.png]: /images/20220828/257cce3737f147a686f0b81eb2a78ba4.png
[20210916112402513.png]: /images/20220828/d50b63a211954a8ebe6fa2767ba4807c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e66a3c36296d47d6985f91279b157a8a.png
[20210916111914802.png]: /images/20220828/f33fa892b1f1427e8f6926f08d2b8dad.png