Creating Buttons

To create a button type:

1. 选择 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.

2. Click Design to edit the file in the Form Editor .
3. 在 Navigator , select Item and set the width ( W ) and height ( H ) of the button in the 特性 view.
4. Drag and drop a Rectangle 从 Library to the item in Navigator . This creates a nested item where the item is the parent of the rectangle. Items are positioned relative to their parents.
5. 在 特性 view, modify the appearance of the rectangle:
   1. 在 Color field, select the button color.
   2. 在 Radius field, set the radius of the rectangle to produce rounded corners for the button.
   3. 选择 Layout , and then select the ( Fill to Parent ) button to anchor the rectangle to the item.
6. Drag and drop a Text type to the item in Navigator .
7. 在 特性 view, edit the properties of the Text 类型。
   1. 在 Text field, enter Button .

      You can select the text color in the Text color field and the font, size, and style in the Font 章节。

   2. 在 Alignment field, select the center buttons to align the text to the center of the button.
   3. 选择 Layout > Fill to Parent to anchor the text to the whole button area.
8. Press Ctrl+S to save the button.

   

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 use it to create button instances and modify their properties to assign them useful IDs, change their appearance, and set the button text for each button instance, for example.

To create a graphical button that scales beautifully without using vector graphics, use the Border Image type. For more information, see Creating Scalable Buttons and Borders .