接口的使用

最新推荐文章于 2024-10-03 08:23:28 发布

水枪灌尿泚谁谁叫

最新推荐文章于 2024-10-03 08:23:28 发布

阅读量332

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/m0_70153537/article/details/141687917

版权

一 .接口

1.接口关键字：interface ：规定类必须具有的功能

interface A{
    //接口没有构造函数
    num1:number
    //接口中的方法不能有方法体，必须写上返回值类型
    a1():void
}
 
//接口不能被实例化
//let a:A=new A() //报错

接口的总结:1.接口没有构造函数, 2.接口中的方法不能有方法体，必须写上返回值类型,

3.接口不能被实例化。

2.实现类

实现类的概念：必须有接口中的属性，必须重写接口中的方法。

使用接口需要使用implements关键字

implements：实现接口

//实现小电风扇插入USB接口，可以调节风扇速度，拔出usb接口则停止工作
 
//创建Usb接口
 
interface Usb{
    in():void;
    outs():void;
}
 
// implements 实现接口
class Fs implements Usb{
    type:string
    ts(){
        console.log('调节风扇速度');
    }
    constructor(type:string){
        this.type=type
    }
    in():void{
        console.log('风扇插入usb');
    }
    outs():void{
        console.log('风扇拔出usb');
    }
}
//子类只能继承一个父类，但是可以有多个接口。

练习:

1.组装成一个电脑

2.计算机有品牌型号属性

3.cpu 有cpu的品牌，主频，介绍

4.硬盘有容量介绍

5.内存有容量介绍

//创建了一个电脑类 有品牌 型号属性
class Comp{
    brand:string
    type:string
    constructor(brand:string,type:string){
        this.brand=brand
        this.type=type
    }
    info(){
        console.log(`${this.brand}电脑品牌:${this.type}型号`);
    }
}
 
//创建了一个CPU的接口
interface Cpu{
   cpu(brand:string,zp:string):void
}
 
//创建了一个硬盘的接口
interface Yp{
    yp(rl:string):void
 }
 
//创建了一个内存的接口
 interface Nc{
    nc(rl:string):void
 }
 
//我们开始组装我们的电脑 继承了电脑的类，连接了CPU，硬盘，内存的接口
 class Cp extends Comp implements Cpu,Yp,Nc{
    constructor(brand:string,type:string){
        super(brand,type)
    }
    cpu(brand:string,zp:string):void{
        console.log(`CPU的品牌是：${brand},主频是:${zp}`);
    }
    yp(rl: string): void {
        console.log(`硬盘的容量是:${rl}`);
        
    }
    nc(rl: string): void {
        console.log(`内存容量是:${rl}`);
        
    }
 }
//实例化对象
 let c1:Cp=new Cp('联想','小星')
 c1.info()
 c1.cpu('Inter','3.8GHz')
 c1.yp('3000GB')
 c1.nc('4GB')

二. 多态的实例

1.功能介绍:影音管理系统

实现功能有：把数据添加到页面中，添加音频或视频 删除存入的数据

2.需要准备的数据

1.在ets文件夹中创建一个model文件夹，在model文件夹中放入我们所写的TS代码，并导出出来。

2.还要一个Videos.ts（视频）文件，Audio.ts(音频文件)，Medias（媒体文件）

3.medias文件是视频和音频文件的共同属性，里面有name（名称）属性， size（大小）属性，show（介绍）属性，times（时长）属性。

我们需要把我们所需的属性和方法都要封装我们用标识符 Private 私有属性，只能在本类中使用，我们还需要export关键字导出文件。

//媒体
export class Medias{
  private _name: string
 
  public set name(value: string) {
    this._name = value
  }
 
  public get name(): string {
    return this._name
  }
 
  private _size: number
 
  public set size(value: number) {
    this._size = value
  }
 
  public get size(): number {
    return this._size
  }
 
  private _show: string
 
  public set show(value: string) {
    this._show = value
  }
 
  public get show(): string {
    return this._show
  }
 
  private _times: number
 
  public set times(value: number) {
    this._times = value
  }
 
  public get times(): number {
    return this._times
  }
 
  constructor(name:string,size:number,show:string,times:number) {
    this._name=name
    this._size=size
    this._show=show
    this._times=times
  }
 
}

我们创建很多属性方法，还要封装，初始化，当设置私有属性还需要get和set，这是我们可以右键找到Generate，点击进去

显示这个页面，选择Getter and Setter就自动帮我们生成好代码了

Audio.ts类继承Medias类

// 音频: 名字 大小 简介 作曲 作词 原唱 翻唱 时长
import { Medias } from './Medias';
 
export  class Audio extends Medias{
  private _zq: string;
 
  public set zq(value: string) {
    this._zq = value;
  }
 
  public get zq(): string {
    return this._zq;
  }
 
  private _zc: string;
 
  public set zc(value: string) {
    this._zc = value;
  }
 
  public get zc(): string {
    return this._zc;
  }
 
  private _yc: string;
 
  public set yc(value: string) {
    this._yc = value;
  }
 
  public get yc(): string {
    return this._yc;
  }
 
  constructor(name: string, size: number, show: string, times: number, zq: string, zc: string, yc: string, fc: string) {
    super(name, size, show, times);
    this._zq = zq;
    this._zc = zc;
    this._yc = yc;
    this._fc = fc;
  }
 
  private _fc: string;
 
  public set fc(value: string) {
    this._fc = value;
  }
 
  public get fc(): string {
    return this._fc;
  }
}

Videos.ts类继承Medias类

// 视频: 名字 大小 简介 时长 类型 主演 画质 导演 制片人
import { Medias } from './Medias';
 
export class Videos extends  Medias{
  private _type: string;
 
  public set type(value: string) {
    this._type = value;
  }
 
  public get type(): string {
    return this._type;
  }
 
  private _zy: string;
 
  public set zy(value: string) {
    this._zy = value;
  }
 
  public get zy(): string {
    return this._zy;
  }
 
  private _hz: string;
 
  public set hz(value: string) {
    this._hz = value;
  }
 
  public get hz(): string {
    return this._hz;
  }
 
  private _dy: string;
 
  public set dy(value: string) {
    this._dy = value;
  }
 
  public get dy(): string {
    return this._dy;
  }
 
  private _zpr: string;
 
  public set zpr(value: string) {
    this._zpr = value;
  }
 
  public get zpr(): string {
    return this._zpr;
  }
 
  constructor(name: string, size: number, show: string, times: number, type: string, zy: string, hz: string, dy: string,
    zpr: string) {
    super(name, size, show, times);
    this._type = type;
    this._zy = zy;
    this._hz = hz;
    this._dy = dy;
    this._zpr = zpr;
  }
}

3.主程序

我们创建了一个medias数组用于存储我们数据，md实例化Medias isAorV是判断当前是音频还是视频后续会介绍到 ad，vd是音频和视频的实例化

aboutToAppear：生命周期，即打开页面就运行里面代码

声明数据内容没有任何意义，仅作为练习

 @State message: string = '影音管理系统';
  @State medias: Medias[]=[]
  @State md:Medias=new Medias('',0,'',0)
  @State ad:Audio=new Audio('',0,'',0,'','','','')
  @State vd:Videos =new Videos('',0,'',0,'','','','','')
  @State isAorV:boolean=false//默认是音频
  aboutToAppear(): void {
    this.medias.push(new Videos('《JoJo的奇妙冒险》幻影之血',100,'讲述了一个外来人来争夺家产的故事',26,'命运','乔纳森·乔斯达','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('ジョジョ～その血の运命～',100,'无',3,'田中公平','藤林聖子','Hiroaki Tommy Tominaga','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》战斗潮流',100,'讲述了主角团们对抗一群超越人类的生物',26,'命运','乔瑟夫·乔斯达','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('BLOODY STREAM',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》星尘斗士',100,'从祖父开始的命运开始了',26,'命运','空条承太郎','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('ジョジョ その血の记忆 ~ end of THE WORLD ~ ',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》不灭钻石',100,'讲述了一场外遇开始牵扯出一堆事件的故事',26,'命运','东方仗助','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('Crazy Noisy Bizarre Town',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》黄金之风',100,'讲述了在曾经的战斗中死了一个反派,突然有一天发现了他还有一个儿子,从开始的调查的视角到主角的视角面对各种挑战的故事。',26,'命运','乔鲁诺·乔巴纳','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('Crazy Noisy Bizarre Town',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》石之海',100,'讲述了在曾经的战斗中死了一个反派,他的挚友发现了他的死亡,并且得知内本能登上天堂的书,被主角团烧毁,开始密谋计划的故事',26,'命运','空条徐伦','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('Heaven’s falling down',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》飙马野郎',100,'讲述了一场世纪大赛「SBR」于美国举行,全长共6000公里,为了拿下高达5千万美元（60亿日元）的冠军奖金,一群强悍的冒险家们正式展开了他们的争战!',36,'命运','乔尼·乔斯达','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('无',0,'无',0,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》乔乔福音',100,'未知',26,'命运','东方定助','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('无',0,'无',0,'无','无','无','互联网上无'))
  }

循环数组中数据

在ListItem中添加swipeAction组件实现删除功能，前提需要自定义删除组件

@Builder DelButton(index:number){
    Button('删除')
      .type(ButtonType.Normal)
      .width('20%')
      .height(150)
      .onClick(() => {
         this.medias.splice(index,1)
    })
  }

 Column(){
      Text(this.message).fontSize(30)
      List({space:10}){
        ForEach(this.medias,(md:Medias,index)=>{
          ListItem(){
            if(md instanceof Audio){ //音频
              Column(){
                Row(){
                  // 音频: 名字 大小 简介 时长 作曲 作词 原唱 翻唱
                  Text(`歌名:${md.name}`)
                  Text(`大小:${md.size}`)
                  Text(`时长:${md.times}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
                Row(){
                  Text(`作词:${md.zq}`)
                  Text(`作词:${md.zc}`)
                  Text(`原唱:${md.yc}`)
                  Text(`翻唱:${md.fc}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
                Row(){
                  Text(`简介:${md.show}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
              }.width('100%')
              .backgroundColor('#ccc')
            }else if(md instanceof Videos){ //视频
              Column(){
                Row(){
                  // 视频: 名字 大小 简介 时长 类型 主演 画质 导演 制片人
                  Text(`视频名:${md.name}`)
                  Text(`大小:${md.size}`)
                  Text(`时长:${md.times}`)
                  Text(`类型:${md.type}`)
 
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
                Row(){
                  Text(`导演:${md.dy}`)
                  Text(`主演:${md.zy}`)
                  Text(`画质:${md.hz}`)
                  Text(`制片人:${md.zpr}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
                Row(){
                  Text(`简介:${md.show}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
              }.width('100%')
              .backgroundColor('#aaa')
 
            }
          }
          .swipeAction({
            end:this.DelButton(index)
          })
        })
      }.height(400).width('90%')

主程序的完整代码

import { Audio } from '../model/Audio';
import { Medias } from '../model/Medias';
import { Videos } from '../model/Videos';
import { promptAction } from '@kit.ArkUI';


@Entry
@Component
struct MediaPage {
  @State message: string = '影音管理系统';
  @State medias: Medias[]=[]
  @State md:Medias=new Medias('',0,'',0)
  @State ad:Audio=new Audio('',0,'',0,'','','','')
  @State vd:Videos =new Videos('',0,'',0,'','','','','')
  @State isAorV:boolean=false//默认是音频
  aboutToAppear(): void {
    this.medias.push(new Videos('《JoJo的奇妙冒险》幻影之血',100,'讲述了一个外来人来争夺家产的故事',26,'命运','乔纳森·乔斯达','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('ジョジョ～その血の运命～',100,'无',3,'田中公平','藤林聖子','Hiroaki Tommy Tominaga','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》战斗潮流',100,'讲述了主角团们对抗一群超越人类的生物',26,'命运','乔瑟夫·乔斯达','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('BLOODY STREAM',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》星尘斗士',100,'从祖父开始的命运开始了',26,'命运','空条承太郎','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('ジョジョ その血の记忆 ~ end of THE WORLD ~ ',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》不灭钻石',100,'讲述了一场外遇开始牵扯出一堆事件的故事',26,'命运','东方仗助','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('Crazy Noisy Bizarre Town',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》黄金之风',100,'讲述了在曾经的战斗中死了一个反派,突然有一天发现了他还有一个儿子,从开始的调查的视角到主角的视角面对各种挑战的故事。',26,'命运','乔鲁诺·乔巴纳','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('Crazy Noisy Bizarre Town',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》石之海',100,'讲述了在曾经的战斗中死了一个反派,他的挚友发现了他的死亡,并且得知内本能登上天堂的书,被主角团烧毁,开始密谋计划的故事',26,'命运','空条徐伦','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('Heaven’s falling down',100,'无',3,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》飙马野郎',100,'讲述了一场世纪大赛「SBR」于美国举行,全长共6000公里,为了拿下高达5千万美元（60亿日元）的冠军奖金,一群强悍的冒险家们正式展开了他们的争战!',36,'命运','乔尼·乔斯达','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('无',0,'无',0,'无','无','无','互联网上有'))
    this.medias.push(new Videos('《JoJo的奇妙冒险》天堂福音',100,'未知',26,'命运','未知','4K','荒木飞吕彦','荒木飞吕彦'))
    this.medias.push(new Audio('无',0,'无',0,'无','无','无','互联网上无'))
  }
  build() {
    Column(){
      Text(this.message).fontSize(30)
      List({space:10}){
        ForEach(this.medias,(md:Medias,index)=>{
          ListItem(){
            if(md instanceof Audio){ //音频
              Column(){
                Row(){
                  // 音频: 名字 大小 简介 时长 作曲 作词 原唱 翻唱
                  Text(`歌名:${md.name}`)
                  Text(`大小:${md.size}`)
                  Text(`时长:${md.times}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
                Row(){
                  Text(`作词:${md.zp}`)
                  Text(`作词:${md.zc}`)
                  Text(`原唱:${md.yc}`)
                  Text(`翻唱:${md.fc}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
                Row(){
                  Text(`简介:${md.show}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
              }.width('100%')
              .backgroundColor('#ccc')
            }else if(md instanceof Videos){ //视频
              Column(){
                Row(){
                  // 视频: 名字 大小 简介 时长 类型 主演 画质 导演 制片人
                  Text(`视频名:${md.name}`)
                  Text(`大小:${md.size}`)
                  Text(`时长:${md.times}`)
                  Text(`类型:${md.type}`)

                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
                Row(){
                  Text(`导演:${md.dy}`)
                  Text(`主演:${md.zy}`)
                  Text(`画质:${md.hz}`)
                  Text(`制片人:${md.zpr}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
                Row(){
                  Text(`简介:${md.show}`)
                }.width('100%').height(50).justifyContent(FlexAlign.SpaceBetween)
              }.width('100%')
              .backgroundColor('#aaa')

            }
          }
          .swipeAction({
            end:this.DelButton(index)
          })
        })
      }.height(400).width('90%')
      Row(){
        Button('音频')
          .type(ButtonType.Normal).width('40%')
          .onClick(() => this.isAorV=false)
        Button('视频')
          .type(ButtonType.Normal).width('40%')
          .onClick(() => this.isAorV=true)
      }.width('90%').justifyContent(FlexAlign.SpaceBetween).margin({top:10})
      if(this.isAorV){ //视频
        // 视频: 名字 大小 简介 时长 类型 主演 画质 导演 制片人
        Column({space:5}){
          Text('视频添加')
          Row(){
            TextInput({placeholder:'视频名称'}).borderRadius(0).width('30%')
              .onChange(val=>this.vd.name=val)
            TextInput({placeholder:'大小'}).borderRadius(0).width('30%')
              .onChange(val=>this.vd.size=parseFloat(val))
            TextInput({placeholder:'时长'}).borderRadius(0).width('30%')
              .onChange(val=>this.vd.times=parseFloat(val))
          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          Row(){
            TextInput({placeholder:'类型'}).borderRadius(0).width('30%')
              .onChange(val=>this.vd.type=val)
            TextInput({placeholder:'主演'}).borderRadius(0).width('30%')
              .onChange(val=>this.vd.zy=val)
            TextInput({placeholder:'制片人'}).borderRadius(0).width('30%')
              .onChange(val=>this.vd.zpr=val)
          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          Row(){
            TextInput({placeholder:'画质'}).borderRadius(0).width('30%')
              .onChange(val=>this.vd.hz=val)
            TextInput({placeholder:'导演'}).borderRadius(0).width('30%')
              .onChange(val=>this.vd.dy=val)
            TextInput({placeholder:'简介'}).borderRadius(0).width('30%')
              .onChange(val=>this.vd.show=val)
          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          Button('添加').width('90%')
            .onClick(()=>{
              //非空验证
              if(this.vd.name==''||this.vd.size==0||this.vd.hz==''||this.vd.type==''||this.vd.zy==''||this.vd.zpr==''||this.vd.show==''||this.vd.times==0||this.vd.dy==''){
                promptAction.showToast({message:'不能为空'})
              }else{
                let b:Videos=this.vd
                let vd1:Videos=new Videos(b.name,b.size,b.show,b.times,b.zy,b.hz,b.dy,b.zpr,b.type)
                this.medias.push(vd1)
                promptAction.showToast({message:'音频添加成功'})
              }
            })
        }.width('90%')

      }else{ //音频
        // 音频: 名字 大小 简介 作曲 作词 原唱 翻唱 时长
        Column({space:5}){
          Text('音频添加')
          Row(){
            TextInput({placeholder:'音频名称'}).borderRadius(0).width('45%')
              .onChange(val=>this.ad.name=val)
            TextInput({placeholder:'大小'}).borderRadius(0).width('45%')
              .onChange(val=>this.ad.size=parseFloat(val))
          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          Row(){
            TextInput({placeholder:'时长'}).borderRadius(0).width('45%')
              .onChange(val=>this.ad.times=parseFloat(val))
            TextInput({placeholder:'作曲'}).borderRadius(0).width('45%')
              .onChange(val=>this.ad.zp=val)
          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          Row(){
            TextInput({placeholder:'作词'}).borderRadius(0).width('45%')
              .onChange(val=>this.ad.zc=val)
            TextInput({placeholder:'原唱'}).borderRadius(0).width('45%')
              .onChange(val=>this.ad.yc=val)
          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          Row(){
            TextInput({placeholder:'翻唱'}).borderRadius(0).width('45%')
              .onChange(val=>this.ad.fc=val)
            TextInput({placeholder:'简介'}).borderRadius(0).width('45%')
              .onChange(val=>this.ad.show=val)
          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          Button('添加').width('90%')
            .onClick(()=>{
              //非空验证
              if(this.ad.name==''||this.ad.size==0||this.ad.zp==''||this.ad.zc==''||this.ad.yc==''||this.ad.fc==''||this.ad.show==''||this.ad.times==0){
                promptAction.showToast({message:'不能为空'})
              }else{
                let a:Audio=this.ad
                let ad1:Audio=new Audio(a.name,a.size,a.show,a.times,a.zp,a.zc,a.yc,a.fc)
                this.medias.push(ad1)
                promptAction.showToast({message:'音频添加成功'})
              }
            })
        }.width('90%')
      }
    }
    .height('100%')
    .width('100%')
  }
  @Builder DelButton(index:number){
    Button('删除')
      .type(ButtonType.Normal)
      .width('20%')
      .height(150)
      .onClick(() => {
        this.medias.splice(index,1)
      })
  }
}