鸿蒙开发之常用组件(一)

站长

2024年03月12日 17:07 · 阅读数 29

今天继续来学习鸿蒙相关知识，本篇鸿蒙相关内容我们来主要认识下ArkUI里面的常用组件

按钮(Button)

按钮组件在我们平时开发当中应该算是出现频率比较高的，它们不仅承载着不同功能，有的还要支持页面跳转，而且除了正常的需求开发，我们在平时写测试demo时候，按钮也是经常用的上，所以我们来看下鸿蒙的按钮组件支持哪些功能，首先创建一个按钮很容易，只需要创建个Button组件，然后给上宽高就好了

那么一个按钮肯定是要有个文案显示的，表示这个按钮代表的功能，给按钮加上文字也很容易，只需要将一个string或者Resource传给Button的label属性就好了

我们发现在没有给Button设置上任何样式代码的时候，呈现的是蓝色背景，圆角矩形的模样，那么我们如果想要更改下Button的样式，比如改一下背景颜色以及圆角大小，可以这样设置

可以看到最终呈现的样式背景色的确是按照我们的设置改了，但是圆角貌似没有变化，为什么呢？因为我们Button还有个ButtonType的属性，总共有三种Type,分别是Capsule,Circle以及Normal,而默认的Type就是Capsule胶囊类型，这种类型我们发现了它的圆角几乎是固定住了不能设置，如果想要设置更改下按钮的圆角大小，就需要将ButtonType更改为Normal，此时这种类型的Type默认圆角大小就为0，不信我们看下代码

看到没，很直溜的角，所以这种类型的Button，我们是可以自己去设置自己想要的圆角大小的，比如设置个5vp的圆角就是这样的

除此之外还有最后一种ButtonType，也就是Circle,那么大家肯定都知道这个是用来设置圆形按钮的，同样设置了以后，就不能更改圆角大小了

可以看到虽然代码中明确设置了圆角大小，但最终按钮依旧变成了一个圆形按钮，另外，我们也注意了，当按钮宽高不同的时候，圆形按钮的直径是以按钮的最小边长为准,最后我们看下如何给按钮设置点击事件,给按钮设置点击事件就是调用按钮的onClick函数，里面就接收一个回调，比如在上述按钮上增加个点击事件，然后弹出个Toast,Toast内容是Hello,HarmonyOs,代码如下

单选框（Radio）

单选框组件从名字上就知道，这个组件一次只能有一项被选中，每一个Radio组件对应着一个单选框，比如下面就是页面上创建三个单选框的代码

可以看到现在三个单选框之间是无法联动的，我们想要一个单选框被选中之后，另外所有单选框都变成未选中状态，那么只需要让他们属于同一个group就好了，更改一下代码

可以看到只需要将group的值变成一样的，单选框之间就能联动了，那么除了group，还有一个属性value，这个属性有啥作用呢，目前来看唯一的作用就是必须写，不写编译器会报错,每一个单选框创建出来后默认都是未选中状态，如果我们想要让某个单选框默认是被选中状态，只需要调用checked函数就好了

那么如何去监听某个单选框的选中状态呢，可以使用onChange函数，这个函数会回调一个布尔值，这个布尔值就代表着该单选框是否被选中，我们可以试一下在每一个单选框被选中之后，弹出个toast提示

切换按钮（Toggle）

刚刚我们讲的Radio组件设置的子项数量是不限制的，但是它的样式是无法自定义的，但是Toggle组件刚好相反，它只支持两种状态，但可以自定义样式,跟Button一样，Toggle也有不同的类型，分别是Button、Checkbox和Switch

不同的类型对应着不同的呈现样式，除了类型是Button的以外，其他两个只需要创建好Toggle，声明一下ToggleType就可以了，而Button类型的就需要自己去写子视图,刚刚说了比起Radio，Toggle还可以自己去更改样式，比如可以使用selectedColor函数去设置选中的背景色

除了背景色，在针对ToggleType是Switch的场景下，还可以改变圆形滑块的颜色，我们使用switchPointColor函数来设置

而Toggle的切换监听事件也是通过设置onChange函数来实现，通过函数回调过来的布尔值判断当前的切换按钮的状态，这里不做演示了，来看下一个

进度条（Progress）

进度条组件在一些有任务进度场景或者加载场景下使用的比较广泛，它的构造函数中有三个属性，分别是value,total和type

其中value是进度条当前进度，必传项，total是总进度，默认值为100，type是进度条类型，默认类型是线性样式，Progress组件总共有五种类型，它们分别是

线性样式：ProgressType.Linear
环形无刻度样式：ProgressType.Ring
环形有刻度样式：ProgressType.ScaleRing
圆形样式：ProgressType.Eclipse
胶囊样式：ProgressType.Capsule

线性样式

创建一个线性样式的进度条最简单的方式就是只传一个当前进度的参数，其他都用默认设置，像下面这样

可以看到此时进度条颜色是蓝色的，背景色是灰色，整体宽度也比较细，并且此时当value为50的时候，进度是在整个进度条的中间，说明总进度为100，那么像上述提到的这些属性其实我们都可以去自己设置，比如稍作修改后代码变成了下面这个样子

可以看到修改了一下total的值，让value为50的进度从原来的一半变成差不多三分之二的位置，通过设置color更改了进度条的颜色，通过backgroundColor更改了背景颜色，并且在style里面通过设置strokeWidth改变了进度条的高度,线性样式还有一个特性，我们默认进度条的方向是水平方向的，但是当进度条的宽小于高的时候，进度条就会变成垂直方向，看下下面这个例子