& &QML 文件的后缀是 qml ，其实就是个文本文件。下面是 一个简单的 QML 文件：
import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Dialogs 1.1
import an.qt.ImageProcessor 1.0
import QtQuick.Controls.Styles 1.1
Rectangle {
width: 320;
height: 480;
color: &#121212&;
source: &images/IMG_001.jpg&;
anchors.centerIn:
这个简单的 QML 文件的开始是 import 语句，如 import QtQuick 2.0 这句，会引入 QtQuick 2.0 模块，哇，真是废话！接着废话吧。 import 和 C++ 中的 #include 类似，与 Java 中的 import 效果一样，与 JavaScript 中的……唐僧了，打住。
& & Rectangle{ } 语句，定义了一个类型为 Rectangle 的对象。如果你看了《》一文中有关
Json 的语法描述，应该已经知道对象要用一对花括号来描述。没错， QML 里也是这样，不过呢，花括号前要写上对象的类型。就这么简单！
& & 示例 QML 文档中有两个对象，一个是 Rectangle ，一个是 Image 。
& & 在花括号之间，是对象的属性描述（还可以有其它的，后面再说），属性是以 &property: value& 形式指定的，这点和 Json 一样。如你所见， Rectangle 对象有 width 、 color 等属性。
& & 属性可以分行书写，此时语句后可以不要 &;& 号，不过笔者建议 C++ 程序猿都加上 &;& ，这会避免你患上精神分裂症。当然，也可以把多个属性写在一行内，多个属性之间必须以 &;& 分割。如下所示：
Rectangle {
width: 320; height: 480; color: &#121212&;
我强烈建议你不要这么干！除非有代码意外的原因，比如排版需要，比如老板觉得你代码行数太多……
& & &在《》中笔者已经提到， QML 支持 JavaScript 表达式。比如你可以这样改写 Rectangle 对象的宽、高属性：
Rectangle {
width: 23*10;
height: 6*80;
color: &#121212&;
我只是示意啊，你在实际项目中可别这么写，这种行为往不好听里说，有点儿脑残……当然我也可以举一个有意义的示例：
text: &Quit&;
style: ButtonStyle {
background: Rectangle {
implicitWidth: 70;
implicitHeight: 25;
border.width: control.activeFocus ? 2 : 1;
}在这个示例中我指定了按钮风格中的背景矩形，在按钮有焦点时边框宽度为
2 没有焦点时宽度为 1 。语句 &border.width: control.activeFocus ? 2 : 1& 使用了 JavaScript 的 &?:& 三元云算法（ C++ 中貌似也有……）。
& & 另外，慧眼如你，可能已经注意到，上面的表达式中我使用了 &control.activeFocus& ，没错，在表达式中可以引用其它对象及其属性。当你这么做的时候，待赋值的属性就和你所引用的对象的那个属性建立了关联，当被引用属性发生变化时，表达式的值会重新计算，而待赋值的属性也会变化。
& & 也许你心中已经有了疑问：如何引用一个对象呢？答案是：通过对象的 id 值来引用一个对象。看这里：
Rectangle {
width: 320;
height: 480;
text: &打开&;
anchors.left:
anchors.leftMargin: 6;
anchors.top: parent.
anchors.topMargin: 6;
text: &退出&;
anchors.left: openFile.
anchors.leftMargin: 4;
anchors.bottom: openFile.
上面的示例中，退出按钮使用 id（ openFile ）引用了打开按钮。
& & 我的乖呀，anchors 是什么东东……先别管它，下一篇会讲到。
& & 在 QML 中，注释与 C++ 中一样，单行以 &//& 开始，多行以 &/*& 开始以 &*/& 结束。
& & 注释是不被执行的，添加注释可对代码进行解释或者提高其可读性。注释同样还可用于防止代码执行，这对跟踪问题是非常有用的。
& & 使用注释的示例 QML ：
* the root element of QML
Rectangle {
width: 320;
height: 480;
text: &退出&;
//use anchors to layout
anchors.left: openFile.
anchors.leftMargin: 4;
anchors.bottom: openFile.
//set z-order
& & 其实， QML 中的属性，就是我们非常熟悉的 C++ 中的成员变量……
& & 属性名的首字母一般以小写开始，如我们看烦了的 width 属性。
& & 如果属性名以多个单词表示，那么第二个及以后的单词，首字母大写。
& & 可以在&QML 文档中使用的类型大概有三类：
由 QML 语言本身提供的类型使用 QML 模块注册 C++ 类型由 QML 模块提供的类型
& & 我们先看 QML 语言提供的基本类型。
& 基本类型
& & QML 支持的基本类型包括整型、实数型、布尔、字符串、颜色、列表等等。这些基本类型有些是和 JavaScript 语言的基本类型对应的。
& & 还是之前的示例，修改了一下，通过注释标注了属性类型：
Rectangle {
width: 320; //int
height: 480;
text: &退出&; //string
anchors.left: openFile.
anchors.leftMargin: 4;
anchors.bottom: openFile.
z: 1.5; // real
visible: //bool
注意， QML 中属性是有类型安全检测的，也就是说你只能指定与属性类型匹配的值，否则会报错。
& & 请使用 Qt 助手的索引模式，以&qml basic types & 为关键字检索，找到 QML Basic Types 页面来查看完整的类型列表和每个类型的详情。
& & Qt 的 QML 模块还未 QML 引入的很多 Qt 相关的类型，如 Qt 、 QtObject 、Component 、 Connections 、 Binding 等，请使用 Qt 助手检索 &qt qml qml types& 来了解。
& & 之前在介绍表达式时提到了 id 属性，这里展开描述一下。
& & 一个对象的 id 属性是唯一的，在同一个 QML 文件中不同对象的 id 属性的值不能重复。当给一个对象指定了 id ，就可以在其它对象或脚本中通过 id 来引用该对象。在“表达式”一节中我们已经演示了如何通过 id 来引用一个对象。
& & 请注意， id 属性的值，首字符必须是小写字母或下划线并且不能包含字母、数字、下划线以外的字符。
& & 列表属性类似于下面这样：
children:[
列表是包含在方括号内，以逗号分隔的列表元素。看起来是不是挺熟悉？在《》中，我们举过 Json 数组的例子，再看看：
&name&:&zhangsan&,
&phone&:&&,
&other&: [&xian&, null, 1.0, 28]
其实列表和 JavaScript 的数组是类似的，其访问方式也一样：
length 属性提供了列表内元素的个数列表内的元素通过数组下标来访问（[index]）
& & 值得注意的是，列表内只能包含 QML 对象，不能包含任何基本类型（如整型、布尔型）。这点与 Json 是不一样的。下面是访问列表的示例：
children:[
text: &textOne&;
text: &textTwo&;
Component.onCompleted:{
for (var i = 0; i & children. i++)
console.log(&text of label &, i, & : &, children[i].text)
&如果你一个列表内只有一个元素，也可以省略方括号。如下所示：
children:Image{}
不过笔者还是建议你始终使用方括号，哪怕其中只有一个元素。
& & 有没有什么问题？有就要说啊，闷在心里会憋坏自己的。好吧，你不说我就说了。在我们访问列表的示例中出现了一个新的内容，Component.onCompleted :{} ，这是什么东东呢？接下来我们就来讲它。
信号处理器
& & 信号处理器，其实等价于 Qt 中的槽。但是我们没有看到类似 C++ 中的明确定义的函数……没错，就是这样，你的的确确只看到了一对花括号！对啦，这是 JavaScript 中的代码块。其实呢，你可以理解为它是一个匿名函数。而 JavaScript 中的函数，其实具名的代码块。函数的好处是你可以在其它地方根据名字调用它，而代码块的好处是，除了定义它的地方，没人能调用它，一句话，它是私有的。代码块就是一系列语句的组合，它的作用就是使语句序列一起执行。
& & 让我们回头再看信号处理器，它的名字还有点儿特别，一般是 on{Signal} 这种形式。比如 Qt Quick 中的 Button 元素有一个信号 clicked() ，那么你要可能会写出这样的代码：
Rectangle {
width: 320;
height: 480;
text: &退出&;
anchors.left: parent.
anchors.leftMargin: 4;
anchors.bottom: parent.
anchors.bottomMargin: 4;
onClicked: {
Qt.quit();
上面的 QML 代码其实已经是一个简单 QML 应用了，这个应用在窗口的左下角放了个退出按钮，当用户点击它时会触发按钮的 clicked() 信号，而我们定义了信号处理器来响应 clicked() 信号——调用 Qt.quit() 退出应用。
& & 你看到了，当信号是 clicked() 时，信号处理器就命名为 onClicked 。就这么简单，以 on 起始后跟信号名字（第一个字母大写）。
& & 在某些情况下使用一个 '.' 符号或分组符号把相关的属性形成一个逻辑组。分组属性可写以下这样：
font.pixelSize: 18;
font.bold:
&也可以这样写：
font { pixelSize: 12; bold: }
其实呢，可以这么理解，font 属性的类型本身是一个对象，这个对象又有 pixelSize / bold /&italic / underline 等等属性。对于类型为对象的属性值，可以使用 &.& 操作符展开对象的每一个成员对其赋值，也可以通过分组符号（一对花括号）把要赋值的成员放在一起给它们赋值。对于后者，其形式就和对象的定义一样了，起码看起来木有区别。所以呢，又可以这么理解上面的示例：
Text 对象内聚合了 font 对象。 OK ，就是聚合。
& & 属性真难搞！到现在还没讲完，不但你烦了，我也快坐不住了。我保证，这是最后一个要点了，不过也是最复杂最难以理解的属性了。对于这种玩意儿，我一向的做法时，不能理解的话就接受，你就当它生来如此，存在即合理，只要学会怎么用它就 OK 了。
& & 在 QML 语言的语法中，有一个附加属性（attached properties）和附加信号处理器（attached signal handlers）的概念，这是附加到一个对象上的额外的属性。从本质上讲，这些属性是由附加类型（attaching type）来实现和提供的，它们可能被附加到另一种类型的对象上。附加属性与普通属性的区别在于，对象的普通属性是由对象本身或其基类（或沿继承层级向上追溯的祖先们）提供的。
& &举个例子，下面的 Item 对象使用了附加属性和附加信号处理器：
import QtQuick 2.0
width: 100;
height: 100;
Keys.enabled:
Keys.onReturnPressed: console.log(&Return key was pressed&);
你看， Item 对象可以访问和设置 Keys.enabled 和 Keys.onReturnPressed 的值。 enabled 是 Keys 对象的一个属性。 onReturnPressed 其实是 Keys 对象的一个信号。对于附加信号处理器，和前面讲到的普通信号处理器又有所不同。普通信号处理器，你先要知道信号名字，然后按照
on{Signal} 的语法来定义信号处理器的名字；而附加信号处理器，你只要通过附加类型名字引用它，把代码块赋值给它即可。
& & 最后说下 Keys 对象，它是 Qt Quick 提供的，专门供 Item 处理按键事件的对象。它定义了很多针对特定按键的信号，比如上面的 onReturnPressed ，还定义了更为普通的 onPressed 和 onReleased 信号，一般地，你可以使用这两个信号来处理按键（请对照 Qt C++ 中的 keyPressEvent 和 keyReleaseEvent 来理解）。它们有一个名字是 event 的 KeyEvent 参数，包含了按键的详细信息。如果一个按键被处理， event.accepted
应该被设置为 true 以免它被继续传递。
& &下面是使用 onPressed 信号的一个示例，它检测了左方向键：
anchors.fill:
Keys.onPressed: {
if (event.key == Qt.Key_Left) {
console.log(&move left&);
event.accepted =
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：592740次
积分：6719
积分：6719
排名：第2738名
原创：54篇
转载：285篇
评论：53条
(3)(1)(2)(1)(1)(4)(2)(1)(2)(2)(4)(4)(1)(2)(5)(16)(4)(7)(16)(10)(13)(5)(10)(10)(8)(2)(6)(19)(4)(9)(3)(2)(5)(3)(3)(15)(46)(7)(8)(4)(22)(4)(7)(2)(11)(1)(4)(6)(3)(9)(1)1345人阅读
Ubuntu OS（147）
移动开发（263）
手机开发（124）
QML（182）
几天以前，有一个开发者问道如何得到中的slider的位置信息。目前在QML中的TextArea中并没有这个信息，那么我们如何得到这个信息呢？
１）通过遍历TextArea中的child来得到这个信息
我们可以通过研究的代码，我们可以发现其中是有一个叫做Flickable的child在里面的。它的里面的contentY含有这个信息，但是可惜的是它不暴露这个信息给我们，那么我们怎么才能得到这个信息呢？
我们设计了如下的测试程序：
import QtQuick 2.0
ponents 1.1
\brief MainView with a Label and Button elements.
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: &mainView&
// Note! applicationName needs to match the &name& field of the click manifest
applicationName: &textareatest.ubuntu&
This property enables the application to change orientation
when the device is rotated. The default is false.
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: 450
height: 600
title: i18n.tr(&Simple&)
id: button
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: textArea.top
text: &Get contentY&
onClicked: {
console.log(&it is clicked!&);
// Get hold all of the children of the textArea
var count = textArea.children.length
console.log(&length: & + count);
for(var i=0; i & i++) {
var contentY = textArea.children[i].contentY;
if ( contentY === undefined) {
console.log(&there is no contentY&);
console.log(&contentY: & + contentY);
TextArea {
id: textArea
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 450
readOnly: true
wrapMode: TextEdit.Wrap
text: &this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n&
onContentHeightChanged: {
console.log(&ContentHeight: & + contentHeight);
console.log(&height: & + height);
onContentYChanged: {
console.log(&contentY: & + contentY);
界面如下：
我们按下“Get contentY”按钮后，可以看到在“Application output”窗口中显示的contentY的值。我们其实使用了如下的句子来实现的：
id: button
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: textArea.top
text: &Get contentY&
onClicked: {
console.log(&it is clicked!&);
// Get hold all of the children of the textArea
var count = textArea.children.length
console.log(&length: & + count);
for(var i=0; i & i++) {
var contentY = textArea.children[i].contentY;
if ( contentY === undefined) {
console.log(&there is no contentY&);
console.log(&contentY: & + contentY);
通过遍历textArea的所有的child，并尝试得到contentY的属性。我们尝试滚动TextArea里的内容，就可以得到不同的contentY的值了。
所有的代码在地址：
2）通过重写Ubuntu的TextArea来实现
这个方法可能会导致在不同的framework上不兼容。我们下载相应平台的TextArea，并创建自己的MyTextArea如下：
* Copyright 2012 Canonical Ltd.
* This prog you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software F version 3.
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
* GNU Lesser General Public License for more details.
* You should have received a copy of the GNU Lesser General Public License
* along with this program.
If not, see &http://www.gnu.org/licenses/&.
import QtQuick 2.0
ponents 1.1
ponents 1.1 as Ubuntu
import &mathUtils.js& as MathUtils
\qmltype TextArea
\ponents 1.1
\ingroup ubuntu
\brief The TextArea item displays a block of editable, scrollable, formatted
The TextArea supports fix-size and auto-expanding modes. In fix-size mode the
content is scrolled when exceeds the boundaries and can be scrolled both horizontally
and vertically, depending on the contentWidth and contentHeight set. The following
example will scroll the editing area both horizontally and vertically:
TextArea {
width: units.gu(20)
height: units.gu(12)
contentWidth: units.gu(30)
contentHeight: units.gu(60)
The auto-expand mode is realized using two properties: autoSize and maximumLineCount.
Setting autoSize will set implicitHeight to one line, and the height will follow
the line count, meaning when lines are added the area will expand and when
removed the area will shrink. The maximumLineCount specifies how much the
editor should be expanded. If this value is set to 0, the area will always
expand vertically to fit the content. When autoSize is set, the contentHeight
property value is ignored, and the expansion only happens vertically.
TextArea {
width: units.gu(20)
height: units.gu(12)
contentWidth: units.gu(30)
autoSize: true
maximumLineCount: 0
TextArea comes with 30 grid-units implicit width and one line height on auto-sizing
mode and 4 lines on fixed-mode. The line size is calculated from the font size and the
ovarlay and frame spacing specified in the style.
\section2 Scrolling and text selection
The input is activated when the tap or mouse is released after being pressed
over the component.
Scrolling the editing area can happen when the size is fixed or in auto-sizing mode when
the content size is bigger than the visible area. The scrolling is realized by swipe
gestures, or by navigating the cursor.
The content can be selected in the following ways:
\li - double tapping/left mouse clicking over the content, when the word that
had been tapped over will be selected
\li - by pressing and dragging the selection cursor over the text input. Note
that there has to be a delay of approx. 200 ms between the press and drag
gesture, time when the input switches from scroll mode to selection mode
The input is focused (activated) upon tap/left mouse button release. The cursor
will be placed at the position the mouse/tap point at release time. If the click
is happening on a selected area, the selection will be cleared. Long press above
a selected area brings up the clipboard context menu. When the long press happens
over a non-selected area, the cursor will be moved to the position and the component
enters in selection mode. The selection mode can also be activated by tapping and
keeping the tap/mouse over for approx 300 ms. If there is a move during this time,
the component enters into scrolling mode. The mode is exited once the scrolling
finishes. During the scrolling mode the selected text is preserved.
\note During text selection all interactive parent Flickables are turned off.
StyledItem {
id: control
implicitWidth: units.gu(30)
implicitHeight: (autoSize) ? internal.minimumSize : internal.linesHeight(4)
property alias contentY: flicker.contentY
// new properties
The property presents whether the TextArea is highlighted or not. By
default the TextArea gets highlighted when gets the focus, so can accept
text input. This property allows to control the highlight separately from
the focused behavior.
property bool highlighted: focus
Text that appears when there is no focus and no content in the component
(hint text).
\qmlproperty string placeholderText
property alias placeholderText: hint.text
This property contains the text that is displayed on the screen. May differ
from the text property value when TextEdit.RichText format is selected.
\qmlproperty string displayText
readonly property alias displayText: internal.displayText
The property drives whether text selection should happen with the mouse or
not. The default value is true.
\qmlproperty bool selectByMouse
property alias selectByMouse: editor.selectByMouse
\deprecated
This property specifies whether the text area expands following the entered
text or not. The default value is false.
The property is deprecated, use autoSize instead
property bool autoExpand
/*! \internal */
onAutoExpandChanged: console.debug(&WARNING: autoExpand deprecated, use autoSize instead.&)
This property specifies whether the text area sizes following the line count
or not. The default value is false.
property bool autoSize: false
The property holds the maximum amount of lines to expand when autoSize is
enabled. The value of 0 does not put any upper limit and the control will
expand forever.
The default value is 5 lines.
property int maximumLineCount: 5
// altered TextEdit properties
The property folds the width of the text editing content. This can be equal or
bigger than the frame width minus the spacing between the frame and the input
area defined in the current theme. The default value is the same as the visible
input area's width.
property real contentWidth: control.width - 2 * internal.frameSpacing
The property folds the height of the text editing content. This can be equal or
bigger than the frame height minus the spacing between the frame and the input
area defined in the current theme. The default value is the same as the visible
input area's height.
property real contentHeight: control.height - 2 * internal.frameSpacing
The property overrides the default popover of the TextArea. When set, the
TextArea will open the given popover instead of the default one defined.
The popover can either be a component or a URL to be loaded.
property var popover
// forwarded properties
Whether the TextArea should gain active focus on a mouse press. By default this
is set to true.
\qmlproperty bool activeFocusOnPress
property alias activeFocusOnPress: editor.activeFocusOnPress
This property specifies a base URL which is used to resolve relative URLs within
the text. The default value is the url of the QML file instantiating the TextArea
\qmlproperty url baseUrl
property alias baseUrl: editor.baseUrl
Returns true if the TextArea is writable and the content of the clipboard is
suitable for pasting into the TextArea.
\qmlproperty bool canPaste
property alias canPaste: editor.canPaste
Returns true if the TextArea is writable and there are undone operations that
can be redone.
\qmlproperty bool canRedo
property alias canRedo: editor.canRedo
Returns true if the TextArea is writable and there are previous operations
that can be undone.
\qmlproperty bool canUndo
property alias canUndo: editor.canUndo
The text color.
\qmlproperty color color
property alias color: editor.color
The delegate for the cursor in the TextArea.
If you set a cursorDelegate for a TextArea, this delegate will be used for
drawing the cursor instead of the standard cursor. An instance of the delegate
will be created and managed by the text edit when a cursor is needed, and
the x and y properties of delegate instance will be set so as to be one pixel
before the top left of the current character.
Note that the root item of the delegate component must be a QQuickItem or
QQuickItem derived item.
property Component cursorDelegate: null
The position of the cursor in the TextArea.
\qmlproperty int cursorPosition
property alias cursorPosition: editor.cursorPosition
The rectangle where the standard text cursor is rendered within the text
edit. Read-only.
The position and height of a custom cursorDelegate are updated to follow
the cursorRectangle automatically when it changes. The width of the delegate
is unaffected by changes in the cursor rectangle.
\qmlproperty rectangle cursorRectangle
property alias cursorRectangle: editor.cursorRectangle
If true the text edit shows a cursor.
This property is set and unset when the text edit gets active focus, but it
can also be set directly (useful, for example, if a KeyProxy might forward
keys to it).
\qmlproperty bool cursorVisible
property alias cursorVisible: editor.cursorVisible
Presents the effective horizontal alignment that can be different from the one
specified at horizontalAlignment due to layout mirroring.
\qmlproperty enumeration effectiveHorizontalAlignment
property alias effectiveHorizontalAlignment: editor.effectiveHorizontalAlignment
The property holds the font used by the editing.
\qmlproperty font font
property alias font: editor.font
Sets the horizontal alignment of the text within the TextAre item's width
and height. By default, the text alignment follows the natural alignment
of the text, for example text that is read from left to right will be
aligned to the left.
Valid values for effectiveHorizontalAlignment are:
\li TextEdit.AlignLeft (default)
\li TextEdit.AlignRight
\li TextEdit.AlignHCenter
\li TextEdit.AlignJustify
\qmlproperty enumeration horizontalAlignment
property alias horizontalAlignment: editor.horizontalAlignment
This property holds whether the TextArea has partial text input from an
input method.
While it is composing an input method may rely on mouse or key events
from the TextArea to edit or commit the partial text. This property can
be used to determine when to disable events handlers that may interfere
with the correct operation of an input method.
\qmlproperty bool inputMethodComposing
property alias inputMethodComposing: editor.inputMethodComposing
Provides hints to the input method about the expected content of the text
edit and how it should operate.
The value is a bit-wise combination of flags or Qt.ImhNone if no hints are set.
Flags that alter behaviour are:
\li Qt.ImhHiddenText - Characters should be hidden, as is typically used when entering passwords.
\li Qt.ImhSensitiveData - Typed text should not be stored by the active input method in any persistent storage like predictive user dictionary.
\li Qt.ImhNoAutoUppercase - The input method should not try to automatically switch to upper case when a sentence ends.
\li Qt.ImhPreferNumbers - Numbers are preferred (but not required).
\li Qt.ImhPreferUppercase - Upper case letters are preferred (but not required).
\li Qt.ImhPreferLowercase - Lower case letters are preferred (but not required).
\li Qt.ImhNoPredictiveText - Do not use predictive text (i.e. dictionary lookup) while typing.
\li Qt.ImhDate - The text editor functions as a date field.
\li Qt.ImhTime - The text editor functions as a time field.
Flags that restrict input (exclusive flags) are:
\li Qt.ImhDigitsOnly - Only digits are allowed.
\li Qt.ImhFormattedNumbersOnly - Only number input is allowed. This includes decimal point and minus sign.
\li Qt.ImhUppercaseOnly - Only upper case letter input is allowed.
\li Qt.ImhLowercaseOnly - Only lower case letter input is allowed.
\li Qt.ImhDialableCharactersOnly - Only characters suitable for phone dialing are allowed.
\li Qt.ImhEmailCharactersOnly - Only characters suitable for email addresses are allowed.
\li Qt.ImhUrlCharactersOnly - Only characters suitable for URLs are allowed.
\li Qt.ImhExclusiveInputMask - This mask yields nonzero if any of the exclusive flags are used.
\qmlproperty enumeration inputMethodHints
property alias inputMethodHints: editor.inputMethodHints
Returns the total number of plain text characters in the TextArea item.
As this number doesn't include any formatting markup it may not be the
same as the length of the string returned by the text property.
This property can be faster than querying the length the text property
as it doesn't require any copying or conversion of the TextArea's internal
string data.
\qmlproperty int length
property alias length: editor.length
Returns the total number of lines in the TextArea item.
\qmlproperty int lineCount
property alias lineCount: editor.lineCount
Specifies how text should be selected using a mouse.
\li TextEdit.SelectCharacters - The selection is updated with individual characters. (Default)
\li TextEdit.SelectWords - The selection is updated with whole words.
This property only applies when selectByMouse is true.
\qmlproperty enumeration mouseSelectionMode
property alias mouseSelectionMode: editor.mouseSelectionMode
Whether the TextArea should keep the selection visible when it loses active
focus to another item in the scene. By default
\qmlproperty enumeration persistentSelection
property alias persistentSelection: editor.persistentSelection
Whether the user can interact with the TextArea item. If this property is set
to true the text cannot be edited by user interaction.
By default this property is false.
\qmlproperty bool readOnly
property alias readOnly: editor.readOnly
Override the default rendering type for this component.
Supported render types are:
\li Text.QtRendering - the default
\li Text.NativeRendering
Select Text.NativeRendering if you prefer text to look native on the target
platform and do not require advanced features such as transformation of the
text. Using such features in combination with the NativeRendering render type
will lend poor and sometimes pixelated results.
\qmlproperty enumeration renderType
property alias renderType: editor.renderType
This read-only property provides the text currently selected in the text edit.
\qmlproperty string selectedText
property alias selectedText: editor.selectedText
The selected text color, used in selections.
\qmlproperty color selectedTextColor
property alias selectedTextColor: editor.selectedTextColor
The text highlight color, used behind selections.
\qmlproperty color selectionColor
property alias selectionColor: editor.selectionColor
The cursor position after the last character in the current selection.
This property is read-only. To change the selection, use select(start, end),
selectAll(), or selectWord().
See also selectionStart, cursorPosition, and selectedText.
\qmlproperty int selectionEnd
property alias selectionEnd: editor.selectionEnd
The cursor position before the first character in the current selection.
This property is read-only. To change the selection, use select(start, end),
selectAll(), or selectWord().
See also selectionEnd, cursorPosition, and selectedText.
\qmlproperty int selectionStart
property alias selectionStart: editor.selectionStart
The text to display. If the text format is AutoText the text edit will
automatically determine whether the text should be treated as rich text.
This determination is made using Qt::mightBeRichText().
\qmlproperty string text
property alias text: editor.text
The way the text property should be displayed.
\li TextEdit.AutoText
\li TextEdit.PlainText
\li TextEdit.RichText
The default is TextEdit.PlainText. If the text format is TextEdit.AutoText
the text edit will automatically determine whether the text should be treated
as rich text. This determination is made using Qt::mightBeRichText().
\qmlproperty enumeration textFormat
property alias textFormat: editor.textFormat
Sets the vertical alignment of the text within the TextAres item's width
and height. By default, the text alignment follows the natural alignment
of the text.
Valid values for verticalAlignment are:
\li TextEdit.AlignTop (default)
\li TextEdit.AlignBottom
\li TextEdit.AlignVCenter
\qmlproperty enumeration verticalAlignment
property alias verticalAlignment: editor.verticalAlignment
Set this property to wrap the text to the TextEdit item's width. The text
will only wrap if an explicit width has been set.
\li TextEdit.NoWrap - no wrapping will be performed. If the text contains
insufficient newlines, then implicitWidth will exceed a set width.
\li TextEdit.WordWrap - wrapping is done on word boundaries only. If a word
is too long, implicitWidth will exceed a set width.
\li TextEdit.WrapAnywhere - wrapping is done at any point on a line, even
if it occurs in the middle of a word.
\li TextEdit.Wrap - if possible, wrapping occur otherwise
it will occur at the appropriate point on the line, even in the middle of a word.
The default is TextEdit.Wrap
\qmlproperty enumeration wrapMode
property alias wrapMode:editor.wrapMode
// signals
This handler is called when the user clicks on a link embedded in the text.
The link must be in rich text or HTML format and the link string provides
access to the particular link.
signal linkActivated(string link)
// functions
Copies the currently selected text to the system clipboard.
function copy()
editor.copy();
Moves the currently selected text to the system clipboard.
function cut()
editor.cut();
Removes active text selection.
function deselect()
editor.deselect();
Inserts text into the TextArea at position.
function insert(position, text)
editor.insert(position, text);
Returns the text position closest to pixel position (x, y).
Position 0 is before the first character, position 1 is after the first
character but before the second, and so on until position text.length,
which is after all characters.
function positionAt(x, y)
return editor.positionAt(x, y);
Returns true if the natural reading direction of the editor text found
between positions start and end is right to left.
function isRightToLeft(start, end)
return editor.isRightToLeft(start, end)
Moves the cursor to position and updates the selection according to the
optional mode parameter. (To only move the cursor, set the cursorPosition
property.)
When this method is called it additionally sets either the selectionStart
or the selectionEnd (whichever was at the previous cursor position) to the
specified position. This allows you to easily extend and contract the selected
text range.
The selection mode specifies whether the selection is updated on a per character
or a per word basis. If not specified the selection mode will default to whatever
is given in the mouseSelectionMode property.
function moveCursorSelection(position, mode)
if (mode === undefined)
editor.moveCursorSelection(position, mouseSelectionMode);
editor.moveCursorSelection(position, mode);
\preliminary
Places the clipboard or the data given as parameter into the text input.
The selected text will be replaces with the data.
function paste(data) {
if ((data !== undefined) && (typeof data === &string&) && !editor.readOnly) {
var selTxt = editor.selectedT
var txt = editor.
var pos = (selTxt !== &&) ? txt.indexOf(selTxt) : editor.cursorPosition
if (selTxt !== &&) {
editor.text = txt.substring(0, pos) + data + txt.substr(pos + selTxt.length);
editor.text = txt.substring(0, pos) + data + txt.substr(pos);
editor.cursorPosition = pos + data.
editor.paste();
Returns the rectangle at the given position in the text. The x, y, and height
properties correspond to the cursor that would describe that position.
function positionToRectangle(position)
return editor.positionToRectangle(position);
Redoes the last operation if redo is \l{canRedo}{available}.
function redo()
editor.redo();
Causes the text from start to end to be selected.
If either start or end is out of range, the selection is not changed.
After calling this, selectionStart will become the lesser and selectionEnd
will become the greater (regardless of the order passed to this method).
See also selectionStart and selectionEnd.
function select(start, end)
editor.select(start, end);
Causes all text to be selected.
function selectAll()
editor.selectAll();
Causes the word closest to the current cursor position to be selected.
function selectWord()
editor.selectWord();
Returns the section of text that is between the start and end positions.
The returned text will be formatted according the textFormat property.
function getFormattedText(start, end)
return editor.getFormattedText(start, end);
Returns the section of text that is between the start and end positions.
The returned text does not include any rich text formatting. A getText(0, length)
will result in the same value as displayText.
function getText(start, end)
return editor.getText(start, end);
Removes the section of text that is between the start and end positions
from the TextArea.
function remove(start, end)
return editor.remove(start, end);
Undoes the last operation if undo is \l{canUndo}{available}. Deselects
any current selection, and updates the selection start to the current
cursor position.
function undo()
editor.undo();
/*!\internal - to remove warnings */
Component.onCompleted: {
editor.linkActivated.connect(control.linkActivated);
// activation area on mouse click
// the editor activates automatically when pressed in the editor control,
// however that one can be slightly spaced to the main control area
MouseArea {
anchors.fill: parent
enabled: internal.frameSpacing & 0
acceptedButtons: Qt.LeftButton | Qt.RightButton
// activate input when pressed on the frame
preventStealing: false
Ubuntu.Mouse.forwardTo: [inputHandler]
//internals
opacity: enabled ? 1.0 : 0.3
/*!\internal */
onVisibleChanged: {
if (!visible)
control.focus =
LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft
LayoutMirroring.childrenInherit: true
QtObject {
id: internal
// public property locals enabling aliasing
property string displayText: editor.getText(0, editor.length)
property real frameSpacing: control.__styleInstance.frameSpacing
property real minimumSize: units.gu(4)
function linesHeight(lines)
var lineHeight = editor.font.pixelSize * lines + inputHandler.lineSpacing * lines
return lineHeight + 2 * frameS
function frameSize()
if (control.autoSize) {
var max = (control.maximumLineCount &= 0) ?
control.lineCount :
Math.min(control.maximumLineCount, control.lineCount);
control.height = linesHeight(MathUtils.clamp(control.lineCount, 1, max));
// grab Enter/Return keys which may be stolen from parent components of TextArea
// due to forwarded keys from TextEdit
Keys.onPressed: {
if ((event.key === Qt.Key_Enter) || (event.key === Qt.Key_Return)) {
if (editor.textFormat === TextEdit.RichText) {
// FIXME: use control.paste(&&br /&&) instead when paste() gets sich text support
editor.insert(editor.cursorPosition, &&br /&&);
control.paste(&\n&);
event.accepted =
event.accepted =
Keys.onReleased: event.accepted = (event.key === Qt.Key_Enter) || (event.key === Qt.Key_Return)
// holding default values
Label { id: fontHolder }
fill: parent
margins: internal.frameSpacing
// hint is shown till user types something in the field
visible: (editor.getText(0, editor.length) == &&) && !editor.inputMethodComposing
color: Theme.palette.normal.backgroundText
fontSize: &medium&
elide: Text.ElideRight
wrapMode: Text.WordWrap
//scrollbars and flickable
Scrollbar {
id: rightScrollbar
flickableItem: flicker
Scrollbar {
id: bottomScrollbar
flickableItem: flicker
align: Qt.AlignBottom
Flickable {
id: flicker
objectName: &input_scroller&
fill: parent
margins: internal.frameSpacing
clip: true
contentWidth: editor.paintedWidth
contentHeight: editor.paintedHeight
// do not allow rebounding
boundsBehavior: Flickable.StopAtBounds
// Images are not shown when text contains &img& tags
// bug to watch: https://bugreports.qt-project.org/browse/QTBUG-27071
TextEdit {
objectName: &text_input&
readOnly: false
id: editor
focus: true
width: control.contentWidth
height: Math.max(control.contentHeight, editor.contentHeight)
wrapMode: TextEdit.WrapAtWordBoundaryOrAnywhere
mouseSelectionMode: TextEdit.SelectWords
selectByMouse: true
activeFocusOnPress: true
cursorDelegate: TextCursor {
handler: inputHandler
color: control.__styleInstance.color
selectedTextColor: Theme.palette.selected.foregroundText
selectionColor: Theme.palette.selected.selection
font.pixelSize: FontUtils.sizeToPixels(&medium&)
// forward keys to the root element so it can be captured outside of it
// as well as to InputHandler to handle PageUp/PageDown keys
Keys.forwardTo: [control, inputHandler]
// autosize handling
onLineCountChanged: internal.frameSize()
// input selection and navigation handling
Ubuntu.Mouse.forwardTo: [inputHandler]
InputHandler {
id: inputHandler
anchors.fill: parent
main: control
input: editor
flickable: flicker
frameDistance: Qt.point(flicker.x, flicker.y)
style: Theme.createStyleComponent(&TextAreaStyle.qml&, control)
这里我们加入了：
property alias contentY: flicker.contentY
通过这样的方法，我们可以使得flicker的contentY的属性得以暴露，并被外面main.qml所使用：
import QtQuick 2.0
ponents 1.1
\brief MainView with a Label and Button elements.
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: &mainView&
// Note! applicationName needs to match the &name& field of the click manifest
applicationName: &textareatest.ubuntu&
This property enables the application to change orientation
when the device is rotated. The default is false.
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
useDeprecatedToolbar: false
width: 450
height: 600
title: i18n.tr(&Simple&)
id: button
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: textArea.top
text: &Get contentY&
onClicked: {
console.log(&it is clicked!&);
// Get hold all of the children of the textArea
var count = textArea.children.length
console.log(&length: & + count);
for(var i=0; i & i++) {
var contentY = textArea.children[i].contentY;
if ( contentY === undefined) {
console.log(&there is no contentY&);
console.log(&contentY: & + contentY);
MyTextArea {
id: textArea
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
height: 450
readOnly: true
wrapMode: TextEdit.Wrap
text: &this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n
this is cool!\n&
onContentHeightChanged: {
console.log(&ContentHeight: & + contentHeight);
console.log(&height: & + height);
onContentYChanged: {
console.log(&contentY: & + contentY);
当我们滚动时，就可以看见contentY的属性的变化。
这个工程的代码在：
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：302173次
积分：6231
积分：6231
排名：第3140名
原创：322篇
评论：235条
(7)(8)(9)(11)(4)(4)(3)(9)(6)(15)(8)(26)(4)(8)(1)(13)(6)(17)(18)(16)(23)(30)(16)(7)(2)(4)(8)(8)(11)(12)(18)}