Qt Quick中Flickable内嵌TextEdit时垂直滚动条拖动异常如何解决
滚动条异常问题修复方案
问题根源
滚动条出现全填充、无法拖动的问题,是Flickable无法正确识别内容实际高度导致的,具体有两个配置错误:
- TextEdit设置了
anchors.fill: parent,高度被强制和Flickable可视高度一致,即使文本内容溢出,TextEdit自身高度也不会变化,Flickable无法感知到内容的真实高度 - 没有给Flickable绑定
contentHeight属性,滚动条的滑块尺寸、可拖动范围的计算依赖contentHeight,默认该值等于Flickable自身高度,计算出的可滚动比例始终为0,因此滑块会显示为全填充状态,无法拖动
另外你给滚动条设置的anchors.left: box.right会让滚动条显示在窗口外部,属于额外的显示异常问题。
修复步骤
对代码做三处修改即可恢复正常:
- 移除TextEdit的
anchors.fill: parent配置,改为宽度绑定Flickable宽度,高度随文本内容自适应 - 给Flickable添加
contentHeight: input.height绑定,同步内容的实际高度 - 修正滚动条的锚定规则,让它显示在Flickable右侧
修复后完整代码
import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12 Window { id: box width: 640 height: 180 visible: true title: qsTr("ScrollBar Mystery") Flickable { id: inputWrapper anchors.fill: parent // 新增:绑定内容实际高度 contentHeight: input.height contentWidth: input.width ScrollBar.vertical: ScrollBar { id: scrollBar policy: ScrollBar.AlwaysOn // 修正:锚定到Flickable右侧 anchors.right: inputWrapper.right } Keys.onUpPressed: scrollBar.decrease() Keys.onDownPressed: scrollBar.increase() clip: true flickableDirection: Flickable.VerticalFlick function ensureVisible(r) { if (contentX >= r.x) contentX = r.x; else if (contentX+width <= r.x+r.width) contentX = r.x+r.width-width; if (contentY >= r.y) contentY = r.y; else if (contentY+height <= r.y+r.height) contentY = r.y+r.height-height; } TextEdit { id: input // 替换原anchors.fill配置 width: inputWrapper.width height: implicitHeight text: "" focus: true wrapMode: TextEdit.Wrap onCursorRectangleChanged: inputWrapper.ensureVisible(cursorRectangle) } } }
修复后你原本实现的光标自动滚动到可视区域的逻辑也可以正常生效,滚动条滑块尺寸会随内容高度自动调整,支持正常拖动。
内容的提问来源于stack exchange,提问作者TSG
相关产品推荐
相关产品推荐

