1. Create a label widget

① Create a label widget

② The label widget ID

③ Modify the label content

2. Steps for use

2.1 Widget properties


  • ID: label_820b is the ID of the label widget

  • X, Y: its coordinate position in the work area

  • Width, Height: set the size of the widget

  • Alignment (in order): left alignment, horizontal center alignment, right alignment, top alignment, vertical center alignment, bottom alignment


  • Parent widget: set the parent object, and the label widget is its child object

  • Text content: set the text content in the display area

  • Text color: set the color of the input text in the display area

  • Font size: set the font size of the input text in the display area

  • Background color: the background color of the label widget

  • Label alignment: center, left and right

  • Border color: the border color of the label widget

  • Border size: the border size of the label widget

  • Radius: set the round corner of the label border

3. Blockly—Label

3.1 Set label content (it needs to be used with Process/Event)

  • Choose UI objects: choose the label ID created in Layout-Designer

  • Content: Click to input text, which will be displayed as the label content

Example: choose the label widget ID: label_820b, content: test

  • Click “{} code” to view the code:

② The label widget ID
③ The label content

4. Implement the recognition of the clicked button with Blockly (ssd201)

  • UI design

  • Create label widgets

  • Create button widgets

  • Blockly design

5. Download and analyze the source code of the project

  • Zip files

① Font

② Image

  • qm_ui_entry.c analysis

① Create an object

② Style

③ Relevant variables

④ Blockly logic

⑤ Create labels and set styles

⑥ Create key1 and set the style

⑦ Key1 event

6. Demo

Project number: 3210

7. Extension –a callback function of a label widget

  • UI design

  • Enable a callback function of the label widget

  • Logic: when you click a label widget that “enables a callback function”, the content of another label widget will appear as “text”.

① Enable a callback function

  • Callback function interface

② Callback function API

  • Code analysis

① Callback function

② Event handling


Note: click to display the label content “text”.

文档更新时间: 2021-08-20 15:24   作者:plj