QtQuick实现文本编辑和显示文本行号-改进版

来源：互联网发布：mac ps厘米改成像素编辑：程序博客网时间：2024/06/12 08:23

可以查看这个简单的项目

QtQuickEditor

先上张效果图

现在简单的说说代码的

主要讲讲TextView的代码

下面的代码是一个自定义Button的控件

/*work for desktop and harmattan * *by qyvlik *qyvlik@qq.com *2014/10/25/11:33 *China **/import QtQuick 1.1Rectangle {    id: root    property alias text: name.text    signal click;    width: 100    height: 50    color: "yellow"    radius: height/10    Text {        id:name        anchors.centerIn: parent        text:"click"    }    MouseArea {        anchors.fill: parent        id:mouse    }    Component.onCompleted: {        mouse.clicked.connect(root.click)    }}

接下是使用TextView了

/*work for desktop and harmattan *some bug,can't auto fix TextEdit width * *by qyvlik *qyvlik@qq.com *2014/10/25/11:33 *China **/import QtQuick 1.1Item {    id:root    property alias text: showText.text    property alias readOnly: showText.readOnly    property int textPointSize : 20    property bool hold: false    property int lineLength    property alias textScale: showText.scale    Flickable {        id: flickable        anchors{            right: parent.right            rightMargin: 1            left: parent.left            leftMargin: 1            bottom: parent.bottom            bottomMargin: 10            top:parent.top            topMargin: 2        }        contentHeight :showText.height        contentWidth: showText.width//lineLength        enabled: !hold        smooth: true        Column{            id:showLineCount            anchors.left: parent.left            Repeater {                model: showText.lineCount;                Rectangle {                    width: lineNumberWidth(showText.lineCount) +10                    height:temp.height;                    /*                      in desktop                      TextEdit and Text, they 's font.pointSize is 8                      TextEdit's height is 13(one line)                      Text's height is 11(one line)                    */                    color: "yellow"                    Rectangle {                        property bool flag:false                        anchors.left: parent.left                        anchors.verticalCenter: parent.verticalCenter                        width: 10                        height: 10                        color:"yellow"                        radius:5                        MouseArea{                            anchors.fill: parent                            onClicked: {                                if(parent.flag) {                                    parent.color = "yellow";                                    parent.flag = false;                                } else {                                    parent.color = "green";                                    parent.flag = true;                                }                            }                        }                    }                    Text {                        id:showLineNumber                        font.pointSize: textPointSize;                        anchors{                            bottom:parent.bottom                            bottomMargin: 1                            horizontalCenter: parent.horizontalCenter                        }                        text:index+1                        color:"red"                    }                }            }        }        TextEdit {            id:showText            width: root.width            anchors{                left:showLineCount.right            }            font.pointSize:textPointSize;            wrapMode:TextEdit.NoWrap            textFormat:TextEdit.PlainText            focus: true            activeFocusOnPress:true        }    }    TextEdit{        id:temp        font.pointSize: textPointSize;        visible: false        text:qsTr("hello world")        /*          in desktop          TextEdit and Text, they 's font.pointSize is 8          TextEdit's height is 13(one line)          Text's height is 11(one line)        */    }    Rectangle {        id: verticalScrollbar        //竖直        anchors.right: parent.right        anchors.rightMargin: 2        y: flickable.visibleArea.yPosition * flickable.height        width: 5        height : flickable.visibleArea.heightRatio * flickable.height        radius: 2        color: "#b19393"    }    Rectangle {        id: horizontalScrollbar        //水平        anchors.bottom: parent.bottom        anchors.bottomMargin: 2        x: flickable.visibleArea.xPosition * flickable.width        height: 5        width : flickable.visibleArea.widthRatio * flickable.width        radius: 2        color: "#b19393"    }    function lineNumberWidth(lineCount) {        var width = 1;        var space = 0;        while(lineCount >= 10) {            lineCount /= 10;            ++width;        }        return space = width * 20    }    function clearText () {        text = ""    }    function fixViewWidth(text) {        var i=0;        var maxWidth = 0;        var tempArray = new Array();        var tempstr1 = new String();        tempArray = text.split("\n");        tempstr1 = tempArray[i];        while(tempstr1) {            if(maxWidth<=tempstr1.length) {                maxWidth=tempstr1.length;                console.log("\t<<"+i+">>\n");            }            i+=1;            tempstr1 = tempArray[i];        }        delete tempstr1;        delete tempArray;        return maxWidth;    }    function fixWidth(){        flickable.contentWidth = fixViewWidth(showText.text)*16;//Chinese need two width        console.log("view width is:"+flickable.contentWidth);    }}

三个函数

一个是clearText()清除文本内容

一个是行号显示区域的宽度调整

一个是TextView的contentWidth的调整fixWidth()

直接上main.qml的代码

/*work for desktop and harmattan *some bug,can't auto fix TextView width * *by qyvlik *qyvlik@qq.com *2014/10/25/11:33 *China **/import QtQuick 1.1import "component"Rectangle {    width: 360    height: 360    TextView{        id:textView        anchors{            fill:parent            bottomMargin: 50        }        textPointSize:10    }    Row {        z:10        id:toolBar        anchors{            bottom: parent.bottom            bottomMargin: 2        }        spacing: 10        Button{            id:button            text:"edit "+!textView.readOnly            onClick: {                if(textView.readOnly) {                    textView.readOnly = false;                } else {                    textView.readOnly = true;                }                textView.fixWidth();            }        }        Button{            text:"clear"            onClick: {                textView.clearText()            }        }        Button{            text:"hold "+textView.hold            onClick: {                if(textView.hold) {                    textView.hold = false                } else {                    textView.hold = true                }            }        }    }}

0 0