arkUI：Taggle开关按钮的使用

原创已于 2024-11-10 16:52:31 修改 · 532 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ts #harmony #arkUI #Taggle #开关摁钮

于 2024-11-06 19:32:49 首次发布

arkUI 专栏收录该内容

22 篇文章

订阅专栏

arkUI：Taggle开关按钮的使用

1 主要内容说明
2 相关内容
- 2.1 Toggle开关摁钮
3.结语
4.定位日期

1 主要内容说明

Toggle 组件可以实现复选框、开关和按钮类型的交互。可以结合 @State 变量的使用，使图片的路径可以动态更新，并通过 onChange 回调实现图片的切换。Row 组件内通过使用 Image 显示图片，结合 Toggle 类型的切换按钮来实现动态交互。

2 相关内容

2.1 Toggle开关摁钮

imagePath 需要声明为 Resource 类型，而不是 string，因此已保持为 Resource 类型，确保可以存储资源路径。在 Row() 中的 Toggle 组件点击事件中使用了 onChange，根据开关的状态动态更新 imagePath，从而切换图片。需要确保对 imagePath 的更新使用正确的图片资源路径。对于按钮类型的 Toggle，每次点击按钮时，onChange 会被触发。根据 isOn 的值来判断当前状态，并进行图片的切换。

2.1.1 源码1 （Toggle开关摁钮）

@Entry
@Component
struct PageToggle {
  @State switch_1: string = "打开";  // 使用 @State 定义一个开关状态，初始值为"打开"
  @State imagePath: Resource = $r("app.media.xiaowoniu764"); // 使用 @State 定义一个图片资源状态，初始图片为 "xiaowoniu764"

  build() {
    // 使用 Column 布局容器，设置子组件之间的间距为 30
    Column({ space: 30 }) {

      // 第一行：两个复选框类型的 Toggle 组件
      Row() {
        Toggle({ type: ToggleType.Checkbox, isOn: true })  // 第一个复选框，初始状态为选中
        Toggle({ type: ToggleType.Checkbox, isOn: false }) // 第二个复选框，初始状态为未选中
      }
      .backgroundColor("#bdd")  // 设置背景色为浅蓝色
      .height(60)                // 设置 Row 高度为 60
      .width("90%")              // 设置 Row 宽度为 90%

      // 第二行：两个开关类型的 Toggle 组件
      Row() {
        Toggle({ type: ToggleType.Switch, isOn: true })  // 第一个开关，初始状态为开
        Toggle({ type: ToggleType.Switch, isOn: false }) // 第二个开关，初始状态为关
      }
      .backgroundColor("#ff96d48a") // 设置背景色为浅绿色
      .height(60)
      .width("90%")

      // 第三行：按钮类型的 Toggle，显示 "打开" 或 "关闭" 文本
      Row() {
        Toggle({ type: ToggleType.Button, isOn: true }) {
          Text(this.switch_1)  // 根据开关状态显示相应的文本
        }
        .width(100)
        .onChange((isOn: boolean) => {  // 监听按钮的状态变化
          console.log(isOn + "")  // 输出当前状态到控制台
          this.switch_1 = isOn ? "打开" : "关闭";  // 根据开关状态更新文本
        })
      }
      .backgroundColor("#ffe2bb55")  // 设置背景色为浅黄色
      .height(60)
      .width("90%")

      // 第四行：按钮类型的 Toggle，点击切换图片
      Row() {
        Toggle({ type: ToggleType.Button, isOn: true }) {
          Image(this.imagePath)  // 根据 imagePath 显示图片
            .width(150)          // 设置图片宽度为 150
            .height(100)         // 设置图片高度为 100
        }
        .onChange((isOn: boolean) => {  // 监听按钮状态变化事件
          // 根据开关状态更新图片路径
          if (isOn) {
            this.imagePath = $r("app.media.xiaowoniu764");  // 图片切换为 "xiaowoniu764"
          } else {
            this.imagePath = $r("app.media.xue_ren");  // 图片切换为 "xue_ren"
          }
        })
      }
      .backgroundColor("#ff51c3d2")  // 设置背景色为紫色
      .height(160)  // 设置 Row 高度为 160
      .width("90%") // 设置 Row 宽度为 90%
    }
    .width("100%")  // 设置 Column 宽度为 100%
    .height("100%") // 设置 Column 高度为 100%
    .backgroundColor("#fcc")  // 设置 Column 背景色为淡粉色
  }
}