# 作业

**Repository Path**: jike456/school-assignment

## Basic Information

- **Project Name**: 作业
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-30
- **Last Updated**: 2025-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


一.作业展示：![img.png](img.png)

二.九宫格作业展示：
![img_1.png](img_1.png)


代码部分：
class Prize {
title: string // 奖品标题
color: string // 奖品颜色
imageUrl: string // 奖品图片URL

constructor(title: string, color: string, imageUrl: string = "") {
this.title = title
this.color = color
this.imageUrl = imageUrl
}
}

// 九宫格抽奖图
@Entry
@Component
struct LotteryPage {
@State selectedIndex: number = 0
private isAnimating: boolean = false
private selectionOrder: number[] = [0, 1, 2, 5, 8, 7, 6, 3]
private cellWidth: number = 200
private baseMargin: number = 10
private prizeArray: Prize[] = [
new Prize("p50", "#ffc47964", "https://img2.baidu.com/it/u=2495402136,3978549020&fm=253&fmt=auto&app=120&f=JPEG?w=617&h=1000"),
new Prize("食用油", "#ffc47964", "https://img1.baidu.com/it/u=2740482250,2190394933&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501"),
new Prize("大米", "#ffc47964", "https://img0.baidu.com/it/u=3274349487,3398554287&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889"),
new Prize("pc", "#ffc47964", "https://img1.baidu.com/it/u=3405646712,2265121673&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"),
new Prize("开始\n抽奖", "#fffdfd", ""),
new Prize("电视", "#ffc47964", "https://img1.baidu.com/it/u=2065162801,1416194370&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"),
new Prize("pad", "#ffc47964", "https://img1.baidu.com/it/u=2123395447,2926840967&fm=253&fmt=auto&app=120&f=PNG?w=500&h=500"),
new Prize("p60", "#ffc47964", "https://img2.baidu.com/it/u=2495402136,3978549020&fm=253&fmt=auto&app=120&f=JPEG?w=617&h=1000"),
new Prize("谢谢老板", "#75b0fe", "https://img1.baidu.com/it/u=1058677064,409621235&fm=253&fmt=auto&app=138&f=JPEG?w=304&h=304"),
]
private intervalID: number = 0

startLottery(speed: number = 500) {
setTimeout(() => {
if (speed > 50) {
speed -= 50
this.startLottery(speed)
} else {
this.runAtConstantSpeed()
return
}
this.selectedIndex++
}, speed)
}

runAtConstantSpeed() {
let speed = 40 + Math.floor(Math.random() * this.selectionOrder.length)
clearInterval(this.intervalID)
this.intervalID = setInterval(() => {
if (this.selectedIndex >= speed) {
clearInterval(this.intervalID)
this.slowDown()
return
}
this.selectedIndex++
}, 50)
}

slowDown(speed = 50) {
setTimeout(() => {
if (speed < 500) {
speed += 50
this.slowDown(speed)
} else {
this.selectedIndex = this.selectedIndex % this.selectionOrder.length
let index = this.selectionOrder[this.selectedIndex]
this.isAnimating = false
this.getUIContext().showAlertDialog({
title: '结果',
message: `${this.prizeArray[index].title}`,
confirm: {
defaultFocus: true,
value: '我知道了',
action: () => {
}
},
alignment: DialogAlignment.Center,
});
return
}
this.selectedIndex++
}, speed)
}

build() {
Column() {
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.prizeArray, (item: Prize, index: number) => {
Column() {
// 添加图片组件
if (item.imageUrl) {
Image(item.imageUrl)
.width(`${this.cellWidth * 0.8}lpx`)
.height(`${this.cellWidth * 0.6}lpx`)
.objectFit(ImageFit.Contain)
.margin({ bottom: 5 })
}

            Text(`${item.title}`)
              .fontColor(this.selectionOrder[this.selectedIndex % this.selectionOrder.length] == index ? Color.White :
              item.color)
              .fontSize(18)
              .fontWeight(FontWeight.Bold)
          }
          .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 })
          .onClick(() => {
            if (index == 4) {
              if (this.isAnimating) {
                return
              }
              this.isAnimating = true
              this.startLottery()
            }
          })
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .width(`${this.cellWidth}lpx`)
          .height(`${this.cellWidth}lpx`)
          .margin(`${this.baseMargin}lpx`)
          .backgroundColor(index == 4 ? "#ff990901" :
            (this.selectionOrder[this.selectedIndex % this.selectionOrder.length] == index ? Color.Pink : Color.White))
          .borderRadius(10)

        })
      }.width(`${this.cellWidth * 3 + this.baseMargin * 6}lpx`)
      .margin({ top: 30 })
    }
    .height('100%')
    .width('100%')
    .backgroundColor("#ff1fd479")
}
}
//作业三
![img_4.png](img_4.png)

