带滑块的 qml textedit

发布于 2024-11-03 17:44:54 字数 2481 浏览 0 评论 0原文

有谁知道如何创建可以使用滑块换行的文本编辑? 我尝试这样做,但我遇到了绑定循环问题...

代码:

Flickable
    {
        id: flick
        anchors.fill:parent
        contentWidth: edit.paintedWidth
        contentHeight: edit.paintedHeight
        clip: true
        interactive :false
        contentY: slider.y
        function ensureVisible(r)
        {
            if (contentY >= r.y)
                contentY = r.y;
            else if (contentY+height <= r.y+r.height)
                contentY = r.y+r.height-height;
        }

        TextEdit
        {
            id: edit
            width: flick.width*0.9
            height: flick.height
            focus: true
            wrapMode: TextEdit.Wrap
            onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
            text: defaultText
            color: textColor
            font.family: fontFamily
            font.pointSize: fontSize
            font.bold: bold
            font.italic: italic
            font.overline: overline
            font.underline: underline
            horizontalAlignment: alignment
            selectByMouse:true

        }
    }

    Rectangle
    {
        id: container

        height: multiLineEdit.height
        width:multiLineEdit.width*0.1
        anchors.right:multiLineEdit.right
        anchors.top:multiLineEdit.top
        radius: 4
        opacity: 0.7
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "gray" }
            GradientStop { position: 1.0; color: "white" }
        }

        Rectangle {
            id: slider

            property int value: Math.round(container.y*100/(slider.width-container.width))
            property int tmpVal: 0

            x: 1
            y: flick.visibleArea.yPosition * flick.height//1
            width: parent.width

            //The height will change according to the flickable area (the text area)
            height: (flick.visibleArea.heightRatio > 1) ? (container.height) :(flick.visibleArea.heightRatio*container.height)
            radius: 2
            smooth: true

            color:"black"

                   MouseArea {
                anchors.fill: parent
                drag.target: parent; drag.axis: Drag.YAxis
                drag.minimumY: 0; drag.maximumY: container.height - slider.height
            }
        }

    } 

通过这种方式,我在textEditBox的右侧创建了一个textEdit和一个slier。滑块现在根据文本移动,但它(滑块)不能控制文本编辑框...我如何添加此操作? (以我的方式它带来了一个绑定循环)

Does anyone know how to create a textEdit that can wrap using a slider?
i tried to do it but i got a problem with binding loop...

code:

Flickable
    {
        id: flick
        anchors.fill:parent
        contentWidth: edit.paintedWidth
        contentHeight: edit.paintedHeight
        clip: true
        interactive :false
        contentY: slider.y
        function ensureVisible(r)
        {
            if (contentY >= r.y)
                contentY = r.y;
            else if (contentY+height <= r.y+r.height)
                contentY = r.y+r.height-height;
        }

        TextEdit
        {
            id: edit
            width: flick.width*0.9
            height: flick.height
            focus: true
            wrapMode: TextEdit.Wrap
            onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
            text: defaultText
            color: textColor
            font.family: fontFamily
            font.pointSize: fontSize
            font.bold: bold
            font.italic: italic
            font.overline: overline
            font.underline: underline
            horizontalAlignment: alignment
            selectByMouse:true

        }
    }

    Rectangle
    {
        id: container

        height: multiLineEdit.height
        width:multiLineEdit.width*0.1
        anchors.right:multiLineEdit.right
        anchors.top:multiLineEdit.top
        radius: 4
        opacity: 0.7
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "gray" }
            GradientStop { position: 1.0; color: "white" }
        }

        Rectangle {
            id: slider

            property int value: Math.round(container.y*100/(slider.width-container.width))
            property int tmpVal: 0

            x: 1
            y: flick.visibleArea.yPosition * flick.height//1
            width: parent.width

            //The height will change according to the flickable area (the text area)
            height: (flick.visibleArea.heightRatio > 1) ? (container.height) :(flick.visibleArea.heightRatio*container.height)
            radius: 2
            smooth: true

            color:"black"

                   MouseArea {
                anchors.fill: parent
                drag.target: parent; drag.axis: Drag.YAxis
                drag.minimumY: 0; drag.maximumY: container.height - slider.height
            }
        }

    } 

in this way i create a textEdit and a slier at the right side of the textEditBox. the slider is now move according to the text, but it(the slider) doe's not control the textEdit box... how i can add this action? (in my way it bring a binding loop)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

维持三分热 2024-11-10 17:44:54

如果按键事件与左右箭头匹配,也许您可​​以使用自定义插槽捕获键盘按钮按下事件,即

请查看此处:QWidget::grabKeyboard() 的链接

Maybe you could grab keyboard button press event with a custom slot if key event match left and right arrow i.e.

Please take a look here: link for QWidget::grabKeyboard()

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文