QtQuick实现文本编辑和显示文本行号

由于某个项目的需要的，需要使用Qt实现文本行号

（使用C++代码实现文本行号看这里）

在参考网上的一些资料后，决定使用qml实现文本行号

先上一个效果图

使用一个Flickable元素装载一个TextContent（TextContent为自定义的控件）

代码主要在Textcontent.qml中

代码如下

import QtQuick 1.1
//by qyvlik 
Item {
    property alias text: showText.text
    property alias readOnly: showText.readOnly
    property int textPointSize : 20

    Column{
        id:showLineCount
        anchors.left: parent.left

        Repeater {
            model: showText.lineCount;

            Rectangle {
                width: lineNumberWidth(showText.lineCount)
                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"
                Text {
                    id:showLineNumber
                    font.pointSize: textPointSize;
                    anchors{
                        bottom:parent.bottom
                        bottomMargin: 1
                        horizontalCenter: parent.horizontalCenter
                    }
                    text:index+1
                    color:"red"
                }
            }
        }
    }

    TextEdit {
        id:showText
        anchors{
            right: parent.right
            left:showLineCount.right
        }
        font.pointSize: textPointSize;
    }

    TextEdit{
        id:temp
        font.pointSize: textPointSize;
        visible: false
        text:"hello word"
        /*
            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)
        */
    }

    function lineNumberWidth(lineCount) {
        var width = 1;
        var space = 0;
        while(lineCount >= 10) {
            lineCount /= 10;
            ++width;
        }
        return space = width * 8
    }
}

TextContent这个控件主要通过一个TextEdit和一个Repeater来实现的

Repeater通过竖直布局，提供文本行号

TextEdit的lineCount就作为Repeater的model（有多少行就显示几个行号）

细心的你会发现代码中还多了一个TextEdit

这个主要是修正Repeater中显示行号区域的高度，主要是如下原因

--------------------------------------------------------

TextEdit和Text的font.pointSize都设置为8
TextEdit的height是13(是单行文本)
Text的height是11(是单行文本)

------------------------------------------------------

再看看TextView中如何使用TextContent，上代码：

import QtQuick 1.1
import "component"
//by qyvlik
Item {
    id:root

    property alias text: showText.text
    property alias readOnly: showText.readOnly
    property alias textPointSize: showText.textPointSize

    Flickable {
        id: flickable
        anchors{
            right: root.right
            rightMargin: 1
            left: root.left
            leftMargin: 1
            bottom: root.bottom
            bottomMargin: 2
            top:root.top
            topMargin: 2
        }
        enabled: true
        contentHeight: showText.height
        smooth: true

        TextContent {
            id:showText;
            anchors{
                right: parent.right
                left: parent.left
                leftMargin: 1
                rightMargin: 1
            }
            readOnly:true
        }
    }

    Rectangle {
        id: verticalScrollbar
        //竖直
        anchors.right: flickable.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: flickable.bottom
        anchors.bottomMargin: 2
        x: flickable.visibleArea.xPosition * flickable.width
        height: 5
        width : flickable.visibleArea.widthRatio * flickable.width
        radius: 2
        color: "#b19393"
    }
}

代码中的两个Rectangle主要使用来显示滑动条的

但有个bug就是，只能显示横的滑动条，竖的滑动条不能显示

这个以后再修复吧。

再补上main.qml

import QtQuick 1.1
//by qyvlik
Rectangle {
    id: rectangle2
    width: 360
    height: 360

    TextView {
        anchors{
            right:parent.right
            left:parent.left
            top:parent.top
            bottom: parent.bottom
            bottomMargin: 55
        }
        id:textView
        readOnly: false
        textPointSize:15
    }

    Rectangle {
        id: rectangle1
        z:10
        width: parent.width
        height: 50
        color: "yellow"
        anchors{
            bottom: parent.bottom
        }

        Text {
            anchors.centerIn: parent
            text:"read only is " + textView.readOnly
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if(textView.readOnly){
                    textView.readOnly = false
                } else {
                    textView.readOnly = true
                }
            }
        }
    }
}

现在的主要问题是不能显示竖的滑动条

不能对文本进行自动换行（一行文本太长，超出视窗，不会自动换行）

可以查看已经此文章