1.轮播图

@Entry
@Component
struct SwiperDemo2{
  private bannerList:Resource[] = [
    $r('app.media.first'),
    $r('app.media.second'),
    $r('app.media.third')
  ]
//在组件内部定义了一个私有数组，存放了三张本地图片资源（first, second, third），作为轮播图的数据源。
  build() {
    Column() {  //最外层的垂直布局容器，用于包裹整个轮播图模块。由于没有设置宽高和对齐方式，它会默认适应内容大小并靠左上角对齐。
      Swiper() {  //轮播容器组件。它的特性是子组件会像幻灯片一样依次展示，并且支持手势滑动。
        ForEach(this.bannerList, (item: Resource) => {  //遍历 bannerList 数组，根据数组的长度自动生成对应数量的子组件。以后如果要增加或减少轮播图，只需修改上面的数组即可，无需手动添加代码。
          Image(item)  //将每一项数据渲染为图片组件。
            .width('98%')
            .height('100%')
            .objectFit(ImageFit.Cover)  //设置图片填充模式为 Cover。这意味着图片会保持原始比例缩放，完全覆盖显示区域，超出的部分会被裁剪。这能有效防止不同尺寸的图片在轮播时被拉伸变形。
        })
      }
      .width('100%')
      .height('30%')
      .autoPlay(true)  //开启自动播放功能，页面加载后会自动切换图片。
      .interval(1000)  //设置自动切换的时间间隔为 1000 毫秒（即 1 秒）。默认通常是 3000 毫秒（3秒），这里设为 1 秒是为了快速演示效果。
      .loop(true)  //开启循环播放模式，当播放到最后一张图片时，会自动无缝衔接回第一张。
    }
  }
}

总结：这段代码是一个非常标准且实用的轮播图实现方案。通过 ForEach 实现了数据驱动视图，配合 Swiper 的 autoPlay、interval 和 loop 属性，轻松打造了一个能够无限循环、定时自动播放的广告位或焦点图。

2.tabs

@Entry
@Component
struct TabsBase1{
  build() {
    Tabs(){  //选项卡容器组件。它的核心作用是在一个页面内实现视图内容的快速切换，提高空间利用率。
      TabContent(){  //内容面板组件，这里放了一个字号为 24 的文本“首页页面”。
        Text('首页页面')  //为该页签配置对应的导航标签，直接传入字符串 '首页' 作为页签的显示文字。
          .fontSize(24)
      }
      .tabBar('首页')
      TabContent(){
        Text('分类页面')
          .fontSize(24)
      }.tabBar('分类')
      TabContent(){
        Text('个人中心页面')
          .fontSize(24)
      }.tabBar('个人中心')
      TabContent(){
        Text('关于我们的页面')
          .fontSize(24)
      }.tabBar('关于我们')
    }
    .barPosition(BarPosition.Start)   //设置页签栏的位置在页面的开头（即顶部导航）。如果不写这个属性，默认也是从顶部开始。如果设置为 BarPosition.End，则会变成底部导航。
  }
}

总结：这段代码是一个非常标准的顶部选项卡示例。通过 Tabs 将四个不同的内容区域（TabContent）整合在一起，用户点击顶部的页签（由 .tabBar() 生成），即可无缝切换到对应的内容面板，非常适合用于资讯类应用或功能分区明确的页面。

3.Text/TextInput（文本/输入框）

@Entry
@Component
struct TextDemo{
  build() {
    Column(){
      Text('这是一段文本！') //创建一个文本组件，显示指定的字符串。
        .fontSize(30)
        .fontColor(0xd5d5d5)
        .fontWeight(FontWeight.Bolder)
        .textAlign(TextAlign.Center) //设置文本内容在组件内部居中对齐。
        .width('100%')///文本组件

      TextInput({placeholder:"请输入账号"})//创建一个单行文本输入框，并设置未输入时的占位提示文字为“请输入账号”。
        .type(InputType.Normal)
        .height(70)
        .width(280)
        .backgroundColor(0xd5d5d5)
        .borderRadius(24)///输入框组件
    }
    .height('100%')
    .width('100%')
  }
}

