HarmonOS 通用组件(Button)

本文我们来看看基础组件中的 Button
这是 ArkTS ui 原生支持的一个组件
用来创建不同样式的按钮
在这里插入图片描述
首先我们还是创建一个最基本的组件结构

@Entry
@Component
struct Index {
    
    

  build() {
    
    
    Row() {
    
    
      Column() {
    
    
        
      }
      .width('100%')
    }
    .height('100%')
  }
}

我们可以在 Column 组件中加入一个button内容

Button() {
    
    
    Text("测试工具").fontSize(26)
}

在这里插入图片描述
然偶我们输入 Button({type: ButtonType.}) { 就会给出我们 ButtonType下面的类型提示

ButtonType.Normal 这是一个直角的效果很明显加上去我们按钮偏圆滑的几个角里面直起来了

这里为了颜色看着方便我们直接将字体 fontColor(“#ffffff”) 改为白色
在这里插入图片描述
ButtonType.Capsule 圆角放上去角立马圆滑了

ButtonType.Circle 但这个就有点圆的离谱了

我们可以通过高宽把它调大一点

 Button({
    
    type: ButtonType.Circle}) {
    
    
	Text("测试工具")
	   .fontSize(26)
	   .fontColor("#ffffff")
}
.width(150)
.height(150)

在这里插入图片描述
是不是有种钉钉打开那个按钮的感觉啦哈哈哈

然后我们可以这样写

Button({
    
    type: ButtonType.Normal}) {
    
    
	  Row() {
    
    
	    LoadingProgress()
	      .width(26)
	      .height(26)
	      .color("#ffffff")
	    Text("测试工具")
	      .fontSize(26)
	      .fontColor("#ffffff")
	  }
}
.width(200)
.height(100)

这里我们用了一个行元素在button按钮组件中然后前面是一个新组件 LoadingProgress
运行之后我们LoadingProgress是一个会自动旋转的小图标
在这里插入图片描述
可以当做一个加载动画来用告诉用户我们正在加载

然后我们加一个参数

stateEffect: true

将他设置为true时我们按住按钮明显它会颜色更深一点
在这里插入图片描述
设为false 你会发现按下去就没什么反应了感觉

只是一个视觉效果但是感觉没有还是体验不太好 stateEffect默认就是true 一般没什么特殊产品要求让他不要有这个效果我们最好还是别动它的

我们可以通过 opacity 调整透明度 1 完全展示 0完全透明这里我们给 0.4
看着就会有一种透明禁用的感觉
在这里插入图片描述
然后还有这种写法

Button("你好",{
    
    type: ButtonType.Normal, stateEffect: true})
.width(200)
.height(100)
.opacity(0.4)

第一个参数文本内容第二个参数配置对象
在这里插入图片描述

HarmonOS 通用组件(Button)

猜你喜欢