暂无图片
暂无图片
暂无图片
暂无图片
暂无图片
首页 / 05. 快速上手！HarmonyOS4.0 Button/Blank 基础组件详解

05. 快速上手！HarmonyOS4.0 Button/Blank 基础组件详解

原创 若城 2024-03-28
1726

Table of Contents

本章内容概要

image.png

Button 概念

Button： 按钮组件，可快速创建不同样式的按钮。

Button 使用方法

ButtonType 按钮类型添加

一共有两种写法， 根据个人喜好来选择哦！！

/**
 * @Author: 若城
 * @Description:
 */
@Entry
@Component
struct ButtonNote {

  build() {
    Row() {
      Column() {
         Row(){
           Text('按钮类型')
             .fontSize(25)
             .fontColor('#ccc')
             .fontWeight(800)
         }
         .width('100%')
         .height(50)
         .padding(10)
        Row(){
//          写法一
//           Button('胶囊型按钮').type(ButtonType.Capsule)
//           Button('圆').type(ButtonType.Circle)
//           Button('普通按钮').type(ButtonType.Normal)

//          写法二:
          Button('胶囊型按钮', {type:ButtonType.Capsule})
          Button('圆', {type:ButtonType.Circle})
          Button('普通按钮', {type:ButtonType.Normal})

        }
        .height(100)
        .width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)
//分隔线
        Divider().strokeWidth(3).color('#999')


      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Start)
      .padding(10)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Start)
  }
}
名称 描述
Capsule 胶囊型按钮（圆角默认为高度的一半）。
Circle 圆形按钮。
Normal 普通按钮（默认不带圆角）。

stateEffect 按钮状态添加

按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。
默认值：true
说明：当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。

Button('胶囊型按钮', {type:ButtonType.Capsule, stateEffect:false})
Button('圆', {type:ButtonType.Circle, stateEffect:true})
Button('普通按钮', {type:ButtonType.Normal, stateEffect:true})

按钮文本内容 设置

字符串类型

字符串类型 用法如 1.2. ButtonType 按钮类型添加， 1.3. stateEffect 按钮状态添加 ， 直接在组件内添加字符串即可

Resource 类型

资源引用类型，引入系统资源或者应用资源中的字符串。
如下图所示在element 下的string.json 文件中编写所要展示的内容

image.png
image.png
image.png

效果展示

image.png

Row(){
	Button($r('app.string.ResourceName'), {type:ButtonType.Capsule, stateEffect:false})
}
.height(100)
	.width('100%')
	.justifyContent(FlexAlign.SpaceEvenly)

禁用按钮

image.png

Row(){

	Button('禁用状态', {type:ButtonType.Normal, stateEffect:false})
		.opacity(0.4)
		.borderRadius(8)
		.backgroundColor(0x317aff)
		.width(100)

	Button('禁用状态', {type:ButtonType.Capsule, stateEffect:false})
		.opacity(0.4)
		.borderRadius(8)
		.backgroundColor(0x317aff)
		.width(100)

	Button('禁用状态', {type:ButtonType.Circle, stateEffect:false})
		.opacity(0.4)
		.borderRadius(8)
		.backgroundColor(0x317aff)
		.width(100)
}
.height(100)
	.width('100%')
	.justifyContent(FlexAlign.SpaceEvenly)

加载按钮

此处使用了LoadingProgress组件可参考

效果展示

image.png

代码展示

Row() {

	Button({ type: ButtonType.Circle, stateEffect: true }) {
		LoadingProgress().width(20).height(20).color(0xFFFFFF)
	}

	Button({ type: ButtonType.Capsule, stateEffect: true }) {
		Row() {
			LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
			Text('加载中..').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
		}.alignItems(VerticalAlign.Center).width(90).height(40)
	}

	Button({ type: ButtonType.Normal, stateEffect: true }) {
		Row() {
			LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
			Text('加载中..').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })

		}.alignItems(VerticalAlign.Center).width(90).height(40)
	}


}
.height(100)
	.width('100%')
	.justifyContent(FlexAlign.SpaceEvenly)

�

添加按钮点击事件

效果演示

tutieshi_640x287_8s.gif

代码演示

Row() {

  Button('+', {type:ButtonType.Circle}).fontSize(18)
    .onClick(()=>{
      this.num++
    })
  Text(this.num.toString()).fontSize(18).width(100).textAlign(TextAlign.Center)
  Button('-', {type:ButtonType.Circle}).fontSize(18)
    .onClick(()=>{
      this.num--
    })

}
.height(100)
  .width('100%')
  .justifyContent(FlexAlign.Center)

�

点击事件优化

效果展示

数据小于0 不可以点击
image.png

代码演示

Row() {
    Button('+', {type:ButtonType.Circle}).fontSize(18)
      .onClick(()=>{
        this.num++
      })


  Text(this.num.toString()).fontSize(18).width(100).textAlign(TextAlign.Center)
if ( this.num>= 1){
  Button('-', {type:ButtonType.Circle}).fontSize(18)
    .onClick(()=>{
      this.num--
    })
}else{
  Button('-', {type:ButtonType.Normal, stateEffect:false})
    .opacity(0.4)
    .fontSize(18)
    .width(50)
    .height(50)
    .backgroundColor(0x317aff)
    .borderRadius(50)
}

}
.height(100)
.width('100%')
.justifyContent(FlexAlign.Center)

Blank概念

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。
仅当父组件为Row/Column/Flex时生效。

�Blank组件使用

效果演示

image.png

代码演示

Row() {
	Button('左侧按钮')
	Blank()
	Button('右侧按钮')


}
.height(100)
	.width('100%')

�

完整案例代码

注意下面的代码主要是在编写上面案例时的衍生， 因此可能会存在注释，内容配置等情况， 需注意

/**
 * @Author: 若城
 * @Description:
 */
