qml中可以下拉查看的Text

最新推荐文章于 2022-08-07 23:10:14 发布

Mr.Stone^_^

最新推荐文章于 2022-08-07 23:10:14 发布

阅读量1k

点赞数 2

分类专栏： Qt 文章标签： qml qt 滚动条 Text 多文本

本文链接：https://blog.csdn.net/u010655288/article/details/64925434

版权

Qt 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

当Text中文本过多，但是Text占用空间有限时，可把Text超出控件的部分隐藏掉，并添加一个滚动条，通过触摸屏上下翻看，或通过键盘上下键浏览，废话不多说。

            Flickable
            {
                id: flick
                anchors{left: parent.left;leftMargin: 20; verticalCenter: parent.verticalCenter;}
                anchors.centerIn: parent
                focus: true
                width: parent.width
                height: 700
                //可拖拽内容大小
                //contentWidth: textlabel.width
                contentHeight: textlabel.height
                //隐藏大于显示窗口的部分
                clip: true;
                MyComp.LightText{
                    id:textlabel
                   // anchors{left: parent.left; leftMargin: 20}
                    anchors.centerIn: parent
                    text: robotData.getVersion(true)
               }
            }

            //竖滚动条
            Rectangle
            {
                id: scrollbar_vertical
                visible: opacity>0
                opacity: 0
                Behavior on opacity{ NumberAnimation {duration: 500} }
                anchors.right: flick.right
                //当前可视区域的位置.为百分比值,0-1之间
                y: flick.visibleArea.heightRatio>=1?0:flick.visibleArea.yPosition * flick.height
                width: 10
                //当前可视区域的高度比例,为百分比值,0-1之间
                height: flick.visibleArea.heightRatio<1?flick.visibleArea.heightRatio * flick.height:0
                color: "lightsteelblue"

            }

//            //横滚动条
//            Rectangle
//            {
//                id: scrollbar_horizontal
//                anchors.bottom: flick.bottom
//                //当前可视区域的位置.为百分比值,0-1之间
//                x: flick.visibleArea.xPosition * flick.width
//                height: 10
//                //当前可视区域的宽度比例,为百分比值,0-1之间
//                width: flick.visibleArea.widthRatio * flick.width
//                color: "lightsteelblue"
//            }
            Keys.onPressed: {
                if(flick.visibleArea.heightRatio>=1)
                    return;
                if(event.key==Qt.Key_Down)
                {
                    flick.contentY+=50
                    if(flick.contentY>textlabel.height-flick.height)
                        flick.contentY=textlabel.height-flick.height
                    flipPanel.show()
                }
                if(event.key==Qt.Key_Up)
                {
                    flick.contentY-=50
                    if(flick.contentY<0)
                        flick.contentY=0
                    flipPanel.show()
                }
            }

function show(){
            scrollbar_vertical.opacity = 1
            showTimer.restart()
        }

        function hide(){
            scrollbar_vertical.opacity = 0
        }
        Timer {
            id: showTimer
            interval: 3000
            onTriggered: flipPanel.hide()
        }

在上面代码中我只需要能够上下滚动，左右滚动雷同，所以不完善了，不足之处望指教。