盛世清平~Qt quick学习笔记_15

行编辑（TextInput与TextField）

TextInput

用于编辑一行文本，类似于QlineEdit

validator或inputMask对输入文本做范围限制，echoMode,密码框效果

属性：

font：

cursor：光标

cursorDelegate制定外观
密码：echoMode的属性设置为TextInput.passWord\ TextInput.PaddwordEcho OnEdit\ TextInput.NoEcho
displayText属性：保存显示给用户的文本
text属性：实际输入的文本
如果设定passwordCharacter为“*”
displayText属性内保存的就是一串“*”
 
其默认为：TextInput.Normal输入什么显示什么

 
inputMask是个字符串：限制可以输入的字符
掩码串内包含允许的字符和分隔符，后面还可以跟一个可选的分号，以及一个用于补空白的字符
例如：2014-01-30--0000-00-00

文本块（TextEdit与 TextArea）
 TextEdit：多行文本编辑框
属性：
textDocument:结合QSyntaxHighlight实现语法高亮
textFormat:指定文本格式-->
纯文本：TextEdit.PlainText（默认）
富文本：TextEdit.RichText
自动检测：TextEdit.AutoText
lineCount：编辑框内的文本行数
linkActivated:用户点击文本中内嵌的链接时触发
linkHovered:信号在鼠标悬停在文本内嵌的链接上方时触发

import QtQuick 2.2

import QtQuick.Window 2.2

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.2

Window {

visible: true

Rectangle{

width:320;

height:300;

color:"#d0d0d0";

Rectangle{

id:resultHolder;

color:"#a0a0a0";

width:220;

height:80;

anchors.centerIn: parent;

visible: false;//

z:2;

opacity: 0.8;//

border.width: 2;

border.color: "#808080";

radius: 8;

Text{

id:result;

anchors.fill:parent;

anchors.margins: 5;

font.pointSize:16;

color:"blue";

font.bold:true;

wrapMode: Text.Wrap;

}

}

Text{

id:notation;

text:"Please select the best love movies:"

anchors.top:parent.top;

anchors.topMargin: 16;

anchors.left:parent.left;

anchors.leftMargin: 8;

}

Component{

id:checkStyle;

CheckBoxStyle{

indicator:Rectangle{

implicitWidth: 14;

implicitHeight: 14;

border.color: control.hovered?"darkblue":"gray";

border.width: 1;

Canvas{

anchors.fill: parent;

anchors.margins: 3;

visible: control.checked;

onPaint: {

150ef
var ctx = getContext("2d");

ctx.save();

ctx.strokeStyle = "#C00020";

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(width,height);

ctx.moveTo(0,height);

ctx.lineTo(width,0);

ctx.stroke();

ctx.restore();

}

}

}

label: Text{

color:control.checked?"blue":"black";

text:control.text;

}

}

}

Column{

id:movies;

anchors.top:notation.bottom;

anchors.topMargin: 8;

anchors.left:notation.left;

anchors.leftMargin: 20;

spacing: 8;

CheckBox{

text:"1";

style:checkStyle;

onClicked: resultHolder.visible = false;

}

CheckBox{

text:"2";

style:checkStyle;

onClicked: resultHolder.visible = false;

}

CheckBox{

text:"3";

style:checkStyle;

onClicked: resultHolder.visible = false;

}

CheckBox{

text:"4";

style:checkStyle;

onClicked: resultHolder.visible = false;

}

Button{

id:confirm;

text:"Confirm";

    anchors.top:notation.bottom;//书中写的anchors.top:movies.bottom;,出现了错误，这是我修改后，错误是：

qrc:/main.qml:105:12: QML Button: Cannot anchor to an item that isn't a parent or sibling.qrc:/main.qml:78:9: QML Column: Cannot specify top, bottom, verticalCenter, fill or centerIn anchors for items inside Column. Column will not function

   anchors.topMargin: 8;

anchors.left: notation.left;

onClicked: {

var str = new Array();

var index = 0;

var count = movies.children.length;

for(var i=0;i<count;i++)

{

if(movies.children[i].checked){

str[index] = movies.children[i].text;

index++;

}

}

if(index>0){

result.text = str.join();

resultHolder.visible = true;

}

}

}

}

}

}

这个程序出现的错误暂时还没想明白0.0

import QtQuick 2.2

import QtQuick.Window 2.2

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.2

Window {

visible: true

Rectangle{

width:320;

height:300;

color:"#d0d0d0";

Rectangle{

id:resultHolder;

color:"#a0a0a0";

width:220;

height:80;

anchors.centerIn: parent;

visible: false;//

z:2;

opacity: 0.8;//

border.width: 2;

border.color: "#808080";

radius: 8;

Text{

id:result;

anchors.fill:parent;

anchors.margins: 5;

font.pointSize:16;

color:"blue";

font.bold:true;

wrapMode: Text.Wrap;

}

}

GroupBox{

id:groupbox;

title:"选择你喜欢的电影";

anchors.top:parent.top;

anchors.topMargin: 8;

anchors.left:parent.left;

anchors.leftMargin: 20;

width:280;

height:160;

    Column{

    id:movies;

    anchors.top:parent.top;

    anchors.topMargin: 8;

    spacing: 8;

    CheckBox{

    text:"1";

    style:checkStyle;

    onClicked: resultHolder.visible = false;

}

    CheckBox{

    text:"2";

    style:checkStyle;

    onClicked: resultHolder.visible = false;

}

    CheckBox{

    text:"3";

    style:checkStyle;

    onClicked: resultHolder.visible = false;

}

    CheckBox{

    text:"4";

    style:checkStyle;

    onClicked: resultHolder.visible = false;

}

}

Component{

id:checkStyle;

CheckBoxStyle{

indicator:Rectangle{

implicitWidth: 14;

implicitHeight: 14;

border.color: control.hovered?"darkblue":"gray";

border.width: 1;

Canvas{

anchors.fill: parent;

anchors.margins: 3;

visible: control.checked;

onPaint: {

var ctx = getContext("2d");

ctx.save();

ctx.strokeStyle = "#C00020";

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(width,height);

ctx.moveTo(0,height);

ctx.lineTo(width,0);

ctx.stroke();

ctx.restore();

}

}

}

label: Text{

color:control.checked?"blue":"black";

text:control.text;

}

}

}

Button{

id:confirm;

text:"Confirm";

anchors.top:movies.bottom;//

组合框的实例，要这样写才对，晕了_(¦3」∠)_

    anchors.topMargin: 8;

onClicked: {

var str = new Array();

var index = 0;

var count = movies.children.length;

for(var i=0;i<count;i++)

{

if(movies.children[i].checked){

str[index] = movies.children[i].text;

index++;

}

}

if(index>0){

result.text = str.join();

resultHolder.visible = true;

}

}

}

}

}

}