鸿蒙开发笔记(十九): 常用组件 Button, Radio,Toggle, Progress, Text

最新推荐文章于 2025-04-10 18:34:19 发布

ZWaruler

最新推荐文章于 2025-04-10 18:34:19 发布

阅读量2k

点赞数 30

分类专栏：鸿蒙开发文章标签： harmonyos 鸿蒙开发移动开发

本文链接：https://blog.youkuaiyun.com/u010483016/article/details/135698811

版权

本文介绍了ReactNative中的几种常见UI组件，包括Button（按钮）、Radio（单选框）、Toggle（切换按钮）、Progress（进度条）以及Text和Span的使用方法，展示了如何设置样式、绑定事件和处理状态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 按钮 Button

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

Button通过调用接口来创建，接口调用有以下两种形式：

创建不包含子组件的按钮。

Button(label?: string, options?: {
    type?: ButtonType, stateEffect?: boolean })

该接口用于创建不包含子组件的按钮，其中label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

Button('Ok', {
    type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

创建包含子组件的按钮。

Button(options?: {
   type?: ButtonType, stateEffect?: boolean})

该接口用于创建包含子组件的按钮，只支持包含一个子组件，子组件可以是基础组件或者容器组件。

Button({
     type: ButtonType.Normal, stateEffect: true }) {
   
  Row() {
   
    Image($r('app.media.loading')).width(20).height(40).margin({
    left: 12 })
    Text('loading').fontSize(12).fontColor(0xffffff).margin({
    left: 5, right: 12 })
  }.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

Button有三种可选类型，分别为Capsule（胶囊类型）、Circle（圆形按钮）和Normal（普通按钮），通过type进行设置。只有Normal类型支持通过borderRadius属性重新设置圆角。

Button组件通常用于触发某些操作，可以绑定onClick事件来响应点击操作后的自定义行为。

Button('Ok', {
    type: ButtonType.Normal, stateEffect: true }) 
  .onClick(()=>{
    
    console.info('Button onClick') 
  })

在这里插入图片描述

2. 单选框 Radio

Radio(options: {
   value: string, group: string})

该接口用于创建一个单选框，其中value是单选框的名称，group是单选框的所属群组名称。checked属性可以设置单选框的状态，状态分别为false和true时，设置为true时表示单选框被选中。Radio仅支持选中和未选中两种样式，不支持自定义颜色和形状。

除支持通用事件外，Radio通常用于选中后触发某些操作，可以绑定 onChange事件 来响应选中操作后的自定义行为。

// xxx.ets
@Entry
@Component
struct RadioExample {
   
  build() {
   
    Flex({
     direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
   
      Column() {
   
        Text('Radio1')
        Radio({
    value: 'Radio1', group: 'radioGroup' }).checked(true)
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
   
            console.log('Radio1 status is ' + isChecked)
          })
      }
      Column() {
   
        Text('Radio2')
        Radio({
    value: 'Radio2', group: 'radioGroup' }).checked(false)
          .height(

最低0.47元/天解锁文章