1. TextArea 基本使用

//TextArea 基本使用
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Column() {TextArea({placeholder: "请输入个人介绍",text: "个人介绍控制在200字以内。"}).margin({top: 100}).caretColor(Color.Red) //设置光标的颜色TextArea({placeholder: "请输入个人介绍"}).margin({top: 20}).caretColor(Color.Red) //设置光标的颜色.placeholderColor(Color.Pink) //设置提示信息的颜色.onChange((value: string) => {  //当输入的内容发生变化的时候，就会触发这个回调，拿到输入的内容console.info("----->输入的内容为:" + value)})}}
}

2. TextPicker 使用

//文本选择器
@Entry
@Component
struct TextPickerDemo {//动态数据，需要使用 @State 装饰器@State selected_hero_name: string = "赵云"heroes: string[] = ["刘备","赵云","马超","关羽","张飞"]build() {Column() {TextPicker({range: this.heroes,   //从哪里选择，是一个列表selected: 1  //默认选中，是一个index}).onChange((value: string) => {  //选中发生变化时的回调this.selected_hero_name = value})//Row 是横向的线性布局Row() {Text("你选择的英雄是:")Text(this.selected_hero_name)}.margin({top: 30,left: 50})}}
}

3. CheckboxGroup

//CheckboxGroup + 循环渲染+条件渲染
@Entry
@Component
struct CheckboxGroupDemo {//接收选择的结果集@State name: string[] = []//接收选择的状态@State status: number = 100build() {Column() {Text("选择你喜欢的🥬").fontSize(28).fontColor(Color.Green).fontWeight(FontWeight.Bold).margin({top: 50}).width("100%").textAlign(TextAlign.Center)Row() {CheckboxGroup({group: "veg"}).selectedColor(Color.Red) //设置选框的颜色/*** 全部、反选时的回调方法，在回调方法里面可以获取选中的结果及状态，状态有0、1、2三种状态* status = 0 ,表示全选* status = 1,表示部分选中* status = 2,表示一个都没有选*/.onChange((event: CheckboxGroupResult) => {this.name = event.namethis.status = event.status})Text("全选")}.margin(10)Row() {Checkbox({name: "veg1",group: "veg"})Text("黄瓜🥒")}Row() {Checkbox({name: "veg2",group: "veg"})Text("青椒🫑")}Row() {Checkbox({name: "veg3",group: "veg"})Text("胡萝卜🥕")}Text("name:" + this.name)Text("status:" + this.status)//循环渲染ForEach(this.name, (item) => {//条件渲染if (item == "veg1") {Text("黄瓜🥒")}if (item == "veg2") {Text("青椒🫑")}if (item == "veg3") {Text("胡萝卜🥕")}}, (item) => item.toString())}}
}

4. Radio

//单选框的使用
@Entry
@Component
struct RadioDemo {@State isSelectedMale: boolean = false@State isSelectedFemale: boolean = falsebuild() {Column() {Text("请选择性别").fontSize(28).fontColor(Color.Green).fontWeight(400).width("100%").textAlign(TextAlign.Center).margin({top: 100})Row() {Radio({value: "male",group: "sex"   //group ，小组名称，一个Radio组想要互斥，名称必须一致。}).onChange((isChecked: boolean) => {this.isSelectedMale = isChecked})Text("男")}.margin({top: 20})Row() {Radio({value: "famale",group: "sex"}).onChange((isChecked: boolean) => {this.isSelectedFemale = isChecked})Text("女")}Text("是否选择了男：" + this.isSelectedMale)Text("是否选择了女：" + this.isSelectedFemale)}}
}

5. Toggle

//开关组件
@Entry
@Component
struct ToggleDemo {//接收开关的状态@State isOn: boolean = falsebuild() {Column() {Toggle({type: ToggleType.Switch,  //开关类型isOn: true})Toggle({type: ToggleType.Checkbox,  //开关类型isOn: true})Toggle({type: ToggleType.Switch,isOn: this.isOn}).selectedColor(Color.Green).onChange((isOn: boolean) => {  //回调函数，可以拿到选择的结果this.isOn = isOn})Text("选择结果:" + this.isOn)}}
}