CODEWITHSUNDEEP
qtqmlqt5.7qtquickcontrols2
jkj yuio
jkj yuio

Reputation: 2613

Qt5.7 QML QtQuick; How to build a scrollable and editable TextArea for Desktop & Android

Using QtQuick Controls.2, You can make a TextArea scrollable by putting it inside a Flickable, but then you cannot select text (because attempting to select initiates a scroll). However, if you make it selectByMouse, you can select, but then you cannot scroll.

How to do both?

Here is my example code:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQml 2.2

ApplicationWindow
{
    visible: true
    width: 640
    height: 800

    function makeText()
    {
        var s = "click <a href=\"http://qt.io\">here</a>\n"
        for (var i = 0; i < 10; ++i)
        {
            s += 
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at tempus felis. Nulla facilisi. Duis quam purus, posuere eu rutrum vel, blandit quis lorem. Cras vitae orci eget lorem luctus cursus quis nec nibh. Sed luctus ligula urna, vel commodo nisi finibus quis. Donec pretium eu purus a porttitor. Nam vehicula nunc quis dui gravida luctus. Morbi fermentum, elit nec ullamcorper accumsan, ex ligula iaculis nisi, id pretium ipsum metus quis quam. In lobortis dignissim semper. Aenean at neque lorem. Maecenas dapibus, arcu a condimentum consequat, mauris enim vehicula nibh, in fringilla quam nisi eu ipsum.</p>"
        }
        return s
    }

    Flickable 
    {
        id: flickable
        anchors.fill: parent
        flickableDirection: Flickable.VerticalFlick

        // place a TextArea inside the flickable, you can edit text
        // but you cannot select because click & move mouse flicks the view.
        TextArea.flickable: TextArea
        {
            id: textarea
            wrapMode: TextArea.Wrap

            font.pointSize: 16
            textMargin: 16
            textFormat: TextEdit.RichText

            // can select but kills scrolling
            //selectByMouse: true

            text: Qt.platform.os + "\n" + makeText()

            // try out links
            onLinkActivated: Qt.openUrlExternally(link)
        }
        ScrollBar.vertical: ScrollBar { }
    }
}

What would be the best way to go about this, and is there a stock answer (because there should be!).

I tried to implement an idea where you can perform a selection using PressAndHold. It, sort of, works but is fiddly. Is this a good idea? What would be the best practice here.

The other thing is that there is no popup cut&paste menu now for Controls.2, even for desktops it would appear.

Does this mean i have to implement:

  1. A method to select over scroll
  2. A cut & paste menu for desktop
  3. A cut & paste menu for Android (wont have key shortcuts)
  4. Selection handles for Android
  5. Cursor point handle for Android

I'm rather surprised to discover that none of these are provided in a so-called, EditArea control!

Any recommendations here/reference implementations or suggestions.

BTW, 3,4 & 5 are also absent from Controls.1

project files: https://gist.github.com/anonymous/1ad94c9539fdc51d29258f6164f72487

thanks.

Upvotes: 4

Views: 2364

Answers (1)

jpnurmi
jpnurmi

Reputation: 5836

Unfortunately, proper text selection support through the Qt platform abstraction layer was not finished for Android in time for the Qt 5.7.0 release. In this area, iOS and Embedded Linux are better covered. Any progress on the Android side of things can be monitored via https://bugreports.qt.io/browse/QTBUG-34867.

Upvotes: 2

Related Questions