代码部分：
import { New001 } from '../new/new001';


interface TabItem {
icon: ResourceStr; // 使用ResourceStr类型引用图片资源
text: string;
}

@Entry
@Component
struct Tab {
@State currentIndex: number = 0; // 当前激活的tab索引
@State tabItems: TabItem[] = [
{
icon: $r("app.media.startIcon"), // 首页图标
text: "首页"
},
{
icon: $r("app.media.startIcon"), // 新闻图标
text: "新闻"
},
{
icon: $r("app.media.startIcon"), // 个人图标
text: "我的"
}
];

// 优化Builder函数 - 增大字体
@Builder
myTabbarcontant(item: TabItem) {
Column() {
Image(item.icon)
.width(50)  // 增加图标大小
.aspectRatio(1)
.margin({ bottom: 5 })  // 添加图标下方间距
Text(item.text)
.fontSize(25)  // 从20增加到25
.fontWeight(this.currentIndex === this.tabItems.indexOf(item) ? FontWeight.Bold : FontWeight.Normal) // 激活项加粗
}
.padding(10)
.opacity(this.currentIndex === this.tabItems.indexOf(item) ? 1 : 0.7) // 更明显的激活状态
}

build() {
Tabs({ barPosition: BarPosition.End, index: this.currentIndex }) {
// 首页内容
TabContent() {
Text('首页内容')
.fontSize(40)  // 增大内容区域字体
}.tabBar(this.myTabbarcontant(this.tabItems[0]))

      // 新闻内容
      TabContent() {
       New001()
      }.tabBar(this.myTabbarcontant(this.tabItems[1]))

      // 我的内容
      TabContent() {
        Text('个人中心')
          .fontSize(40)
      }.tabBar(this.myTabbarcontant(this.tabItems[2]))
    }
    .onChange((index: number) => {
      this.currentIndex = index; // 更新当前激活的tab索引
    })
    .barHeight(90)  // 增加底部导航栏高度（原为60）
    .backgroundColor(Color.White) // 设置背景色
    .barMode(BarMode.Fixed)  // 固定模式，避免内容挤压
}
}


四.天气页面

图片展示：
![img_5.png](img_5.png)

代码部分：import { webview } from '@kit.ArkWeb';
@Entry
@Component
export  struct  Weather{
webController:webview.WebviewController=new webview.WebviewController
build() {
Column(){
Web({src: "\n" +
"\n" +
"https://waptianqi.2345.com/",controller:this.webController})
.width('100%')
.height('100%')
}
}
}

五.视频播放


图片展示
![img_6.png](img_6.png)


抖音风格视频浏览组件
项目简介
这是一个基于 ArkTS 开发的抖音风格视频浏览组件，实现了垂直滑动切换视频、自动播放当前视频、点击暂停 / 播放等核心功能。组件采用了状态管理机制，确保视频播放状态与页面显示同步。
功能特点
垂直滑动切换视频（类似抖音浏览体验）
自动播放当前显示的视频
点击视频区域暂停 / 继续播放
播放状态可视化反馈（播放按钮显示 / 隐藏）
多视频资源管理与展示
技术实现
核心组件
DouYinPage：主页面组件，包含 Swiper 容器和视频列表
VideoCom：视频组件，负责视频播放控制和交互
状态管理
@Provide/@Consume：实现跨组件状态共享，管理当前选中的视频索引
@State：管理组件内部状态（如播放状态）
@Prop：接收父组件传递的视频数据
关键逻辑
滑动切换时更新当前视频索引
根据当前索引自动播放 / 暂停视频
点击事件控制视频播放状态
生命周期钩子确保状态同步
安装与使用
前提条件
已安装 ArkTS 开发环境
熟悉 ArkUI 框架基本用法
集成步骤
将代码复制到你的 ArkTS 项目中
确保项目中包含必要的资源文件：
在app/media目录下添加videostart.png作为播放按钮图标
在需要使用的页面中引入组件：
typescript
import { DouYinPage } from './path/to/DouYinPage';

