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

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