【鸿蒙应用开发基础】常用组件Button

编程先锋
1,968 阅读6分钟

对于新手开发者来说，了解并掌握鸿蒙常用组件的使用方法是开启鸿蒙应用开发之旅的重要一步。

在本文中，我们将为你介绍一些常用的鸿蒙组件，以及如何使用它们来构建出色的用户界面。通过学习和实践这些组件，你将能够创建出美观、直观且易于使用的应用程序。

按钮组件是一个非常基本的UI控件，是程序和用户进行交互的重要组件。在本章中，我们将介绍这个ArkUI组件，你将学到如何创建一个简单的按钮并处理用户的交互，如何自定义按钮的背景和字体，如何为按钮添加边框以及如何创建一个既有图像又有文本的按钮。

创建新项目

首先，打开鸿蒙开发者工具（DevEco Studio）,并选择需要的Ability工程模板，创建一个新的ArkUI项目。单击Next按钮，如下图所示。

截图20231126095212.png 进入下一个界面，填写工程相关信息，主要选择Compile SDK，Language和Device Type，其他保持默认值即可，单击Finish按钮，如下图所示。

截图20231130111447.png 工程创建完成后，DevEco Studio会加载index.ets文件并显示预览画布。如下图所示。

截图20231130111908.png

创建Button组件

在ArkUI中创建按钮非常容易。你可以使用下面的代码片段来创建一个按钮。代码如下:

Button('Hello World')

此时，我们使用文本内容创建相应的按钮组件，Hello World文本就会变成一个可点击的按钮，效果如下图所示。

截图20231129124403.png

设置Button类型

在ArkUI框架中，我们可以创建不同样式的按钮，其类型包括胶囊型按钮、圆形按钮和普通按钮。你可以使用type属性来设置按钮的样式，例如，你可以设置type的值为ButtonType.Circle。此时，就会显示一个圆形按钮。效果如下图所示。

截图20231129125452.png 在创建按钮时，要执行用户点击事件，你可以使用onClick点击事件。代码如下:

Button('Hello World').onClick(()=>{
    console.log('Hello World Click')
})

console.log语句将日志输出到控制台。我们可以在模拟器上运行该应用程序。当你点击按钮时，你应该会在控制台上看到Hello World点击的日志输出。如下图所示。

截图20231130112520.png

设置Button是否可用

在ArkUI的通用属性中提供了一个enabled属性，你可以使用该属性来设置控件是否禁用。值为true表示组件可交互，响应点击等操作。值为false表示组件不可交互，不响应点击等操作。代码如下:

.enabled(false)

例如，如果将enabled属性应用于Button组件并将其值设置为false，则Button组件不可交互。用户点击按钮没有反应。如下图所示。

截图20231130122721.png

自定义Button的外观

现在你知道了如何创建一个简单的按钮，让我们使用属性自定义按钮的外观。 要更改背景和文本颜色，可以像这样使用backgroundColor和fontColor属性。代码如下:

Button('Hello World')
  .backgroundColor(Color.Green)
  .fontColor(Color.Orange)

如果要更改字体的粗细，可以使用fontWeight属性并设置值（例如FontWeight.Bold），如下所示：

Button('Hello World')
  .backgroundColor(Color.Green)
  .fontColor(Color.Orange)
  .fontWeight(FontWeight.Bold)

修改后，按钮的样式，如下图所示。

截图20231130142253.png

Button组件添加边框

如果，你想创建一个带边框的按钮，你可以使用border属性来定义边框的宽度和颜色。你可以更改Button组件的代码，如下所示:

Button('Hello World').backgroundColor(Color.White)
  .fontColor(Color.Black)
  .border({width: 2,color:Color.Black})

在以上的代码中，我们将Button组件的背景色设置为白色，border属性用于指定边框的宽度和颜色。你可以在预览界面中，查看效果。如下图所示。

截图20231130204136.png 在border属性中，你还可以使用style来设置边框的样式。边框的默认样式为一条实线。你还可以设置style的值为BorderStyle.Dotted，这时边框的样式会显示一系列圆点。如下图所示。

截图20231130205058.png 边框的样式除了以上的设置，你还可以使用对象的方式来指定某一侧的样式，如下代码:

.border({width: 2,color:Color.Black,style: {left: BorderStyle.Dotted}})

以上的代码中，我们将按钮的左侧边框样式设置为圆点样式的，你也可以设置右侧或者上下侧边框的样式。如下图所示。

截图20231130205820.png

创建带有图像和文本的按钮

到目前为止，我们只处理过文本按钮。这是因为使用文本内容创建相应的按钮组件，此时Button无法包含子组件。

在现实的项目中，你可能希望显示带有图像的按钮。创建图像按钮的语法完全相同，只需要将Image组件作为子组件添加到Button组件中，如下所示。

Button(){
  Image($r('app.media.icon_del')).width(32).height(32)
}.width(50).height(50)

这时，按钮的显示效果如下所示。

截图20231130210606.png 你也可以同时使用文本和图像来创建按钮。如下代码:

Button(){
    Row({space: 10}){
        Image($r('app.media.icon_del')).width(28).height(28)
        Text('删除').fontColor(Color.White)
    }
}.width('50%').height(50)

在以上的代码中，我们将Image组件和Text组件都嵌入到一个水平布局中。这将水平放置图标和文本。如下所示。

截图20231130211332.png

创建具有渐变背景的按钮

使用ArkUI，你不仅可以为背景定义特定的颜色，还可以轻松地将渐变效果应用于任何按钮，你可以轻松地使用通用属性的颜色渐变设置按钮的渐变颜色。

注意：设置颜色渐变需先设置backgroundColor为透明色。

首先，将背景颜色设置为透明色，如下所示:

.backgroundColor(Color.Transparent)

在ArkUI中，颜色渐变的效果支持线性渐变,角度渐变和径向渐变。你可以使用linearGradient属性，设置线性渐变的效果，如下所示:

 .linearGradient({ direction: GradientDirection.Right, colors:[[0xFF0000,0.0],[0x0000FF,1.0]] })

上面的代码使用了从左到右的线性渐变。它在左边以红色开始，在右边以蓝色结束，其中number表示指定颜色所处的位置，取值范围为[0,1.0]，0表示需要设置渐变色的容器的开始处，1.0表示容器的结尾处。此时，线性渐变的效果，如下图所示。

截图20231130212701.png 在线性渐变中，direction属性指定线性渐变的方向，它不仅支持从左到右，还支持其他方向的渐变，你可以使用点语法来访问其值。如下图所示。

截图20231130213227.png 你还可以自由使用自己的颜色来渲染渐变效果。例如，使用如下的颜色渐变效果。

.linearGradient({ direction: GradientDirection.Right,colors:[[0xFFE28A,0.0],[0xFBB03B,1.0]] })

有关颜色渐变的内容，你可以访问官方的文档。

总结

Button组件是鸿蒙ArkUI中最常用的组件之一，它可以帮助你在应用程序中创建各种吸引人的按钮，以引导用户进行交互。

avatar
文章
阅读
粉丝