在页面中使用组件：
typescript
@Entry


@Component
export struct MainPage {
build() {
DouYinPage()
.width("100%")
.height("100%")
}
}

plaintext

## 代码结构说明

### 数据模型

```typescript
class VideoItem {
videoUrl: string = ''  // 视频资源URL
title: string = ""     // 视频标题
}

const allData: VideoItem[] = [
// 视频数据列表，包含视频URL和标题
]
主页面组件 (DouYinPage)
typescript
@Entry
@Component
export struct DouYinPage {
  @State message: string = 'Hello World';

  @Provide("selectIndex")
  selectIndex: number = 0  // 当前选中的视频索引

  build() {
    Swiper() {
      ForEach(allData, (item: VideoItem, index) => {
        Stack() {
          Column() {
            VideoCom({ item: item, index: index })  // 视频组件
            Text(item.title)
              .fontSize(20)
              .padding(10)
              .fontColor(Color.White)
          }
          .width("100%")
          .height("100%")
          .justifyContent(FlexAlign.Center)
        }
      })
    }
    .onChange((value) => {
      this.selectIndex = value  // 滑动时更新当前索引
    })
    .vertical(true)  // 垂直滑动
    .width("100%")
    .height("100%")
    .indicator(false)  // 隐藏指示器
    .backgroundColor(Color.Black)  // 黑色背景
  }
}
视频组件 (VideoCom)
typescript
@Component
struct VideoCom {
  controller: VideoController = new VideoController()  // 视频控制器
  index: number = -1  // 视频索引
  @Consume("selectIndex") selectIndex: number  // 消费当前选中索引
  @Prop item: VideoItem  // 视频数据
  @State isPlaying: boolean = false  // 播放状态

  aboutToAppear() {
    this.checkPlayState()  // 组件显示时检查播放状态
  }

  aboutToChange() {
    this.checkPlayState()  // 组件状态变化时检查播放状态
  }

  checkPlayState() {
    if (this.selectIndex != this.index) {
      this.controller.pause()  // 非当前视频，暂停
      this.isPlaying = false
    } else {
      this.controller.start()  // 当前视频，播放
      this.isPlaying = true
    }
  }

  build() {
    Stack() {
      Video({
        src: this.item.videoUrl,
        controller: this.controller
      })
        .width("100%")
        .controls(false)  // 隐藏默认控件
        .autoPlay(this.selectIndex === this.index)  // 自动播放当前视频
        .aspectRatio(4/3)  // 视频比例

      // 播放按钮（非播放状态时显示）
      if (!this.isPlaying) {
        Image($r("app.media.videostart"))
          .width(100)
          .aspectRatio(1)
          .fillColor(Color.Gray)
          .backgroundColor(Color.White)
          .borderRadius(50)
      }
    }
    .onClick(() => {
      // 点击切换播放状态
      if (this.isPlaying) {
        this.controller.pause()
        this.isPlaying = false
      } else {
        this.controller.start()
        this.isPlaying = true
      }
    })
  }
}
自定义扩展
更换视频源
修改allData数组中的videoUrl和title字段，添加你自己的视频资源：

typescript
const allData: VideoItem[] = [
  {
    videoUrl: 'https://your-video-url.com/video1.mp4',
    title: '视频标题1'
  },
  {
    videoUrl: 'https://your-video-url.com/video2.mp4',
    title: '视频标题2'
  },
  // 添加更多视频...
]

调整 UI 样式
修改视频比例：aspectRatio(4/3)
调整标题字体：fontSize(20)、fontColor(Color.White)
更改背景颜色：backgroundColor(Color.Black)
调整播放按钮样式：width(100)、borderRadius(50)等
```

六.画布
图片展示：
![img_8.png](img_8.png)


