HarmonyOS实现一个在线刷题案例

黎明寄波澜*

已于 2024-08-15 10:29:54 修改

阅读量100

点赞数 1

文章标签：前端开发语言 harmonyos 华为 typescript

于 2024-08-15 10:29:27 首次发布

本文链接：https://blog.csdn.net/weixin_55209970/article/details/141215483

版权

import { promptAction } from '@kit.ArkUI'

interface question {
  question_id: number
  question_title: string
  question_Options: option[]
}

interface option {
  q_letter: string
  q_title: string

}

// 选中题的结构
interface selectoption {
  q_letter: string
  q_title: string
  q_id: number

}

export class questionModel implements question {
  question_id: number = 0
  question_title: string = ''
  question_Options: option[] = []

  constructor(model: question) {
    this.question_id = model.question_id
    this.question_title = model.question_title
    this.question_Options = model.question_Options
  }
}

export class optionModel implements option {
  q_letter: string = ''
  q_title: string = ''

  constructor(model: option) {
    this.q_letter = model.q_letter
    this.q_title = model.q_title
  }
}


@Entry
@Component
struct ShuaTiPage {
  @State message: string = '我是刷题练习页面';
  // 定义的所有题数据结构
  @State
  CommList: questionModel[] = [
    new questionModel({
      question_id: 1,
      question_title: '我是选项1答案是A',
      question_Options: [
        new optionModel({
          q_letter: 'A',
          q_title: '我是1111'

        }),
        new optionModel({
          q_letter: 'B',
          q_title: '我是22222'

        }),
        new optionModel({
          q_letter: 'C',
          q_title: '我是3333'

        }),
        new optionModel({
          q_letter: 'D',
          q_title: '我是4444'

        }),

      ]
    }),
    new questionModel({
      question_id: 2,
      question_title: '我是选项2答案是B',
      question_Options: [new optionModel({
        q_letter: 'A',
        q_title: '那倒是复健'

      }),
        new optionModel({
          q_letter: 'B',
          q_title: '打扫房间看了看'

        }),
        new optionModel({
          q_letter: 'C',
          q_title: 'r诶i方便'

        }),
        new optionModel({
          q_letter: 'D',
          q_title: '复合绒二哥'

        }),

      ]
    }),
    new questionModel({
      question_id: 3,
      question_title: '我是选项3答案是C',
      question_Options: [new optionModel({
        q_letter: 'A',
        q_title: 'dsfjds'

      }),
        new optionModel({
          q_letter: 'B',
          q_title: 'reyui'

        }),
        new optionModel({
          q_letter: 'C',
          q_title: 'ruefui'

        }),
        new optionModel({
          q_letter: 'D',
          q_title: 'sdjfvj'

        }),

      ]
    })

  ]
  // 定义一个可变化的Index
  @State CurrentIndex: number = 0
  // 定义一个选中的答案结构
  @State SelectAnswer: Record<number, selectoption> = {}

  // 头部
  @Builder
  topCom() {
    Row() {
      Image($r('app.media.left'))
        .width(20)
        .height(20)
      Text('在线模拟')
      Image($r('app.media.left'))
        .width(20)
        .height(20)
        .rotate({ angle: 180 })
    }
    .width('100%')
    .height(60)
    .justifyContent(FlexAlign.SpaceBetween)

  }

  //底部
  @Builder
  bottomCom() {
    Row() {
      Row() {
        Image($r('app.media.left'))
          .width(20)
          .height(20)
        Text('上一题')
      }
      .onClick(() => {
        if (this.CurrentIndex > 0) {
          this.CurrentIndex--

        } else {
          promptAction.showToast({ message: '没有上一题了' })
        }
      })

      Text((this.CurrentIndex).toString())

      Row() {
        Text('下一题')
        Image($r('app.media.left'))
          .width(20)
          .height(20)
          .rotate({ angle: 180 })
      }

      .onClick(() => {
        if (this.CurrentIndex < this.CommList.length - 1) {
          this.CurrentIndex++

        } else {
          promptAction.showToast({ message: '没有下一题了' })
        }
      })

    }
    .width('100%')
    .height(60)
    .justifyContent(FlexAlign.SpaceBetween)

  }

  // 根据选中状态设置背景色
  getColor(item: optionModel, type: 'bgColor' | 'fontColor' = 'bgColor') {
    // 根据type来判断是否是背景色还是字体颜色
    let question = this.getCurrentQuestion()

    if (this.SelectAnswer[question.question_id]?.q_letter == item.q_letter) {
      return type == 'fontColor' ? Color.White : Color.Blue
    }
    return type == 'fontColor' ? '#000' : '#cccc'

  }

  //中間
  @Builder
  centerCom() {
    Column() {
      Text(this.getCurrentQuestion()?.question_title)
      Column({ space: 10 }) {
        ForEach(this.getCurrentQuestion()?.question_Options, (item: optionModel, index) => {
          Column() {
            Text(item.q_letter + ' . ' + item.q_title)
              .width('100%')
              .height(40)
              .backgroundColor(this.getColor(item))
              .borderRadius(20)
              .padding(10)
              .fontColor(this.getColor(item, 'fontColor'))
              .onClick(() => {
                // 点击答案的时候给这个选中答案的状态赋值
                this.SelectAnswer[this.getCurrentQuestion()?.question_id] = {
                  q_letter: item.q_letter,
                  q_title: item.q_title,
                  q_id: 123456
                }

                console.log(JSON.stringify(this.SelectAnswer), 'JSON.stringify(this.SelectAnswer)')


              })


          }

          .width('100%')
          .justifyContent(FlexAlign.Start)

        })
      }

    }
    .width('100%')
    .layoutWeight(1)

  }

  // 拿到当前所在索引的题
  getCurrentQuestion() {
    return this.CommList[this.CurrentIndex]
  }

  build() {
    Column() {
      // 头部
      this.topCom()
      Divider()
      Progress({ value: this.CurrentIndex + 1, total: this.CommList.length })

      //中間
      this.centerCom()

      //底部
      this.bottomCom()


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

可实现的结果