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:
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.
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:
.cpp
).
.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.
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 Text Editor Guide - UI