IMAU鸿蒙北向开发-2023年9月6日学习日志

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 = 100

  build() {
    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.name
            this.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 = false

  build() {
    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 = false

  build() {
    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)


    }
  }
}