常用UI组件

一、文本组件

1.1 概述

Text为文本组件,用于显示文字内容

1.2 参数

Text组件的参数类型为string | Resource

TypeScript 复制代码
@Entry
@Component
struct Index {
  build() {
    Column({space : 50}) {
      Text('你好')
        .fontSize(50)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

1.3 属性

字体大小可通过fontSize()方法进行设置,该方法的参数类型主要有string | number | Resource

字体粗细可通过fontWeight()方法进行设置

字体颜色可通过fontColor()方法进行设置,该方法的参数类型为Color | string | number | Resource

文本对齐可通过textAlign()方法进行设置,该方法的参数为枚举类型TextAlign

二、按钮

2.1 概述

Button为按钮组件,通常用于响应用户的点击操作

2.2 参数

Button组件有两种使用方式,分别是不包含子组件和包含子组件

TypeScript 复制代码
@Entry
@Component
struct Index {
  build() {
    Column({space : 50}) {
      //不包含子组件
      Button('按钮',{type:ButtonType.Capsule,stateEffect:true})
        .fontSize(25)
        .width(150)
        .height(60)

      //不包含子组件
      Button({type:ButtonType.Capsule,stateEffect:true}){
        Row({space:5}){
          Text('新建')
            .fontColor(Color.White)
            .fontSize(25)
            .fontWeight(500)
        }
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

2.3 常用属性

背景颜色可使用backgroundColor()方法进行设置

边框圆角的大小可使用borderRadius()方法进行设置

2.4 常用事件

可通过onClick()方法绑定点击事件

TypeScript 复制代码
Button('按钮',{type:ButtonType.Capsule,stateEffect:true})
        .fontSize(25)
        .width(150)
        .height(60)
        .onClick(() =>{
          console.log("我被点击了");
        })

三、切换按钮

3.1 概述

Toggle为切换按钮组件,一般用于两种状态之间的切换

3.2 参数

3.3 常用属性

**选中状态背景色:**可使用selectedColor()方法设置Toggle组件在选中或打开状态心爱的背景色

**Switch滑块颜色:**可使用设置switchPointColor()方法设置Switch类型的Toggle组件中的圆形滑块颜色

3.4 常用事件

Toggle组件常用事件为change事件,每当Toggle组件的状态发生变化,就会触发change事件

相关推荐
酷酷的阿云7 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205879 分钟前
web端手机录音
前端
齐 飞15 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹32 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10092 小时前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43912 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js