QML元素介绍（一)

学过的元素会持续更新的,算是简单翻译官方文档吧这里是基于 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.ElideRight
effectiveHorizontalAlignment: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.AlignVCenter
clip: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.NativeRending
style:enumeration	设定文本样式,有以下可选值 1.Text.Normal –default 2.Text.Outline 3.Text.Sunken 4.Text.Raised
styleColor: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 size
minimumPixelSize: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	用户输入前占位字符串

猜你喜欢