一、Text/TextInput（文本/输入框）

Text 用于展示静态文字内容；TextInput 提供输入交互区域，接收用户手动输入文本，常用于登录、表单填写页面。

核心属性

Text 组件属性

• fontSize：文字字号大小
• fontWeight：文字粗细，支持 Bold 粗体、Medium 常规等枚举
• textAlign：文本对齐方式，TextAlign.Center 居中
• width：组件宽度，支持数值 / 百分比

TextInput 组件属性

• placeholder：输入框空白时的灰色提示文字
• type：输入框类型，InputType.Normal 普通文本模式
• backgroundColor：组件背景色十六进制色值
• borderRadius：输入框圆角大小

案例：

@Entry
@Component
struct TextDemo1{
  build() {
    Column({space:50}){
      Text('这是一段文本！')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)
        .width('100%')

      TextInput({placeholder:"请输入账号"})
        .type(InputType.Normal)
        .height(60)
        .width(300)
        .backgroundColor(0xFFF0F2F5 )
        .borderRadius(16)
    }
    .width('100%')
    .height('100%')

  }
}

展示：

 二、Button（按钮）

提供可点击交互控件，绑定点击事件执行业务逻辑，支持自定义尺寸、背景、文字、边框、圆角样式。

核心属性

• backgroundColor：按钮背景颜色
• fontSize：按钮内文字字号
• fontWeight：按钮文字粗细
• fontColor：按钮文字颜色
• border：自定义边框（宽度、颜色）
• borderRadius：按钮圆角数值

案例：

@Entry
@Component
struct ButtonDemo1{
  build() {
    Column({space:20}){
      Button('确认提交')
        .height(50)
        .width(150)
        .backgroundColor(0xFF2A5E9E)
        .fontSize(28)
        .fontWeight(FontWeight.Medium)

      Button('取消操作')
        .height(50)
        .width(150)
        .backgroundColor(0xFF2A5E9E)
        .fontSize(28)
        .fontWeight(FontWeight.Medium)

      Button('确认删除')
        .height(50)
        .width(150)
        .backgroundColor(0xFF2A5E9E)
        .fontSize(28)
        .fontWeight(FontWeight.Medium)

      Button('登录')
        .height(50)
        .width(150)
        .backgroundColor(Color.Transparent)
        .fontSize(26)
        .fontColor(Color.Black)
        .borderRadius(35)
        .border({width:5,color:0xFFFF99AA})
        .fontWeight(FontWeight.Medium)


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

展示：

  三、Radio（单选框）

分组单选控件，同一 group 分组内仅可选中一项，用于问卷、性别、单项选择表单场景。

核心属性

• value：单选框唯一标识值
• group：分组名称，同组 Radio 互斥单选
• checked：是否默认选中（true 选中 /false 未选中）

案例：

@Entry
@Component
struct RadioDemo1{
  build() {
    Column(){
      Text('第一题')
      Radio({ value: 'Radio1', group: 'radioGroup' })
        .checked(false)
        .height(30)
        .width(30)
      Radio({ value: 'Radio2', group: 'radioGroup' })
        .checked(true)
        .height(30)
        .width(30)
      Radio({ value: 'Radio3', group: 'radioGroup' })
        .checked(false)
        .height(30)
        .width(30)
      Radio({ value: 'Radio4', group: 'radioGroup' })
        .checked(false)
        .height(30)
        .width(30)

      Text('第二题')
      Radio({ value: 'Radio1', group: 'radioGroup1' })
        .checked(false)
        .height(30)
        .width(30)
      Text('A')
      Radio({ value: 'Radio2', group: 'radioGroup1' })
        .checked(true)
        .height(30)
        .width(30)
      Text('B')

      Row(){
        Text('性别:')
        Radio({ value: '女', group: 'sex' })
          .checked(true)
          .height(30)
          .width(30)
        Text('女')
          .fontSize(20)
          .margin({right:20})
        Radio({ value: '男', group: 'sex' })
          .checked(false)
          .height(30)
          .width(30)
        Text('男')
          .fontSize(20)
      }
      .margin({top:30})

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

展示：

   四、Toggle（切换按钮）

二元切换控件，支持按钮样式、滑块开关样式，用于开启 / 关闭类功能设置。

核心属性

• type：开关类型，ToggleType.Button 按钮型、ToggleType.Switch 滑块型
• isOn：开关默认状态，true 开启 /false 关闭
• selectedColor：开关开启状态背景色
• switchPointColor：滑块圆点颜色
• id：组件唯一标识

案例：

@Entry
@Component
struct ToggleDemo{
  build() {
    Column(){
      Toggle({
        type:ToggleType.Button,
        isOn:true
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Yellow)
        .id('n1')

      Toggle({
        type:ToggleType.Switch,
        isOn:false
      })
        .width(150)
        .height(50)
        .selectedColor(0xFFD0E8FF)
        .switchPointColor(Color.Pink)
        .id('n2')
    }
    .width('100%')
    .height('100%')
  }
}

展示：