Qt-Qml check box packaging method and device, storage medium and program
By customizing the Qt-Qml checkbox component, the problem of the single form of the checkbox in Qt-Qml is solved, the user interface is diversified and the code is decoupled, which improves the maintainability and development efficiency of the project.
Patent Information
- Application Number
- CN202510499967.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-04-21
- Publication Date
- 2025-09-12
AI Technical Summary
The built-in checkboxes in Qt-Qml are of a single form, resulting in an awkward visual effect in the user interface, making it difficult to meet diverse needs. In addition, redundant code is generated in multiple checkbox scenarios, violating the software design concept of high cohesion and low coupling, making project maintenance difficult.
By building a custom Qt-Qml checkbox component, using Rectangle, CheckBox, Text, Image, and MouseArea elements, and combining them with Qml standard library files, we can implement custom styles and event handling for the checkbox, decoupling the component from the calling code.
It implements diversified configuration of check box styles, reduces redundant code, improves the consistency and maintainability of the user interface, and complies with the design principles of high cohesion and low coupling.
Smart Images
Figure CN120631343A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of Qt-Qml software development, and in particular to a Qt-Qml check box encapsulation method, device, storage medium and program. Background Art
[0002] Qt is an integrated framework for developing application user interfaces (UIs). Qml, short for Qt Meta-Object Language, is a declarative language for creating user interfaces within the Qt framework. It uses JavaScript syntax and is interpreted and executed by the Qt framework's Qml engine. Using Qml, developers can quickly and easily design modern user interfaces without requiring extensive code. It is widely used in user interface development for mobile applications, desktop applications, and embedded systems, such as mobile apps, desktop software, and in-car navigation systems.
[0003] However, in Qt-Qml, the checkboxes that come with Qt are of a single form. Using them directly will make the overall visual effect of the user interface rather abrupt. When the user interface of the entire project is required to have diverse colors and consistent styles, it cannot meet the needs of developers or users. In addition, in scenarios where multiple checkboxes are required, a lot of duplicate code will be generated, which is inconsistent with the software design concept of high cohesion and low coupling, and makes it difficult to maintain the project in the later stage. Summary of the Invention
[0004] In view of the above-mentioned technical deficiencies, the purpose of the present invention is to provide a Qt-Qml check box encapsulation method, device, storage medium and program, aiming to solve the problem that the check boxes provided by Qt in Qt-Qml are of a single form and cannot meet the needs of developers or users. In scenarios where multiple check boxes are required, a lot of duplicate code will be generated, which does not conform to the software design concept of high cohesion and low coupling, making it difficult to maintain the project in the later stage.
[0005] In view of the above problems, the present application provides a Qt-Qml check box encapsulation method, device, storage medium and program.
[0006] The first aspect disclosed in the present application provides a Qt-Qml checkbox encapsulation method, the method comprising the following steps: Create a new separate Qml file and load the Qml file into the current Qt project; use the import statement in the Qml file to import the Qml standard library file used; construct a Rectangle element in the Qml file as the prototype of the encapsulated check box component, and declare attribute variables for the properties of the Rectangle element; construct a CheckBox child element in the Rectangle element, and further construct a Text child element and an Image child element in the CheckBox child element, and declare attribute variables for the properties of the CheckBox child element, Text child element and Image child element respectively; construct a MouseArea child element in the Rectangle element to handle the operation of mouse clicking on the check box option; introduce the path of the Qml file in the relative path at the location where the check box component needs to be called, and then add the encapsulated check box component to the current location through the Qml file name, and assign values to each attribute variable to complete the call.
[0007] Preferably, the Qml standard library file includes QtQuick 2.6, QtQuick.Window 2.2 and QtQuick.Controls 2.2, and the import statements correspond to import QtQuick 2.6, importQtQuick.Window 2.2 and import QtQuick.Controls 2.2 respectively.
[0008] Preferably, the attributes of the Rectangle element include: width, height, color, border width and border color.
[0009] Preferably, the CheckBox sub-element contains a checked attribute for changing or obtaining the selected state of an option in the checkbox component, wherein the value of the checked attribute is a Boolean type.
[0010] Preferably, the CheckBox sub-element uses an onCheckedChanged signal to monitor changes in the selected state of an option in the checkbox component.
[0011] Preferably, the Image sub-element is constructed in the indicator, and when the selected state of the option in the checkbox component changes, the indicator icon is replaced with the icon of the specified storage path through the ternary operator.
[0012] Preferably, the attributes of the CheckBox sub-element include: id, height, anchor left distance and anchor vertical center.
[0013] Preferably, the attributes of the Text sub-element include: id, anchor left distance, anchor left edge, anchor vertical center, text, color, font type and font size.
[0014] Preferably, the attributes of the Image sub-element include: anchor center, width, height, fill mode and icon source file.
[0015] Preferably, when the area covered by the MouseArea sub-element is clicked by the mouse, an onClicked event is triggered, and the checkFunc function and the onUserClicked function are executed in sequence, wherein the function of the checkFunc function is to change the selected state of the checkbox component, and the function of the onUserClicked function is to mark whether the current checkbox component is selected.
[0016] The second aspect disclosed in the present application provides a computer device, including a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the following steps are implemented: creating a new separate Qml file and loading the Qml file into the current Qt project; using an import statement in the Qml file to import the Qml standard library file used; constructing a Rectangle element in the Qml file as a prototype of the encapsulated check box component, and declaring attribute variables for the attributes of the Rectangle element; constructing a CheckBox child element in the Rectangle element, and further constructing a Text child element and an Image child element in the CheckBox child element, and declaring attribute variables for the attributes of the CheckBox child element, the Text child element and the Image child element respectively; constructing a MouseArea child element in the Rectangle element to handle the operation of clicking the check box option with the mouse; introducing the path of the Qml file by means of a relative path at the location where the check box component needs to be called, and then adding the encapsulated check box component to the current location by means of the Qml file name, and assigning values to each attribute variable to complete the call.
[0017] The third aspect disclosed in the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the following steps: creating a new separate Qml file and loading the Qml file into the current Qt project; using an import statement in the Qml file to import the Qml standard library file used; constructing a Rectangle element in the Qml file as a prototype of the encapsulated check box component, and declaring attribute variables for the properties of the Rectangle element; constructing a CheckBox child element in the Rectangle element, and further constructing a Text child element and an Image child element in the CheckBox child element, and declaring attribute variables for the properties of the CheckBox child element, the Text child element, and the Image child element respectively; constructing a MouseArea child element in the Rectangle element to handle the operation of clicking the check box option with the mouse; introducing the path of the Qml file by means of a relative path at the location where the check box component needs to be called, and then adding the encapsulated check box component to the current location by means of the Qml file name, and assigning values to each attribute variable to complete the call.
[0018] The fourth aspect disclosed in the present application provides a computer program product, including a computer program or instructions, which implement the following steps when executed by a processor: creating a new separate Qml file and loading the Qml file into the current Qt project; using an import statement in the Qml file to import the Qml standard library file used; constructing a Rectangle element in the Qml file as a prototype of the encapsulated check box component, and declaring attribute variables for the attributes of the Rectangle element; constructing a CheckBox child element in the Rectangle element, and further constructing a Text child element and an Image child element in the CheckBox child element, and declaring attribute variables for the attributes of the CheckBox child element, the Text child element and the Image child element respectively; constructing a MouseArea child element in the Rectangle element to handle the operation of clicking the check box option with the mouse; introducing the path of the Qml file by means of a relative path at the location where the check box component needs to be called, and then adding the encapsulated check box component to the current location through the Qml file name, and assigning values to each attribute variable to complete the call.
[0019] The beneficial effects of the present invention are: (1) Solved the problem that the checkbox provided by Qt in Qt-Qml has a single form and a rather abrupt overall visual effect. It enables free configuration of the checkbox's presentation style, making the user interface of the entire project more diverse in color and consistent in style, better meeting the development needs of developers and the usage needs of users; (2) It solves the problem of redundant code when there are multiple check boxes, and implements the software engineering concept of high cohesion and low coupling; (3) By encapsulating the checkbox component code and the calling code, the object-oriented development ideas of encapsulation and polymorphism are realized, making the project easier to maintain and refactor in the later stages. BRIEF DESCRIPTION OF THE DRAWINGS
[0020] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.
[0021] Figure 1 This is an overall flow chart of a Qt-Qml check box encapsulation method.
[0022] Figure 2 This is an example diagram of the effect of a Qt-Qml check box encapsulation method. DETAILED DESCRIPTION
[0023] The following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts are within the scope of protection of the present invention.
[0024] like Figure 1 As shown, an embodiment of the present application provides a Qt-Qml check box encapsulation method, the method comprising the following steps: Create a separate Qml file, such as StCheckBox.qml, and load the Qml file into the current Qt project; Use the import statement in the Qml file to import the Qml standard library file used; Construct a Rectangle element in the Qml file as a prototype of the encapsulated check box component, and declare attribute variables for the attributes of the Rectangle element; Construct a CheckBox child element within the Rectangle element, and further construct a Text child element and an Image child element within the CheckBox child element. Declare attribute variables for the properties of the CheckBox child element, the Text child element, and the Image child element respectively. Construct a MouseArea child element in the Rectangle element to handle the operation of mouse clicking on the check box option; For example, the code structure of each element of the constructed check box component is as follows: Rectangle CheckBox{ Text{ } Image{ } } MouseArea } } In the location where the check box component needs to be called, import the path of the Qml file using the relative path import ".. / .. / module / uicom", then add the encapsulated check box component to the current location through the Qml file name, and assign values to each property variable to complete the call.
[0025] Furthermore, the Qml standard library files include QtQuick 2.6, QtQuick.Window 2.2, and QtQuick.Controls 2.2, and the import statements correspond to import QtQuick 2.6, importQtQuick.Window 2.2, and import QtQuick.Controls 2.2, respectively.
[0026] Furthermore, the attributes of the Rectangle element include: width, height, color, border width and border color.
[0027] Furthermore, there is a checked attribute in the CheckBox child element, which is used to change or obtain the selected state of an option in the check box component, wherein the value of the checked attribute is a Boolean type.
[0028] Furthermore, the CheckBox child element uses the onCheckedChanged signal to monitor changes in the selected state of the options in the checkbox component.
[0029] For example, the code structure is: CheckBox{ onCheckedChanged: { Callback(); } } Furthermore, the Image sub-element is constructed in the indicator, and when the selected state of the option in the checkbox component changes, the indicator icon is replaced with the icon of the specified storage path through the ternary operator.
[0030] For example, the code structure is: indicator:Image{ source:parentChecked?trueShowIcon:falseShowIcon } Furthermore, the attributes of the CheckBox child element include: id, height, anchor left distance, and anchor vertical center.
[0031] Furthermore, the attributes of the Text sub-element include: id, anchor left distance, anchor left edge, anchor vertical center, text, color, font type and font size.
[0032] Furthermore, the attributes of the Image sub-element include: anchor center, width, height, fill mode, and icon source file.
[0033] Furthermore, when the area covered by the MouseArea sub-element is clicked by the mouse, an onClicked event is triggered, and the checkFunc function and the onUserClicked function are executed in sequence, wherein the function of the checkFunc function is to change the selected state of the checkbox component, and the function of the onUserClicked function is to mark whether the current checkbox component is selected.
[0034] For example, the code structure is: MouseArea onClicked: { checkFunc(); onUserClicked(); } } In summary, the Qt-Qml checkbox encapsulation method provided in the embodiments of the present application has the following technical effects: (1) Solved the problem that the checkbox provided by Qt in Qt-Qml has a single form and a rather abrupt overall visual effect. It enables free configuration of the checkbox's presentation style, making the user interface of the entire project more diverse in color and consistent in style, better meeting the development needs of developers and the usage needs of users; (2) It solves the problem of redundant code when there are multiple check boxes, and implements the software engineering concept of high cohesion and low coupling; (3) By encapsulating the checkbox component code and the calling code, the object-oriented development ideas of encapsulation and polymorphism are realized, making the project easier to maintain and refactor in the later stages.
[0035] The effect example finally achieved by the Qt-Qml check box encapsulation method provided by the present invention is as follows: Figure 2 shown.
[0036] In one embodiment, a computer device is provided, comprising a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the following steps are implemented: creating a new separate Qml file and loading the Qml file into a current Qt project; using an import statement in the Qml file to import the used Qml standard library file; constructing a Rectangle element in the Qml file as a prototype of an encapsulated checkbox component, and declaring attribute variables for the attributes of the Rectangle element; constructing a CheckBox child element in the Rectangle element, and further constructing a Text child element and an Image child element in the CheckBox child element, and declaring attribute variables for the attributes of the CheckBox child element, the Text child element, and the Image child element, respectively; constructing a MouseArea child element in the Rectangle element to process the operation of clicking a checkbox option with a mouse; introducing the path of the Qml file by means of a relative path at a location where the checkbox component needs to be called, then adding the encapsulated checkbox component to the current location by means of the Qml file name, and assigning values to each attribute variable to complete the call.
[0037] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the following steps are implemented: creating a new separate Qml file and loading the Qml file into a current Qt project; using an import statement in the Qml file to import the used Qml standard library file; constructing a Rectangle element in the Qml file as a prototype of an encapsulated checkbox component, and declaring attribute variables for the properties of the Rectangle element; constructing a CheckBox child element in the Rectangle element, and further constructing a Text child element and an Image child element in the CheckBox child element, and declaring attribute variables for the properties of the CheckBox child element, the Text child element, and the Image child element respectively; constructing a MouseArea child element in the Rectangle element to handle the operation of clicking a checkbox option with a mouse; introducing the path of the Qml file by means of a relative path at the location where the checkbox component needs to be called, then adding the encapsulated checkbox component to the current location by means of the Qml file name, and assigning values to each attribute variable to complete the call.
[0038] In one embodiment, a computer program product is provided, including a computer program or instructions, which, when executed by a processor, implements the following steps: creating a new separate Qml file and loading the Qml file into a current Qt project; using an import statement in the Qml file to import the used Qml standard library file; constructing a Rectangle element in the Qml file as a prototype of an encapsulated checkbox component, and declaring attribute variables for the properties of the Rectangle element; constructing a CheckBox child element in the Rectangle element, and further constructing a Text child element and an Image child element in the CheckBox child element, and declaring attribute variables for the properties of the CheckBox child element, the Text child element, and the Image child element, respectively; constructing a MouseArea child element in the Rectangle element to handle the operation of clicking a checkbox option with a mouse; introducing the path of the Qml file by relative path at the location where the checkbox component needs to be called, then adding the encapsulated checkbox component to the current location by using the Qml file name, and assigning values to each attribute variable to complete the call.
[0039] Obviously, those skilled in the art may make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if such changes and modifications fall within the scope of the claims and their equivalents, the present invention is intended to include such changes and modifications.
Claims
1. A Qt-Qml check box encapsulation method, characterized in that, The method comprises the following steps: Create a separate Qml file and load it into the current Qt project; Use the import statement in the Qml file to import the Qml standard library file used; Construct a Rectangle element in the Qml file as a prototype of the encapsulated check box component, and declare attribute variables for the attributes of the Rectangle element; Construct a CheckBox child element within the Rectangle element, and further construct a Text child element and an Image child element within the CheckBox child element. Declare attribute variables for the properties of the CheckBox child element, the Text child element, and the Image child element respectively. Construct a MouseArea child element in the Rectangle element to handle the operation of mouse clicking on the check box option; In the location where the check box component needs to be called, the path of the Qml file is introduced by relative path, and then the encapsulated check box component is added to the current location through the Qml file name, and each property variable is assigned a value to complete the call.
2. A Qt-Qml check box encapsulation method according to claim 1, characterized in that: The Qml standard library files include QtQuick 2.6, QtQuick.Window 2.2 and QtQuick.Controls 2.2, and the import statements correspond to import QtQuick 2.6, import QtQuick.Window 2.2 and import QtQuick.Controls 2.2 respectively.
3. A Qt-Qml check box encapsulation method according to claim 1, characterized in that: The attributes of the Rectangle element include: width, height, color, border width and border color.
4. A Qt-Qml check box encapsulation method according to claim 1, characterized in that: The CheckBox sub-element has a checked attribute, which is used to change or obtain the selected state of an option in the check box component, wherein the value of the checked attribute is a Boolean type.
5. A Qt-Qml check box encapsulation method according to claim 1, characterized in that: The CheckBox child element uses the onCheckedChanged signal to monitor changes in the selected state of the options in the checkbox component.
6. A Qt-Qml check box encapsulation method according to claim 1, characterized in that: The Image sub-element is constructed in the indicator. When the selected state of the option in the check box component changes, the indicator icon is replaced with the icon of the specified storage path through the ternary operator.
7. A Qt-Qml check box encapsulation method according to claim 1, characterized in that: The attributes of the CheckBox child element include: id, height, anchor left distance and anchor vertical center.
8. A Qt-Qml check box encapsulation method according to claim 1, characterized in that: The attributes of the Text sub-element include: id, anchor left distance, anchor left edge, anchor vertical center, text, color, font type and font size.
9. A Qt-Qml check box encapsulation method according to claim 1, characterized in that: The attributes of the Image sub-element include: anchor center, width, height, fill mode and icon source file.
10. A Qt-Qml check box encapsulation method according to claim 1, characterized in that: When the area covered by the MouseArea sub-element is clicked by the mouse, the onClicked event is triggered, and the checkFunc function and the onUserClicked function are executed in sequence. Among them, the function of the checkFunc function is to change the selected state of the checkbox component, and the function of the onUserClicked function is to mark whether the current checkbox component is selected.
11. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of a Qt-Qml check box encapsulation method according to any one of claims 1 to 10 are implemented.
12. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of a Qt-Qml check box encapsulation method according to any one of claims 1 to 10 are implemented.
13. A computer program product comprising a computer program or instructions, characterized in that When the computer program or instruction is executed by a processor, the steps of a Qt-Qml check box encapsulation method according to any one of claims 1 to 10 are implemented.