常用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事件

相关推荐
Myli_ing8 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风10 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟19 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾41 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript