学过的元素会持续更新的,算是简单翻译官方文档吧 这里是基于 QtQuick 2.7 QtQuick.Controls 2.3的
Text
- (Properies)属性
属性:type 含义 advance:size 文本流下一字符相对上一字符的相对偏移量 baseUrl:url 用于指定解析文本相对URL的基本URL topPadding:real
bbottomPadding:real
leftPadding:real
rightPadding:real
padding:real用于指定内容周围的填充空间,这段空间是留白的 color:color 用于指定文本的颜色 contentWidth:real
contentHeight:real返回文本内容的宽度和高度(只读属性) elide:enumeration 设置被省略的部分当文本超过容器宽度有以下可选值
1.Text.ElideNone –default
2.Text.ElideLeft
3.Text.ElideMiddle
4.Text.ElideRighteffectiveHorizontalAlignment:enumeration
effectiveVerticalAlignment:enumeration
horizontalAliment
verticalAlignment:enumeration用于指定文本水平和垂直居中方式有以下可选值
水平:1.Text.AlignLeft
2.Text.AlignRight
3.Text.AlignHCenter
4.Text.AlignJustify
垂直:1.Text.AlignTop
2.Text.AlignBottom
3.Text.AlignVCenterclip:bool 用于判断该文本是否已经被剪切 hoveredLink:string 当用户鼠标悬停在上面时显示的链接字符串(当文本内容存在链接标签才存在)(只读属性) lineCount:int 返回文本行数 lineHeightMode:enumeration 决定了行高的模式,有如下可选值
1.Text.ProportionalHeight(成比例的高)
2.Text.FixedHeight(固定的高)lineHeight:real 行高,数值含义取决于lineHeightMode linkColor:color 用于指定文本中链接的颜色 renderType:enumeration 文本渲染方式.有两个可选值
1.Text.QtRendering
2.Text.NativeRendingstyle:enumeration 设定文本样式,有以下可选值
1.Text.Normal –default
2.Text.Outline
3.Text.Sunken
4.Text.RaisedstyleColor:color 用于指定style修饰的颜色 text:string 指定文本的内容 textFormat 指定文本的格式有以下可选值
1.Text.AutoText –default
2.Text.PalinText –纯文本 2.Text.StyledText –可在文本里用文本指定样式3.Text.RichText –富文本(有部分属性会在指定富文本时失效)truncated:bool 返回文本是否已经被截取由于elide和 maximumLineCount限制 wrapMode:enumeration 文本被容器的包裹方式,只有文本容器有明确宽度指定,包裹方式才生效,有以下可选值
1.Text.NoWrap –default 内容可能会超出contentWidth
2.Text.WordWrap –确保完整的单词在一行被包裹 内容可能会超出contentWidth
3.Text.WrapAnyWhere –可以在一行的任意位置进行包裹即使是一个单词
4.Text.Wrap –如果有可能的话会包裹在单词边界maximumLineCout:int 最大行数 fontSizeMode:enumeration 决定了文本字体大小如何呈现,有如下可选值
1.Text.FixedSize –default通过font.pixelSize font.pointSize指定的固定大小
2.Text.HorizontalFit –没有被包裹的情况下,使用适合Item Width的最大宽度
3.Text.VerticalFit –使用适合item Height的最大高度
4.Text.Fit –根据Item width height使用适合item size的font sizeminimumPixelSize:int
minimumPointSize:int指定fontSizeMode决定的字体最小大小 font系列属性 … 信号(Signal)
lineLaidOut(Object line):当文本行布局时可以获得其对象,对其进行设置
- 行属性包括:x,y number(read-only),width,height
linkActived(string link):当用户点击文本中的链接发出的信号
- linkHovered(string link):当用户鼠标悬浮在链接上发出的信号
Demo
import QtQuick 2.8
Rectangle {
width:300;
height:300;
Text {
text:"Marco Say <a href=\"http://www.thegroly.xin\">Hello,World</a>";
textFormat:Text.StyledText;
linkColor:"green";
lineHeightMode:Text.FixedHeight;
lineHeight:90;
style:Text.Outline;
renderType:Text.NativeRendering;
styleColor:"cyan";
font.pointSize:40;
color:"red";
onLinkActivated:function(link) {
console.log("用户点击了链接: " + link);
}
onLinkHovered:function(link) {
console.log("用户鼠标悬停在链接: " + link);
}
onLineLaidOut:function(line) {
console.log("行号: " + line.number + "位置 x: " + line.x + " y: " + line.y);
line.x += 30;
}
}
}
QtQuick Controls 2.x开始把原来button的内容都集成到AbstractButton里面了,所以这里先来研究下AbstractButton
- AbstractButton
属性:type | 含义 |
---|---|
action:Action | 使button绑定动作 |
autoExclusive:bool | 使相同父元素的button其中一个checked为ture时其他button checked自动为false,对于ButtonGroup无效 |
checkable:bool | 表明该种button是否能通过点击表示切换状态 |
checked:bool | 当checkable为真时,则用户可以通过点击表示button状态,可以通过checked读取或设定该状态值 |
display:enumeration | 表示该按钮的展示方式,有三个可选值 1.AbstractButton.IconOnly –只显示图标 2.AbstractButton.TextOnly –只显示文本 3.AbstractButton.TextBesideIcon –text和Icon各占一边 |
down:bool | 此值保存当按钮按下时,是否在视觉上是由上向下 |
icon:icon.group | 给按钮设置图标,图标包含以下属性 1.icon.name(string) –表示图标的相关主题名称,如果在系统中找到该图标则优先使用该图标,未找到则使用icon.source 2.icon.source(url) –通过url找到图标的资源 icon.width icon.height icon.color –图标的宽 高 颜色 |
indicator:Item | 设定指示器控件 |
pressed:bool | 是否被点击了(只读属性) |
text:string | 按钮的文本内容 |
- 信号(Signal)
- void canceled():鼠标点击后,鼠标不在按钮内发出该信号
- void clicked():鼠标或者触摸点击后发出的信号
- void doubleClicked():双击后发出该信号
- void pressAndHold():一直按着该按钮
- void pressed():用户按下按钮并释放发出该信号
- void released():用户释放按钮发出的信号
- vooid toggled():当用户交互式的切换checkable按钮时发出的信号
import QtQuick 2.7
import QtQuick.Controls 2.3
Rectangle {
width:400;
height:400;
anchors.centerIn:parent;
Row {
spacing:20;
padding:10;
Button {
text:"红";
autoExclusive:true;
checkable:true;
checked:true;
onToggled:function() {
console.log("当前状态已切换" + checked);
}
}
Button {
text:"绿";
autoExclusive:true;
checkable:true;
checked:false;
onToggled:function() {
console.log("当前checked已切换" + checked);
}
}
}
Button {
text:"登录";
checkable:true;
checked:true;
anchors.centerIn:parent;
down:false;
autoRepeat:false;
flat:true;
indicator:Rectangle {
width:10;
height:20;
color:"red";
}
onCanceled:function() {
console.log("撤销操作");
}
onClicked:function() {
console.log("用户点击了");
}
onPressed:function() {
console.log("用户点击并释放了");
}
onReleased:function() {
console.log("用户释放了");
}
onToggled:function() {
console.log("用户切换了checked状态");
}
onDoubleClicked:function() {
console.log("用户双击了按钮");
}
onPressAndHold:function() {
console.log("用户长按了");
}
}
}
QtQuick 2.x后需要修改样式就用Controls的背景属性
- Image
- 属性(Properties)
属性:type | 含义 |
---|---|
asynchroous:bool | 图片加载时是否采用异步方式通过分离的线程加载,默认为false,当要显示的图片较大,采用异步方式比较好(网络图片总是异步的) |
autoTransform:bool | 设定图片是否自动转换成元数据 默认为false |
cache:bool | 设定图片是否缓存,默认为true |
fillMode:enumeration | 设定图片显示模式,有如下可选值 1.Image.Stretch –图片自适应 2.Image.PreserveAspectFit –图片均匀缩放,不需要裁剪 3.Image.PreserveAspectCrop –图片自动裁剪 4.Image.Tile –图片是水平和垂直方向复制的 5.Image.TileVertically –图片是水平方向复制的 6.Image.TileHorizontally –图片是垂直方向复制的 7.Iamge.Pad –图片不经过转换 |
verticalAlignment:enumeration horizontalAlignment:enumeration |
图片对齐方式默认是居中的,有如下可选值 水平:1.Image.AlignLeft 2.Image.AlignRight 3.Image.AlignVCenter 垂直:1.Image.AlignTop 2.Image.AlignBottom 3.Image.AlignHCenter |
mirror:bool | 设定图片是否水平倒置,默认是false |
mipmap:bool | 是否使用mipmap过滤,在缩放时会有好的视觉效果,但有一些性能损失 |
paintedWidth:real paintedHeight:real |
保存实际绘制的图片宽 高 |
progress:real | 保存了图片加载的进度,0.0(start)-1.0(finished) |
smooth:bool | 图片是否选用平滑的方式显示 |
source:url | 图片资源url |
sourceSize:QSize | 加载资源图片的实际大小 |
status:enumeration | 保存了图片的加载状态,有如下值 1.Image.Null –没有图片被设置 2.Image.Ready –图片已经被加载了3.Image.Loading –图片正在被加载 4.Image.Error –图片加载出现错误 |
Demo
import QtQuick 2.7
Rectangle {
width:800;
height:500;
Row {
spacing:20;
padding:20;
Image {
asynchronous:true;
cache:true;
source:"./cin.png";
fillMode:Image.Stretch;
}
Image {
asynchronous:true;
cache:true;
source:"./cin.png"
fillMode:Image.PreserveAspectFit;
}
Image {
asynchronous:true;
cache:true;
source:"./cin.png";
fillMode:Image.PreserveAspectCrop;
}
Image {
asynchronous:true;
cache:true;
source:"./cin.png";
fillMode:Image.Tile;
width:300;
height:600;
verticalAlignment:Image.AlignRight;
}
}
}
字体算是基本元素,考虑到好多组件都有它,不如直接先学它吧
- font
属性:type | 含义 |
---|---|
font.family:string | 字体族 |
font.bold:bool | 字体是否是粗体 |
font.italic:bool | 字体是否是斜体 |
font.underline:bool | 字体是否有下划线 |
font.pointSize:real | 基于点的字体大小 |
font.pixelSize:int | 基于像素的大小(font.pointSize和font.pixelSize同时指定时,优先考虑font.pixelSize |
font.weight:enumeration | 字体宽度,可有以下可选值 1.Font.Thin 2,Font.Light 3.Font.ExtraLight 4.Font.Normal –default 5.Font.Medium 6.Font.DemiBold7.Font.Bold 8.Font.ExtraBold 9.Font.Black |
font.strikeout:bool | 字体是否有strikeout风格 |
font.capitalization:enumeration | 字体渲染方式,有一下可选值 1.Font.MixedCase –正常渲染的方式 2.Font.AllUppercase –字母全大写 3.Font.AllLowercase –字母全小写 4.Font.SmallCaps –小容量方式渲染 5.Font.Capitalize –每个单词首字母大写 |
font.letterSpacing:real | 增加或减小字母的像素间距 |
font.wordSpacing:real | 增大或减小单词的间距 |
font.kerning:boo font.preferShaping:bool |
开启字体的整型 |
- TextInput
属性:type | 含义 |
---|---|
acceptable:bool | 表示是否接受文本输入(只读属性) |
activeFocusOnPress:bool | 鼠标点击时是否获得焦点(默认为true) |
autoScroll:bool | 当文本宽度超过容器宽度时是否支持滚动,默认为 |
truetopPadding:real bottomPadding:real leftPadding:real rightPadding:real padding:real |
容器内边距 |
canPaste:bool canRedo:bool canUndo:bool |
是否能够粘帖,重复,撤销(只读属性) |
color:color | 文本颜色 |
contentWidth:real contentHeight:real |
内容宽度,高度 |
cursorDelegate:Component | 光标形状 |
cursorPosition:int | 输入框中光标当前位置 |
cursorRectangle:Rectangle | 输入框中光标框(只读属性) |
cursorVisible:bool | 光标是否可见 |
displayText:string | 输入框中的文本,(只读属性) |
echoMode:enumeration | 输入框回显模式,有以下可选值 1.TextInput.Normal –一模一样的回显 2.TextInput.Password –密码回显模式3.TextInput.NoEcho –无回显 4.TextInput.PasswordEchoOnEdit –编辑完密码回显 |
effectiveHorizontalAlignment:enumeration horizontalAlignment |
有效对齐方式,有以下可选值 水平1.TextInput.AlignLeft –左对齐 2.TextInput.AlignRight –右对齐 3.TextInput.AlignVCenter –水平居中对齐 垂直:1.TextInput.AlignTop –顶对齐 2.TextInput.AlignBottom –底部对齐 3.TextInput.AlignHCenter –垂直居中对齐(垂直的用anchors,如要多行应该换别的控件,你不想自找麻烦的话) |
inputMask:string | 可以设置输入掩码来限制文本输入内容 |
inputMethodComposing:bool | 限制是否允许从输入法输入文本 |
inputMethodHints:enumeration | 提供有关输入文本的预期内容以及如何操作的提示方法,有以下可选值 1.Qt.ImhHiddenText –字符被隐藏了,echoMode设置为TextInput.Password会设置成该值 2.Qt.ImhSensitiveData –输入的文本不应该存在于某字典里 3.Qt.ImhNoAutoUppercase –输入法不应该切换到大写 4.Qt.ImhPreferNumers –优先数字 5.Qt.ImhPreferUppercase –优先大写 6.Qt.ImhPreferLowercase –优先小写6.Qt.ImhNoPredictiveText –不使用可预测的字符…..省略 |
length:int | 返回输入字符的长度 |
maximumLength:int | 允许最大输入多少字符 |
selectByMouse:bool | 是否允许鼠标选择字符 |
selectedText:string | 被鼠标选择的文本 |
selectedTextColor:color | 被鼠标选中文本高亮颜色 |
selectionColor:color | 选择器颜色 |
selectionStart:int selectionEnd:int |
选择器开始和结束位置 |
text:string | 输入框的文本 |
validtor:Validtor | 设定验证器 |
wrapMode:enumeration | 包裹模式,有以下可选值 1.TextInput.NoWrap –无包裹 2.TextInput.WordWrap –优先确保单词的完整性包裹 3.TextInput.WrapAnywhere –包裹任何地方 4.TextInput.Wrap –包裹 |
passwordCharacter:string | 输入代表密码的字符 |
passwordMaskDelay:int | 设置密码字符可视化延迟多少millisecond |
persistentSelection:bool}选择区域在失去焦点是否还保持
predictText:string|包含了部分方法提供的文本(只读)
readOnly:bool|设置文本是否可改
下面来看看TextField,它是继承于TextInput的
QtQuick.Controls 2.x部分
TextField
属性:type | 用法 |
---|---|
background:Item | 定义文本区域背景 |
focusReason:enumeration | 焦点最近改变的原因,有以下可选值 1.Qt.MouseFocusReason 2.Qt.TabFocusReason 3.Qt.BacktabReason 4.Qt.ActiveWindowFocusReason 5.Qt.PopupFocusReason 6.Qt.ShortcutFocusReason7.Qt.MenuBarFocusReason 8.Qt.OtherFocusReasoon |
hoverEnabled:bool | 表明是否接受hover事件(默认为false) |
hovered:bool | 表明是否存在鼠标悬停 |
palette:palette | 设置当前调色板 |
palceholderText:string | 用户输入前占位字符串 |