qml 实现文本编辑器

编辑器"/>

qml 实现文本编辑器

实现文本编辑器要文件的 IO 功能，但是 QML 并没有提供，所以需要自己写一个。

#ifndef FILEIO_H
#define FILEIO_H#include <QObject>
#include <QTextStream>
#include <QFile>
class FileIO : public QObject
{Q_OBJECT
public:Q_PROPERTY(QString sourceREAD sourceWRITE setSourceNOTIFY sourceChanged)explicit FileIO(QObject *parent = 0);Q_INVOKABLE QString read();Q_INVOKABLE bool write(const QString& data);QString source() { return mSource; }public slots:void setSource(const QString& source) { mSource = source; }signals:void sourceChanged(const QString& source);void error(const QString& msg);private:QString mSource;
};
#endif // FILEIO_H

#include "fileio.h"
#include <QFile>FileIO::FileIO(QObject *parent) :QObject(parent)
{}QString FileIO::read()
{if (mSource.isEmpty()){emit error("source is empty");return QString();}QFile file(mSource);QString fileContent;if ( file.open(QIODevice::ReadOnly) ) {QString line;QTextStream t( &file );do {line = t.readLine();fileContent += line;} while (!line.isNull());file.close();} else {emit error("Unable to open the file");return QString();}return fileContent;
}bool FileIO::write(const QString& data)
{if (mSource.isEmpty())return false;QFile file(mSource);if (!file.open(QFile::WriteOnly | QFile::Truncate))return false;QTextStream out(&file);out << data;file.close();return true;
}

接下来先要将上面的类注册到 qml 中

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <fileio.h>int main(int argc, char *argv[])
{QGuiApplication app(argc, argv);QQmlApplicationEngine engine;qmlRegisterType<FileIO, 1>("FileIO", 1, 0, "FileIO");engine.load(QUrl(QStringLiteral("qrc:/main.qml")));return app.exec();
}

使用 TextEdit 来实现

import QtQuick 2.2
import QtQuick.Dialogs 1.1
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.3
import FileIO 1.0ApplicationWindow {id: qvisible: truetitle: "文件编辑器"width: 640height: 480color: "white"menuBar: MenuBar {Menu {title: "文件"MenuItem {id: opentext: "打开..."iconName: "open"shortcut: StandardKey.OpenonTriggered: open.open()function open(){fileDialog.open()flick.visible = truescrollbar.visible=true}}MenuItem {text: "新建"                           shortcut: StandardKey.NewonTriggered: fileDialog2.open()}MenuItem {text: "保存"                            shortcut: StandardKey.SaveonTriggered: console.log( "WRITE"+ myFile.write(edit.text))}MenuItem {text: "保存为"shortcut: StandardKey.SaveAsonTriggered: fileDialog1.open()}}Menu {title: "编辑"MenuItem {text: "复制"shortcut: StandardKey.CopyonTriggered: edit.copy()}MenuItem {text: "剪切"shortcut: StandardKey.CutonTriggered: edit.cut()}MenuItem {text: "粘贴"shortcut: StandardKey.PasteonTriggered: edit.paste()}}Menu {title: "帮助"MenuItem {text: "About..."shortcut: StandardKey.AddTabonTriggered: aboutDialog.open()}}}Flickable{id: flickanchors.fill:parentwidth: 300; height: 200;contentWidth: edit.paintedWidthcontentHeight: edit.paintedHeightclip: truevisible: falsefunction 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: editwidth: flick.widthheight: edit.paintedHeightfocus:  truewrapMode: TextEdit.WrapselectByMouse: trueonCursorRectangleChanged: flick.ensureVisible(cursorRectangle)}}          Rectangle{id: scrollbarvisible: falseanchors.right: flick.rightx: 350y: 0width: 10height: flick.heightcolor: "white"Rectangle {id: buttonx: 0y: flick.visibleArea.yPosition * scrollbar.heightwidth: 10height: flick.visibleArea.heightRatio * scrollbar.height;color: "grey"// 鼠标区域MouseArea {id: mouseAreaanchors.fill: buttondrag.target: buttondrag.axis: Drag.YAxisdrag.minimumY: 0drag.maximumY: scrollbar.height - button.height// 拖动onMouseYChanged: {flick.contentY = button.y / scrollbar.height * flick.contentHeight}}}}FileDialog {id: fileDialogtitle: "请选择一个文件"onAccepted: {var path = fileDialog.fileUrl.toString();path = path.replace(/^(file:\/{3})/,"");path = decodeURIComponent(path);myFile.source=path;edit.text =  myFile.read();//   console.log( "WRITE"+ myFile.write("TEST TEST file is OK"));console.log("You chose: " + myFile.source);fileDialog.close()}onRejected: {console.log("Canceled")fileDialog.close()}}FileDialog {id: fileDialog1title: "请输入文件名"selectExisting: falseonAccepted: {var  p=myFile.read();var path = fileDialog1.fileUrl.toString();path = path.replace(/^(file:\/{3})/,"");path = decodeURIComponent(path);myFile.source=path;console.log( "WRITE"+ myFile.write(p));edit.text =  myFile.read();console.log("You chose: " + myFile.source);fileDialog.close();}onRejected: {console.log("Canceled")fileDialog.close()}}FileDialog {id: fileDialog2title: "请输入文件名"selectExisting: falseonAccepted: {var path = fileDialog2.fileUrl.toString();path = path.replace(/^(file:\/{3})/,"");path = decodeURIComponent(path);myFile.source=path;console.log( "WRITE"+ myFile.write(""));edit.text =  myFile.read();console.log("You chose: " + myFile.source);fileDialog.close();}onRejected: {console.log("Canceled")fileDialog.close()}}FileIO {id: myFileonError: console.log(msg)}}