Qt Quick 文本编辑器指南

Application Design

The 文本编辑器 example is a simple example of creating an application with Qt. Specifically, the example uses QML to set up the user interface, C++ to implement the file operations, and the Qt tools to manage the project files and build environment.

We will use Qt Quick Designer to add QML controls onto our application and set up the controls and resources. We will also implement the logic and connect the user interface to a C++ backend that will handle the saving and loading of text files.

This guide assumes that you have downloaded Qt and are able to install, open, and run the basic examples found in Qt Creator's Welcome Mode . If not, here are the pages that will help you:

Qt 快速入门

The guide attempts to be self-contained but will refer to topics in the Qt reference documentation. Feel free to click on the links, but it is not necessary to leave the guide to find the information necessary to develop the application.

The files are part of the Qt package and are available when searched for Qt Quick 文本编辑器 in Qt Creator's Welcome mode . All files used in the application are listed for viewing in the Qt Quick Controls 1 - Text Editor Example 页面。

设置环境和工程

We can start by creating the project in Qt Creator. Our application has the name 文本编辑器 and it is a Qt Quick Application. Qt Creator has a wizard that can create the project for you.

选择 File > New File or Project > 应用程序 > Qt Quick Application > Choose .
在名称 field, enter TextEditor 并选择下一 .
在 Qt Quick component set field, select Qt Quick Controls 1.2 > 下一 .
在 Kit Selection page, select 下一 .
在摘要 page, select Finish .

The wizard creates the project and you can run it by clicking on the run button, . The application is an empty shell but it contains the basic window and layout on which we can build. Make sure that you can run the basic application and if not, make sure that your build environment and Qt version are configured.

工程文件

The wizard creates the project files used to build the project. To view them, select the Edit mode . The following project files are modified later in the guide:

TextEdit.pro - the project file used to create the build files. Also sets the paths that are visible to the project.
源 - contains the C++ implementation files ( .cpp ).
资源 - contains a resource file that configures the application assets and how the application resolves the location of the assets. The QML file is also found here.
头 - contains the C++ header files ( .h ). The default project does not have any header files, therefore this is not visible.

资源文件

The text editor uses several icons to represent various actions. The icons are in the images directory which is directly under the TextEditor project directory. The images as well as the project files are also listed in the reference documentation on the Qt Quick Controls 1 - Text Editor Example 页面。

We first need to register the image files into the project's resource file, qml.qrc . The resource files compact the images into the binary packages. The resource files provide a streamlined directory structure, which is cross-platform. It is beneficial especially on mobile platforms, where each platform manages the application resources differently.

To register the image files, in the 编辑 mode, right-click the qml.qrc file and select Open in Editor .
点击添加 button and select Add Files .
In the file manager, select the files to be added. You can select all the images in the images directory at once.

You can refer to the images from QML by referring directly to the filename. For example, images/editcopy.png is the name of the editcopy.png file. We will use these images later in the guide.

Qt Creator then packages the images alongside your application in a single binary. For more information about resource files, see the 采用 Qt 资源系统管理资源文件和 Qt 资源系统页面。

范例文件

The accompanying examples files are listed in the following page:

Qt Quick Controls 1 - Text Editor Example