@Entry
  @Component
  struct ButtonNote {
    @State num:number = 1
    build() {
      Row() {
        Column() {
          List(){
            ListItem(){
              Column(){
                Row() {
                  Text('按钮类型')
                    .fontSize(25)
                    .fontColor('#ccc')
                    .fontWeight(800)
                }
                .width('100%')
                  .height(50)
                  .padding(10)

                Row() {
                  //          写法一
                  //           Button('胶囊型按钮').type(ButtonType.Capsule)
                  //           Button('圆').type(ButtonType.Circle)
                  //           Button('普通按钮').type(ButtonType.Normal)

                  //          写法二:
                  Button('胶囊型按钮', { type: ButtonType.Capsule })
                  Button('圆', { type: ButtonType.Circle })
                  Button('普通按钮', { type: ButtonType.Normal })

                }
                .height(100)
                  .width('100%')
                  .justifyContent(FlexAlign.SpaceEvenly)
                //分隔线
                Divider().strokeWidth(3).color('#999')

                Row() {
                  Text('按压状态')
                    .fontSize(25)
                    .fontColor('#ccc')
                    .fontWeight(800)
                }
                .width('100%')
                  .height(50)
                  .padding(10)

                Row() {
                  //          写法一
                  //           Button('胶囊型按钮').type(ButtonType.Capsule)
                  //           Button('圆').type(ButtonType.Circle)
                  //           Button('普通按钮').type(ButtonType.Normal)

                  //          写法二:
                  Button('胶囊型按钮', { type: ButtonType.Capsule, stateEffect: false })
                  Button('圆', { type: ButtonType.Circle, stateEffect: true })
                  Button('普通按钮', { type: ButtonType.Normal, stateEffect: true })

                }
                .height(100)
                  .width('100%')
                  .justifyContent(FlexAlign.SpaceEvenly)


                //分隔线
                Divider().strokeWidth(3).color('#999')

                Row() {
                  Text('ResourceStr')
                    .fontSize(25)
                    .fontColor('#ccc')
                    .fontWeight(800)
                }.width('100%')
                  .height(50)
                  .padding(10)

                Row() {
                  Button($r('app.string.ResourceName'), { type: ButtonType.Capsule, stateEffect: false })
                }
                .height(100)
                  .width('100%')
                  .justifyContent(FlexAlign.SpaceEvenly)


                //分隔线
                Divider().strokeWidth(3).color('#999')

                Row() {
                  Text('禁用按钮')
                    .fontSize(25)
                    .fontColor('#ccc')
                    .fontWeight(800)
                }.width('100%')
                .height(50)
                .padding(10)

                Row() {

                  Button('禁用状态', { type: ButtonType.Normal, stateEffect: false })
                    .opacity(0.4)
                    .borderRadius(8)
                    .backgroundColor(0x317aff)
                    .width(100)

                  Button('禁用状态', { type: ButtonType.Capsule, stateEffect: false })
                    .opacity(0.4)
                    .borderRadius(8)
                    .backgroundColor(0x317aff)
                    .width(100)

                  Button('禁用状态', { type: ButtonType.Circle, stateEffect: false })
                    .opacity(0.4)
                    .borderRadius(8)
                    .backgroundColor(0x317aff)
                    .width(100)
                }
                .height(100)
                .width('100%')
                .justifyContent(FlexAlign.SpaceEvenly)

                //分隔线
                Divider().strokeWidth(3).color('#999')

                Row() {
                  Text('加载中样式')
                    .fontSize(25)
                    .fontColor('#ccc')
                    .fontWeight(800)
                }.width('100%')
                .height(50)
                .padding(10)

                Row() {

                  Button({ type: ButtonType.Circle, stateEffect: true }) {
                    LoadingProgress().width(20).height(20).color(0xFFFFFF)
                  }

                  Button({ type: ButtonType.Capsule, stateEffect: true }) {
                    Row() {
                      LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
                      Text('加载中..').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
                    }.alignItems(VerticalAlign.Center).width(90).height(40)
                  }

                  Button({ type: ButtonType.Normal, stateEffect: true }) {
                    Row() {
                      LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
                      Text('加载中..').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })

                    }.alignItems(VerticalAlign.Center).width(90).height(40)
                  }


                }
                .height(100)
                .width('100%')
                .justifyContent(FlexAlign.SpaceEvenly)


                //分隔线
                Divider().strokeWidth(3).color('#999')

                Row() {
                  Text('点击事件')
                    .fontSize(25)
                    .fontColor('#ccc')
                    .fontWeight(800)
                }.width('100%')
                .height(50)
                .padding(10)

                Row() {

                    Button('+', {type:ButtonType.Circle}).fontSize(18)
                      .onClick(()=>{
                         this.num++
                      })
                    Text(this.num.toString()).fontSize(18).width(100).textAlign(TextAlign.Center)
                    Button('-', {type:ButtonType.Circle}).fontSize(18)
                      .onClick(()=>{
                         this.num--
                      })

                }
                .height(100)
                .width('100%')
                .justifyContent(FlexAlign.Center)



                //分隔线
                Divider().strokeWidth(3).color('#999')

                Row() {
                  Text('点击事件优化')
                    .fontSize(25)
                    .fontColor('#ccc')
                    .fontWeight(800)
                }.width('100%')
                .height(50)
                .padding(10)

                Row() {
                    Button('+', {type:ButtonType.Circle}).fontSize(18)
                      .onClick(()=>{
                        this.num++
                      })


                  Text(this.num.toString()).fontSize(18).width(100).textAlign(TextAlign.Center)
                if ( this.num>= 1){
                  Button('-', {type:ButtonType.Circle}).fontSize(18)
                    .onClick(()=>{
                      this.num--
                    })
                }else{
                  Button('-', {type:ButtonType.Normal, stateEffect:false})
                    .opacity(0.4)
                    .fontSize(18)
                    .width(50)
                    .height(50)
                    .backgroundColor(0x317aff)
                    .borderRadius(50)
                }

                }
                .height(100)
                .width('100%')
                .justifyContent(FlexAlign.Center)


                //分隔线
                Divider().strokeWidth(3).color('#999')

                Row() {
                  Text('Blank组件演示')
                    .fontSize(25)
                    .fontColor('#ccc')
                    .fontWeight(800)
                }.width('100%')
                .height(50)
                .padding(10)

                Row() {
                  Button('左侧按钮')
                  Blank()
                  Button('右侧按钮')


                }
                .height(100)
                .width('100%')
              }
           }
        }


      }
      .width('100%')
      .height('100%')
      .alignItems(HorizontalAlign.Start)
      .padding(10)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Start)
  }
}

�

墨力计划harmonyos入门宝典
「喜欢这篇文章，您的关注和赞赏是给作者最好的鼓励」
关注作者
【版权声明】本文为墨天轮用户原创内容，转载时必须标注文章的来源（墨天轮），文章链接，文章作者等基本信息，否则作者和墨天轮有权追究责任。如果您发现墨天轮中有涉嫌抄袭或者侵权的内容，欢迎发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

文章被以下合辑收录

Harmonyos从入门到实战（共233篇）
harmonyos 从入门到实战

评论