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