画布绘图应用 - 使用说明
应用概述
这是一个基于ArkTS开发的HarmonyOS绘图应用，提供双画布绘制功能，支持多种颜色选择和笔画回放特效。

核心功能
双画布系统：

上方画布（粉色背景）

下方画布（黄色背景）

绘图工具：

颜色选择（蓝色、红色、绿色）

橡皮擦工具

一键清空画布功能

笔画回放：

在上方画布绘制的轨迹会自动在下方画布回放

采用二次贝塞尔曲线实现平滑的线条渲染

使用指南
选择颜色：

点击蓝色、红色或绿色按钮选择画笔颜色

选中颜色将同时应用于两个画布

使用橡皮擦：

点击橡皮擦图标切换至擦除模式

擦除时会显示粗线条（上方画布为粉色，下方为黄色）

开始绘制：

在任意画布上触摸并拖动即可绘制

应用会自动记录起始绘制的画布

清空画布：

点击"清理"按钮可重置两个画布

笔画回放：

在上方画布完成绘制后，相同轨迹会自动在下方画布回放

回放过程会逐步重现绘制轨迹

技术实现
画布渲染：

使用CanvasRenderingContext2D进行绘制操作

实现触摸事件处理

采用二次贝塞尔曲线实现平滑线条

状态管理：

跟踪绘制状态(isDrawing)

管理当前活动画布

存储绘制点坐标用于回放功能

动画效果：

基于定时器实现回放动画

回放时采用平滑曲线渲染

已知限制
橡皮擦功能目前只是用背景色覆盖，并非真正擦除

回放功能仅支持从上画布到下画布的单向回放

画布尺寸采用固定百分比，可能在不同屏幕尺寸上显示效果有差异

未来改进计划
增加更多颜色选项

实现可调节的画笔粗细

添加绘图保存/加载功能

改进橡皮擦的真实擦除效果

增加撤销/重做功能

运行要求
HarmonyOS开发环境

支持ArkTS

合适的测试设备或模拟器

七.音乐播放器


![img_9.png](img_9.png)

![img_10.png](img_10.png)

音乐播放应用 - 使用说明
项目概述
这是一个基于HarmonyOS开发的音乐播放应用，具有以下功能：

浏览推荐音乐和热门榜单

播放网络歌曲

发现新音乐

视频内容展示（抖音风格）

功能特性
1. 主要功能
推荐页：展示轮播图、音乐分类和热门歌曲

发现页：精美卡片式音乐展示

视频页：抖音风格短视频浏览

音乐播放：支持在线音乐播放

2. 技术特点
使用ArkUI框架开发

支持横向和纵向滚动

网络数据获取和解析

多媒体播放控制

安装指南
环境要求
DevEco Studio 3.0或更高版本

HarmonyOS SDK API 9+

模拟器或真机设备

安装步骤
克隆本仓库

使用DevEco Studio打开项目

配置签名信息

运行到设备或模拟器

项目结构
text
src/
├── main/
│   ├── ets/
│   │   ├── entryability/  # 入口能力
│   │   ├── pages/         # 页面组件
│   │   ├── Untils/        # 工具类
│   │   └── model/         # 数据模型
│   └── resources/         # 资源文件
主要文件说明
IndexPage.ets - 主页面，包含推荐、发现和视频三个标签页

PlayPage.ets - 音乐播放页面

DouYinPage.ets - 视频浏览页面

AVpalymange.ets - 音乐播放器管理类

EntryAbility.ets - 应用入口

数据接口
应用使用以下API获取音乐数据：

https://api.52vmy.cn/api/music/wy/top?t=1

开发说明
自定义修改
修改主题颜色：
在IndexPage.ets中修改以下颜色值：

typescript
const COLOR = {
  primary: '#FF5722',
  textPrimary: '#333333',
  textSecondary: '#666666'
}
更换资源图片：
替换resources/base/media/目录下的图片文件

修改API地址：
在fetchAllSongs()方法中修改API URL

扩展功能
添加收藏功能

实现本地音乐播放

增加搜索功能

添加用户登录系统

已知问题
模拟器上可能无法正常播放音乐（需使用真机测试）

部分网络环境下API请求可能较慢