一、回顾之前全部布局组件

1. Column：垂直纵向线性布局，元素从上往下排
2. Row：水平横向线性布局，元素从左往右排
3. Flex：弹性布局，可横可竖、支持自动换行、自适应均分宽度
4. RelativeContainer：相对布局，组件依靠锚点互相定位，排版更自由
5. Stack：层叠布局，组件前后堆叠覆盖摆放
6. Swiper：轮播滑动组件，左右 / 上下滑动切换页面，可自动轮播
7. Tabs（选项卡）：标签页布局，点击顶部标签切换不同内容面板

二、新学的常用基础组件

1. Text / TextInput（文字类）

• 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(200)
          .backgroundColor(0xd5d5d5)
          .borderRadius(24)
      }
      .height('100%')
      .width('100%')
    }
  }

2. Button 按钮组件

• 可点击交互控件，绑定 onClick 点击事件

• 用途：可点击交互组件，用来接收用户点击操作，实现提交、取消、删除、页面跳转、修改变量、弹出弹窗等交互逻辑。

• 实例：

  @Entry
  @Component
  struct ButtonDemo1{
    build() {
      Column({space:20}){
        // 确认提交按钮（默认蓝色主题）
        Button('确认提交')
          .height(50)
          .width(150)
          .fontSize(26)
          .borderRadius(35)
  
        // 取消操作按钮（灰色背景）
        Button('取消操作')
          .height(50)
          .backgroundColor(0x999999)
          .width(150)
          .fontSize(26)
          .borderRadius(35)
  
        // 确认删除按钮（红色背景）
        Button('确认删除')
          .height(50)
          .width(150)
          .backgroundColor(0xf53f3f)
          .fontSize(26)
          .borderRadius(35)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }

3. Image 图片组件

• 用来加载显示本地 / 网络图片

• 可设置宽高、缩放模式、圆角、透明度等样式

• 调用的图片路径：打开项目，resources/base/media 目录下。

• 实例：

  @Entry
  @Component
  struct ImageDemo1{
    build() {
      Column({space:20}){
        // 顶部欢迎文本
        Text('欢迎来到河北软件职业技术学院')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .width('100%')
          .textAlign(TextAlign.Center)
          .padding(20)
  
        // 图片组件
        Image($r('app.media.04'))
          .width('90%')
          .height(200)
          .borderRadius(15)
          .objectFit(ImageFit.Cover)
      }
      .width('100%')
      .height('100%')
    }
  }

4. Radio 单选框

• 同一分组内只能选中一个选项，多选互斥

• 搭配 RadioGroup 分组使用，典型场景：性别选择、单选题选项

• 实例：

  @Entry
  @Component
  struct RadioDemo1 {
    // 三组独立选中状态
    @State ans1: string = 'Radio2'
    @State ans2: string = 'B'
    @State sex: string = '男'
  
    build() {
      Column() {
        // 第一题
        Text('第一题')
          .fontSize(20)
          .margin({ bottom: 8 })
        Radio({ value: 'Radio1', group: 'g1' })
          .checked(this.ans1 === 'Radio1')
          .onChange(b => b && (this.ans1 = 'Radio1'))
        Radio({ value: 'Radio2', group: 'g1' })
          .checked(this.ans1 === 'Radio2')
          .onChange(b => b && (this.ans1 = 'Radio2'))
        Radio({ value: 'Radio3', group: 'g1' })
          .checked(this.ans1 === 'Radio3')
          .onChange(b => b && (this.ans1 = 'Radio3'))
        Radio({ value: 'Radio4', group: 'g1' })
          .checked(this.ans1 === 'Radio4')
          .onChange(b => b && (this.ans1 = 'Radio4'))
  
        // 第二题
        Text('第二题')
          .fontSize(20)
          .margin({ top: 15, bottom: 8 })
        Radio({ value: 'A', group: 'g2' })
          .checked(this.ans2 === 'A')
          .onChange(b => b && (this.ans2 = 'A'))
        Radio({ value: 'B', group: 'g2' })
          .checked(this.ans2 === 'B')
          .onChange(b => b && (this.ans2 = 'B'))
  
        // 性别行布局
        Row() {
          Text('性别：')
            .fontSize(24)
          Radio({ value: '男', group: 'g3' })
            .width(30)
            .height(30)
            .checked(this.sex === '男')
            .onChange(b => b && (this.sex = '男'))
          Text('男')
            .fontSize(20)
            .margin({ right: 20 })
          Radio({ value: '女', group: 'g3' })
            .width(30)
            .height(30)
            .checked(this.sex === '女')
            .onChange(b => b && (this.sex = '女'))
          Text('女')
            .fontSize(20)
        }
        .margin({ top: 20 })
      }
      .width('100%')
      .height('100%')
      .padding(30)
      .alignItems(HorizontalAlign.Center)
    }
  }