行編輯(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: {
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;
}
}
}
}
}
}