关于qml实现文本行号和自动折叠

[qyvlik]

关于qml实现文本行号和自动折叠
现行的qtquick能否完成上诉功能？
如果不能的话，需要使用哪些qt类去重写一个qml element？
求指点。。。

[qyvlik]

引用 2 楼 foruok 的回复:

看TextArea这个element，找它对应的源码看看。

这个的话，昨天我去http://qt-apps.org/ 看了一下，http://qt-apps.org/content/show.php/SimplePad?content=167030 这个项目的话，就可以实现文本行号和自动折叠换行 里面主要使用了QPlainTextEdit 这个类获取输入的文本是否超出窗体长度，超出窗体长度自动换行， 使用一个QWidget，绘制行号。遇到回车换行符，显示的行号加一 尝试使用QGraphicProxyWidget将其代理到qml中时出错。

[foruok]

能实现。不过没有现成的东西，需要自己写。

[foruok]

看TextArea这个element，找它对应的源码看看。

[彩阳]

自己绘制。 楼上所说的估计是Qt 4的东西了。因为Qt Declarative模块就继承自Qt Graphics View。 文本展开和行号我觉得可能用tableView会好一些。但没试过，也只是猜测。

[qyvlik]

http://blog.csdn.net/qyvlik/article/details/40451731

/*work for desktop and harmattan
 *some bug,can't auto fix TextEdit width
 *
 *by qyvlik
 *[e-mail]
 *2014/10/25/11:33
 *China
 *
*/

import QtQuick 1.1

Item {
    id:root

    property alias text: showText.text
    property alias readOnly: showText.readOnly
    property int textPointSize : 20
    property bool hold: false
    property int lineLength    //未来可以进行修复TextEdit的width
    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:"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)
        */
    }

    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"
    }
   //以下两个为qml中的内联js函数，可以在外部调用
   function lineNumberWidth(lineCount) {
        var width = 1;
        var space = 0;
        while(lineCount >= 10) {
            lineCount /= 10;
            ++width;
        }
        return space = width * 20
    }

    function clearText () {
        text = ""
    }
}

结贴喽~~

[qyvlik]

引用 4 楼 jiangcaiyang123 的回复:

自己绘制。 楼上所说的估计是Qt 4的东西了。因为Qt Declarative模块就继承自Qt Graphics View。 文本展开和行号我觉得可能用tableView会好一些。但没试过，也只是猜测。

http://blog.csdn.net/qyvlik/article/details/40402069 算是实现了吧，只能显示行号，超出视窗长度自动换行的话，行号的问题很难解决

[qyvlik]

一个是TextView的contentWidth的调整fixWidth() Flickable 的 contentWidth的自动修复