Qml – Copy And Paste

Sometimes in mobile applications is helpful can copy text between applications (i.e. wifi password or simply text). With a simple Text is impossible to do the copy action; it is possible using the QClipBoard, so we have to use a bit of C++.

In my example, we see how to copy the text from a ListItem and past where we want. Start looking at the Qml code:

App {
    NavigationStack {

        Page {
            title: qsTr("Main Page")

            AppToolTip {
                 id: copyTip
                 text: "Copied"
            }

            AppListView {
                id: listView
                anchors.fill: parent

                delegate: SimpleRow {
                    item: modelData
                    showDisclosure: false
                    onSelected: {
                        copyTip.target = listView.currentItem
                        clipboard.setText(detailText)
                        copyTip.open()
                    }
                }

                model: [
                    { text: "WIFI ID",
                        detailText: "MyWifi" },
                    { text: "WIFI PASSWORD",
                        detailText: "1234562"}
                ]
            }
        }
    }
}

First, in the example I used https://www.felgo.com but you can use also simple Qml. In the code, we define a ListView with a simple model that has two fields: text and detailText. The delegate is SimpleRow that show these two pieces of information (you can use your custom delegate if you prefer).

In the code you can find an AppTooltip that we use to show a “Copied” message after we copied the text.

How do we copy the text? Simple we call the function setText of the clipboard object.

What’s a clipboard?

#ifndef MOBILECLIPBOARD_H
#define MOBILECLIPBOARD_H

#include <QObject>

class MobileClipBoard : public QObject
{
    Q_OBJECT
public:
    explicit MobileClipBoard(QObject *parent = nullptr);
    Q_INVOKABLE void setText(const QString &from);
    Q_INVOKABLE QString text();
};

#endif // MOBILECLIPBOARD_H

In the class MobileClipBoard we have two methods invocable from the Qml side. Let’s see what those methods do:

#include <QClipboard>
#include <QApplication>
#include "mobileclipboard.h"

MobileClipBoard::MobileClipBoard(QObject *parent) : QObject(parent)
{

}

void MobileClipBoard::setText(const QString &from)
{
    QClipboard *clipboard = QApplication::clipboard();
    clipboard->setText(from);
}

QString MobileClipBoard::text()
{
    QClipboard *clipboard = QApplication::clipboard();
    return clipboard->text();
}

In the setText get the reference to the system clipboard and set the text in the clipboard.

The text() method simple return the text within the system clipboard.

The last point, bind the C++ world with the Qml side:

 MobileClipBoard clipboard;

felgo.qmlEngine()->rootContext()->setContextProperty("clipboard", &clipboard);

We declare a MobileClipboard and pass it to the root QQmlContext, so it can be used in the Qml side.

You can find the code here https://github.com/niqt/mobileclipboard

Note: English is not my native language, so I’m sorry for some errors. I appreciate it if your correct me.