创建可缩放的按钮和边框

您可以使用BorderImage 组件，将图像（例如PNG文件）用作边框和背景。

使用两张边框图片和合适的图形，可在按钮被点击时改变其外观。您可以利用状态来根据鼠标按钮是否被按下，来决定显示哪张图片。您还可以添加更多图片和状态，根据其他鼠标事件（例如悬停）来改变按钮的外观。

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

添加一个覆盖整个区域并响应鼠标事件的“鼠标区域”（Mouse Area）组件。

创建按钮组件

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

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

构建按钮组件

要构建按钮组件：

1. 在“2D ”视图中选择Design 以编辑该UI文件。
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。在本示例中，我们使用 ID“inactiveButton”。
   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. 将状态名称更改为active。
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 ”按钮，查看选中该按钮时的行为。拖动预览窗口的边框，查看调整组件大小时会发生什么。

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

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