Scrolling inside text field
-
Hi all,
I am using QtQuick controls 2. How can we scroll (horizontally) inside the Text field, no. of characters is more than available width? I could not find any property that enables such requirement. I do not want to use arrow key to navigate through the characters entered. Instead I want to allow the user the scroll .
Any solution?
-
@manny_lp You should create your own control for this like the one below
Rectangle { width: parent.width height: 40 border.color: "red" ScrollView { id: view anchors.fill: parent clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AlwaysOff Label { text: "This is a very long text which displayed on a Label with horizontal scrolling" anchors.verticalCenter: parent.verticalCenter } } }
-
@Mammamia
Thank you for answering.But in the solution you mentioned, text is not editable. I want the user to be able to input text using a virtual keyboard. When the text is longer than visible width of Text field, user should be able to scroll the move through the characters.
-
@manny_lp Sorry I missed that point.
Then what you may need to do is to create a custom component that encapsulates a Label and TextField stacked. By default, you show the Label as shown above scrollable and when the user clicks on it handle it by a MouseArea and show the TextField with the same text form the Label.
-
@manny_lp Actually I fixed your problem. All you need is changing current "CursorPosition". Here is the code:
import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.4 import Qt.labs.platform 1.0 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") TextField { id: control x:0 y:0 width: 150 height: 50 placeholderText: qsTr("Enter description") onCursorPositionChanged: console.log(control.cursorPosition) } Rectangle{ id:rect x:0 y:50 width: 150 height: 50 color: "red" MouseArea { anchors.fill: parent onWheel: { if(wheel.angleDelta.y>0) control.cursorPosition -= 1 if(wheel.angleDelta.y<0) control.cursorPosition += 1 } } } }
The only problem is you need to scroll on the red area you can also assign the mouse area to ur textfield area
-
@Yunus said in Scrolling inside text field:
you can also assign the mouse area to ur textfield area
It will 'break' the TextFields own mouse handling
: discussed here https://forum.qt.io/topic/64041/textfield-and-mousearea/10maybe possible workaround
Window { visible: true width: 640 height: 480 TextField { id: control width: 150 height: 50 MouseArea { // handle TextField scroll and click to change cursor position anchors.fill: parent enabled: control.focus onClicked: control.cursorPosition = control.positionAt(mouseX,mouseY) onWheel: { if(wheel.angleDelta.y>0) control.cursorPosition -= 1 if(wheel.angleDelta.y<0) control.cursorPosition += 1 } } } Button{//will remove focus from control text: 'ok' anchors.centerIn: parent } }
-
@LeLev
I tried you soluttion, it works for scrolling using trackpad. But when we swipe/ scroll using touch (the device I am working on has touch screen, no mouse or external keyboard shall be used) it does not emit "wheel" event and scrolling does not happen! -
This can be implemented using ScrollView or Flickable. I create a demo in Github: https://github.com/arkceajin/QtDemos/tree/master/FlickableInput
I think it shall match the RS that you mentioned.
But it still needs some improvement for the text cursor which I will try to complete in future.