创建可缩放按钮和边框

您可以使用BorderImage 组件显示图像（如 PNG 文件）作为边框和背景。

使用两个边框图像和合适的图形来改变按钮被点击时的外观。您可以使用状态来决定哪张图片可见，具体取决于鼠标按钮是否按下。您还可以添加更多图片和状态，根据鼠标悬停等其他事件来改变按钮的外观。

使用Text 组件添加按钮文本。您还可以使用状态来更改按钮文本的颜色和字体大小。例如，可以放大或缩小按钮文本。

添加一个鼠标区域组件，覆盖整个区域并对鼠标事件做出反应。

创建按钮组件

要创建按钮组件，请选择File >New File > >。 Qt Quick Files> Qt Quick UI File>

Choose 以创建名为Button.ui.qml 的UI 文件（例如）。

构建按钮组件

构建按钮组件

1. 选择Design ，在2D 视图中编辑用户界面文件。
2. 选择Assets > ，将要使用的图像文件复制到项目文件夹。
3. 在Navigator 中，选择根组件，并在Properties 视图中设置按钮的宽度 (W) 和高度 (H) 以匹配计划使用的图片大小。这将指定按钮组件的初始大小。
4. 从Components >Default Components >Basic 中拖动两个Border Image 组件到Navigator 中的根组件。
5. 拖动一个Text 组件到根组件。
6. 在Navigator 中，选择根组件，然后在上下文菜单中选择Add Mouse Area 添加鼠标区域。
7. 选择边框图像，编辑其属性值：
   1. 在Id 字段中，输入边框图像的 ID。在本例中，我们使用 IDinactiveButton。
   2. 在Source 字段中，选择边框图像的图像文件。例如，inactive_button.png 。
   3. 在Layout 选项卡中，选择 (Fill to Parent) 按钮，使图像大小始终与其父对象相同。这将使按钮组件具有可扩展性，因为图像大小与组件大小绑定。
8. 选择其他边框图像，同样编辑其属性值：
   1. 在Id 字段中，输入activeButton。
   2. 在Source 字段中，选择按钮被点击时的图像文件。例如，active_button.png 。
   3. 在Layout 选项卡中，选择 (Fill to Parent) 按钮。
9. 选择文本组件，在Properties 中指定字体大小和颜色：
   1. 在Color 字段中，使用颜色选择器选择字体颜色，或在字段中输入数值。
   2. 在Font 组Size 字段中，输入字体大小。
   3. 在Layout 选项卡中，选择 (Vertical Center) 和 (Horizontal Center) 按钮，继承父代的垂直和水平居中。这可确保在调整组件大小时按钮标签居中。

使用状态更改组件属性值

1. 在States 视图中，选择 两次以创建两个新状态。

   

2. 选择State1 。
3. 将状态名称改为活动。
4. 选择 ，然后选择Set when Condition ，以确定何时应用该状态。
5. 在Binding Editor 中，选择mouseArea 组件和pressed 信号，指定在按下鼠标按钮时应用该状态。

   

6. 在Navigator 中选择文本组件，以指定按下按钮时放大文本大小。
7. 在Properties 中，选择Advanced 部分，并增加Scale 属性的值。
8. 选择Navigator 中的inactiveButton，通过更改Properties 中Visibility 属性的值，将其隐藏在活动状态。
9. 选择State2 。
10. 将状态名称更改为inactive。
11. 将状态的 when 条件设置为!mouseArea.pressed ，以指定当鼠标按钮未按下时应用该状态。

    

12. 选择Ctrl+S保存按钮。
13. 选择顶部工具栏上的Live Preview 按钮，查看选择按钮后的效果。拖动预览窗口的边框，查看调整组件大小后的效果。

按钮组件必须在项目中创建才能发挥作用。在项目中处理其他文件，为用户界面创建屏幕或其他组件时，按钮组件会出现在Components >My Components 中。您可以将其拖动到2D 或Navigator 视图中，创建按钮实例并修改其属性值，例如为它们分配有用的 ID、更改其外观以及为每个按钮实例设置按钮文本。

有关在屏幕上定位按钮的更多信息，请参阅使布局可扩展。