Creating Scalable Buttons and Borders

可以使用 Border Image type to display an image, such as a PNG file, as a border and a background.

Use two border images and suitable graphics to change the appearance of a button when it is clicked. You can use use states to determine which image is visible depending on whether the mouse button is pressed down. You could add more images and states to change the appearance of the button depending on other mouse events, such as hovered.

Use a Text type to add button text. You can use states also to change the button text color and font size. For example, you can scale the button text up or down.

Add a Mouse Area type that covers the whole area and reacts to mouse events.

Creating the Button Type

To create a button type, select File > New File or Project > Qt > QML File (Qt Quick 2) > Choose to create a QML file called Button.qml (for example).

注意： Types are listed in the Library only if the filename begins with a capital letter.

Constructing the Button Component

To construct the button component:

1. Click Design to edit the QML file in the Form Editor .
2. 在 Assets tab of Library , select Add New Assets to copy the image files you want to use to the project folder.
3. 在 Navigator , select the root item and set the width ( W ) and height ( H ) of the button in the 特性 view to match the size of the images you plan to use. This specifies the initial size of the button component.
4. Drag and drop two Border Image types from Library to the root item in Navigator .
5. Drag and drop a Text type to the root item.
6. Drag and drop a Mouse Area to the root item in Navigator .
7. Select a border image to edit the values of its properties:
   1. 在 Id field, enter an ID for the border image. In this example, we use the ID inactiveButton .
   2. 在 Source field, select the image file for the border image. For example, inactive_button.png.
   3. 在 Layout tab, select the ( Fill to Parent ) button to always make the image the same size as its parent. This makes the button component scalable, because the image size is bound to the component size.
8. Select the other border image to edit the values of its properties similarly:
   1. 在 Id field, enter activeButton .
   2. 在 Source field, select the image file for the button when it is clicked. For example, active_button.png.
   3. 在 Layout tab, select the ( Fill to Parent ) button.
9. Select the text item to specify font size and color in 特性 :
   1. 在 Color field, use the color picker to select the font color, or enter a value in the field.
   2. 在 Font group, Size field, enter the font size.
   3. 在 Layout tab, select ( Vertical Center ) and ( Horizontal Center ) buttons to inherit the vertical and horizontal centering from the parent. This ensures that the button label is centered when the component is resized.

Using States to Change Component Property Values

1. 在 States view, select Create New State twice to create two new states.

   

2. 选择 State1 .
3. Change the state name to active .
4. 选择 , and then select Set when Condition to determine when the state should be applied.
5. 在 Binding Editor , select the mouseArea type and the pressed signal to specify that the state is applied when the mouse button is pressed down.

   

6. Select the text item in Navigator to specify that the text size is scaled up when the button is pressed down.
7. 在 特性 , select the 高级 tab, and increase the value of the Scale 特性。
8. 选择 inactiveButton in Navigator to hide it in the active state by changing the value of its Visibility property in 特性 .
9. 选择 State2 .
10. Change the state name to inactive .
11. Set the when condition for the state to !mouseArea.pressed to specify that the state is applied when the mouse button is not pressed down.

    

    it in the inactive state by changing the value of its Visibility property in 特性 .

12. Press Ctrl+S to save the button.
13. Select the ( Show Live Preview ) button to check how the button behaves when you click it. You can drag the preview window borders to see what happens when you resize the component.

To be useful, the button type has to be created in a project. When you work on other QML files in the project to create screens or other components for the UI, the button type appears in the My QML Components tab of the Library view. You can drag and drop it to Form Editor or Navigator to create button instances and modify the values of their properties to assign them useful IDs, change their appearance, and set the button text for each button instance, for example.

For more information about positioning buttons on screens, see Positioning Items .