盛世清平~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: {
                            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;
                    }
                }
            }
        }
    }
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章