今天第一天开始学习鸿蒙的ArkTS，发现真的方便很多尤其是在定义类时候，预祝Hamonyos

席卷全球!

今天学习的主要部分是条件渲染：

讲讲Toggle：

import { Toggle, ToggleType } from '@ohos.arkui.advanced'; // 部分版本需导入

@Entry
@Component
struct ToggleDemo {
  // 1. 用 @State 管理切换状态（双向绑定）
  @State isSwitchOn: boolean = false; 
  @State isCheckboxOn: boolean = true;

  build() {
    Column({ space: 20 }) {
      // 2. 示例1：开关型 Toggle（Switch）
      Toggle({ 
        type: ToggleType.Switch,  // 外观类型：开关（默认）
        isOn: this.isSwitchOn     // 绑定当前状态
      })
        .selectedColor(Color.Green)  // 选中时的颜色（滑块/勾选色）
        .onChange((isOn: boolean) => {  // 状态变化回调
          this.isSwitchOn = isOn;       // 更新状态
          console.log(`开关状态：${isOn ? '开' : '关'}`);
        })

      // 3. 示例2：复选框型 Toggle（Checkbox）
      Toggle({ 
        type: ToggleType.Checkbox,  // 外观类型：复选框
        isOn: this.isCheckboxOn 
      })
        .size({ width: 20, height: 20 })  // 自定义尺寸
        .onChange((isOn) => {
          this.isCheckboxOn = isOn;
        })

      // 4. 显示当前状态（辅助观察）
      Text(`开关状态：${this.isSwitchOn ? '开' : '关'}`)
      Text(`复选框状态：${this.isCheckboxOn ? '选中' : '未选'}`)
    }
    .padding(20)
  }
}

讲讲ForEach

//描述对象的格式
interface  PayItem{
  OrderName:string
  OrderPrice:number
  OrderDate:Date
}
@Entry
@Component
struct Demo02For {
  list: PayItem[] = [
    {
      OrderName: '给老婆买口红',
      OrderPrice: 299,
      OrderDate:new Date('2025/04/07')
    },
    {
      OrderName: '给老婆买花',
      OrderPrice: 99,
      OrderDate:new Date('2025/08/27')
    },
    {
      OrderName: '给自己买手机',
      OrderPrice: 999999,
      OrderDate:new Date('2025/09/07')
    }
  ]

  build() {
    Column(){
      ForEach(this.list,(item:PayItem)=>{
        Column({space:20}){
          Text(item.OrderName)
          .fontWeight(FontWeight.Bold)
            .width('100%')
        Row(){
            // $是模板字符串的语法标记（${表达式}表示“将表达式结果嵌入字符串”）
            Text(`￥${item.OrderPrice.toFixed(2)}`).fontColor(Color.Red)
          //表达式本身返回字符串
          Text(item.OrderDate.toLocaleDateString())
        }
        .width('100%')
          .justifyContent(FlexAlign.SpaceBetween)//.justifyContent：主轴对齐方式（仅 Flex 布局组件可用）
        }
        .width('100%')
        .padding(20)//内边距
      })
      Row(){
        Text('支付记录')
          .layoutWeight(1)
          .textAlign(TextAlign.Center)
          .margin({
            left:30
          })
          .width('100%')
          .padding(16)
          .border({
            width:{
              bottom:1
            },
            color:'#f4f5f6'
          })

      }
    }
  }
}