总结：这段代码是一个非常标准的垂直布局基础示例。通过 Column 容器将文本展示（Text）与单行输入框（TextInput）整合在一起，实现了基础的页面排版与用户信息录入功能，非常适合用于应用内的基础表单页面或简单的登录界面雏形。

4.button（按钮）

@Entry
@Component
struct ButtonDemo1{
  build() {
    Column({ space: 20 }) {
      Button('确认提交')。
        .height(50)
        .width(150)
        .fontSize(26)
        .borderRadius(35)
按钮一（确认提交）：Button('确认提交')
使用了系统默认的主题色背景，设置了高度 50、宽度 150、字体大小 26，以及 35 的大圆角（呈现胶囊形状）。

      Button('取消操作')
        .height(50)
        .backgroundColor(0x999999)
        .width(150)
        .fontSize(26)
        .borderRadius(35)

按钮二（取消操作）：通过 .backgroundColor(0x999999) 将背景色设置为灰色，通常用于表示次要操作或取消功能，其余尺寸和圆角属性与第一个按钮保持一致。


      Button('确认删除')
        .height(50)
        .width(150)
        .backgroundColor(0xf53f3f)
        .fontSize(26)
        .borderRadius(35)

按钮三（确认删除）：通过 .backgroundColor(0xf53f3f) 将背景色设置为醒目的红色，常用于警示性或破坏性操作（如删除、退出等），以引起用户的注意。

      Button('登录')
        .height(50)
        .width(150)
        .backgroundColor(Color.Transparent)
        .fontColor(Color.Black)
        .border({width:7,color:0x007dff})
        .fontSize(26)
        .borderRadius(35)

按钮四（登录）：这是一个自定义边框样式的按钮。通过 .backgroundColor(Color.Transparent) 将背景设为透明，.fontColor(Color.Black) 设置字体为黑色，并用.border({width:7,color:0x007dff}) 添加了宽度为 7 的蓝色边框，常用于需要突出显示但不希望使用纯色背景的交互场景。

    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

总结：这段代码是一个非常标准的按钮样式与布局综合示例。通过 Column 容器结合 justifyContent(FlexAlign.Center) 实现了四个按钮的垂直居中排列，并分别展示了默认主题、灰色次要、红色警告以及透明边框四种不同的按钮外观样式，非常适合用于应用内的表单提交、操作确认或登录界面等需要多种按钮交互的场景。

5.image（图片）

@Entry
@Component
struct ImageSteck {
  build() {
    Column({space:20}) {
      Text('鸿蒙应用开发实战课程')
        .fontSize(38)
        .fontWeight(FontWeight.Bolder)
        .textAlign(TextAlign.Center)
        .width('98%')
      Stack() {
        Image($r('app.media.first'))
          .width(320)
          .height(200)
          .borderRadius(15)
          .objectFit(ImageFit.Cover)

底层图片 (Image)：通过 $r('app.media.first') 引用了本地资源目录下的图片。设置了宽 320、高 200、15 的圆角，并使用 .objectFit(ImageFit.Cover) 让图片保持宽高比裁剪填满显示区域。

        Text('ArkUI实战应用开发课程')
          .fontSize(22)
          .fontColor(Color.White)
          .backgroundColor(0x550000)
          .padding(10)
          .borderRadius(8)

上层文本 (Text)：显示“ArkUI实战应用开发课程”，覆盖在图片上方。设置了白色字体、半透明红色背景（0x550000）、10 的内边距和 8 的圆角，起到了类似“标签”或“水印”的视觉效果。

      }
      Button('开始学习')
        .width(280)
        .height(70)
        .fontSize(26)
        .type(ButtonType.Capsule)
    }
    .width('100%')
    .height('100%')
    .padding({top:50})
  }
}

总结
这段代码是一个非常标准的图文混排与层叠布局综合示例。通过 Column 容器实现了页面内容的垂直居中排版，并巧妙利用 Stack 组件将带标签的文本覆盖在圆角图片之上，构建了一个精美的课程封面卡片，最后搭配胶囊按钮引导用户操作，非常适合用于应用内的课程展示、文章列表或商品详情等需要图文叠加的视觉场景。

6.radio（单选框）

@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 选项（Radio1 到 Radio4）。
它们被分配到 'radioGroup' 组中，因此这四个选项互相排斥。
通过 .checked(true) 或 .checked(false) 设置初始选中状态，这里 Radio2 默认被选中

      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')

第二题（混合排版）：
包含一个标题 Text('第二题') 和两个 Radio 选项。
它们被分配到 'radioGroup1' 组中，与第一题的选项互不干扰。
选项之间穿插了 Text('A') 和 Text('B') 作为标签说明，Radio2 默认选中
      Row(){
        Text('性别')
          .fontSize(24)
        Radio({value:'男',group:'sex'})
          .checked(false)
          .height(30)
          .width(30)
        Text('男')
          .fontSize(20)
          .margin({right:20})
        Radio({value:'女',group:'sex'})
          .checked(true)
          .height(30)
          .width(30)
        Text('女')
          .fontSize(20)
      }

性别选择（行内图文组合）：
使用 Row() 容器将文本和单选框在水平方向上排列，实现了“标签+选项”的经典表单排版。
包含“男”和“女”两个选项，分配到 'sex' 组中，互斥且“女”默认选中。
为文本设置了字体大小，并通过 .margin({right:20}) 在“男”选项后添加了右侧外边距，使排版更加美观、不拥挤
    }
    .width('100%')
    .height('100%')
  }
}

