当前位置：首页 > news >正文

ArkUI 文本/输入框，按钮，单选框，Toggle 组件全解 2

news 2026/6/23 2:23:18

一、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%') } }