总结:这段代码是一个非常标准的单选框（Radio）组件基础与布局综合示例。通过 Column 和 Row 容器的嵌套，清晰地展示了如何利用 group 属性实现多组选项的独立互斥逻辑，并结合 Text 组件实现了问卷题目、选择题选项以及表单性别选择等经典排版，非常适合用于应用内的考试问卷、用户偏好设置或信息录入等需要单项选择的场景。

7.toggle(切换按钮)

@Entry
@Component
struct ToggleDemo {
  build() {
    Column(){
      Toggle({
        type:ToggleType.Switch,
        isOn:true
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)
        .id('n1')
开关类型(Switch)：
Toggle({type: ToggleType.Switch, isOn: true})：创建了一个标准的滑动开关样式，并通过 isOn: true设置了其初始状态为“开启”。
设置了宽150、高50的尺寸，并通过. selectedColor(Color. Red)将开关开启时的背景颜色自定义为红色。
id('nl')：为该组件分配了一个唯一标识符，方便在代码中进行查找或测试。
      Toggle({
        type:ToggleType.Checkbox,
        isOn:false
      })
        .width(150)
        .height(50)
        .selectedColor(Color.Red)
        .id('n2')
复选框类型（Checkbox）：
Toggle({ type: ToggleType.Checkbox, isOn: false })：创建了一个复选框样式，并通过 isOn: false 设置了其初始状态为“未选中”。
同样设置了宽 150、高 50 的尺寸，以及红色的选中状态背景色（.selectedColor(Color.Red)）。
.id('n2')：为该复选框分配了唯一标识符。

    }
    .width('100%')
    .height('100%')
  }
}

总结
这段代码是一个非常标准的切换按钮（Toggle）组件基础与样式自定义示例。通过 Column 容器，清晰地展示了 Toggle 组件在 Switch（滑动开关）和 Checkbox（复选框）两种形态下的外观表现，并演示了如何使用 selectedColor 属性来定制选中状态的主题色，非常适合用于应用内的功能开关（如蓝牙、WiFi）或协议勾选等需要二元状态切换的交互场景。