【鸿蒙实战开发】HarmonyOS 瀑布流式图片浏览

于 2024-07-18 17:08:31 发布
阅读量270 收藏 7
点赞数 6
分类专栏： 安卓 鸿蒙 前端 文章标签： harmonyos 华为 android 鸿蒙 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS_001/article/details/140527877
版权
鸿蒙 同时被 3 个专栏收录
76 篇文章 0 订阅
订阅专栏
前端
71 篇文章 0 订阅
订阅专栏
安卓
65 篇文章 0 订阅
订阅专栏

介绍

瀑布流式展示图片文字，在当前产品设计中已非常常见，本篇将介绍关于WaterFlow的图片浏览场景，顺便集成Video控件，以提高实践的趣味性

准备

1.请参照官方指导，创建一个Demo工程，选择Stage模型
2.熟读HarmonyOS 官方指导“WaterFlow”
效果
竖屏
在这里插入图片描述

横屏
在这里插入图片描述

数据源

使用“好看”公开API，仅供实验
https://api.apiopen.top/api/getHaoKanVideo?page=页码&size=每页数量

功能介绍

1.瀑布流式图片展示
2.横竖屏图片/视频展示

核心代码

布局

整体结构为：瀑布流 + 加载进度条
每条数据结构： 图片 + 文字 【由于没有设定图片宽高比，因此通过文字长度来自然生成瀑布流效果】

由于有点数据量，按照官方指导，采用LazyForEach懒加载方式

Stack() {
  WaterFlow({ scroller: this.scroller }) {
    LazyForEach(dataSource, item => {
      FlowItem() {
        Column({ space: 10 }) {
          Image(item.coverUrl).objectFit(ImageFit.Cover)
            .width('100%')
            .height(this.imageHeight)
          Text(item.title)
            .fontSize(px2fp(50))
            .fontColor(Color.Black)
            .width('100%')
        }.onClick(() => {
          router.pushUrl({ url: 'custompages/waterflow/Detail', params: item })
        })
      }
    }, item => item)
  }
  .columnsTemplate(this.columnsTemplate)
  .columnsGap(5)
  .rowsGap(5)
  .onReachStart(() => {
    console.info("onReachStart")
  })
  .onReachEnd(() => {
    console.info("onReachEnd")

    if (!this.running) {
      if ((this.pageNo + 1) * 15 < this.total) {
        this.pageNo++
        this.running = true

        setTimeout(() => {
          this.requestData()
        }, 2000)
      }
    }

  })
  .width('100%')
  .height('100%')
  .layoutDirection(FlexDirection.Column)

  if (this.running) {
     this.loadDataFooter()
  }

}

横竖屏感知

横竖屏感知整体有两个场景：1. 当前页面发生变化 2.初次进入页面
这里介绍几种监听方式：

当前页面监听

import mediaquery from '@ohos.mediaquery';

//这里你也可以使用"orientation: portrait" 参数
listener = mediaquery.matchMediaSync('(orientation: landscape)');
this.listener.on('change', 回调方法)

外部传参

通过UIAbility, 一直传到Page文件

事件传递

采用EeventHub机制，在UIAbility把横竖屏切换事件发出来，Page文件注册监听事件

this.context.eventHub.on('onConfigurationUpdate', (data) => {
  console.log(JSON.stringify(data))
  let config = data as Configuration
  this.screenDirection = config.direction
  this.configureParamsByScreenDirection()
});

API数据请求

这里需要设置Android 或者 iOS 特征UA

requestData() {
  let url = `https://api.apiopen.top/api/getHaoKanVideo?page=${this.pageNo}&size=15`
  let httpRequest = http.createHttp()
  httpRequest.request(
    url,
    {
      header: {
        "User-Agent": "Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36"
      }
    }).then((value: http.HttpResponse) => {

    if (value.responseCode == 200) {

      let searchResult: SearchResult = JSON.parse(value.result as string)

      if (searchResult) {
        this.total = searchResult.result.total

        searchResult.result.list.forEach(ItemModel => {
          dataSource.addData(ItemModel)
        })
      }
    } else {
      console.error(JSON.stringify(value))
    }

  }).catch(e => {

    Logger.d(JSON.stringify(e))

    promptAction.showToast({
      message: '网络异常: ' + JSON.stringify(e),
      duration: 2000
    })

  }).finally(() => {
    this.running = false
  })

}

横竖屏布局调整

因为要适应横竖屏，所以需要在原有布局的基础上做一点改造， 让瀑布流的列参数改造为@State 变量 ， 让图片高度的参数改造为@State 变量

WaterFlow({ scroller: this.scroller }) {
  LazyForEach(dataSource, item => {
    FlowItem() {
      Column({ space: 10 }) {
        Image(item.coverUrl).objectFit(ImageFit.Cover)
          .width('100%')
          .height(this.imageHeight)
        Text(item.title)
          .fontSize(px2fp(50))
          .fontColor(Color.Black)
          .width('100%')
      }.onClick(() => {
        router.pushUrl({ url: 'custompages/waterflow/Detail', params: item })
      })
    }
  }, item => item)
}
.columnsTemplate(this.columnsTemplate)

瀑布流完整代码

API返回的数据结构

import { ItemModel } from './ItemModel'

export default class SearchResult{
  public code: number
  public message: string
  public result: childResult
}

class childResult {
  public total: number
  public list: ItemModel[]
};

Item Model

export class ItemModel{
  public id: number
  public tilte: string
  public userName: string
  public userPic: string
  public coverUrl: string
  public playUrl: string
  public duration: string
}

WaterFlow数据源接口

import List from '@ohos.util.List';
import { ItemModel } from './ItemModel';

export class PicData implements IDataSource {

  private data: List<ItemModel> = new List<ItemModel>()

  addData(item: ItemModel){
    this.data.add(item)
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {

  }

  registerDataChangeListener(listener: DataChangeListener): void {

  }

  getData(index: number): ItemModel {
     return this.data.get(index)
  }

  totalCount(): number {
    return this.data.length
  }


}

布局

import http from '@ohos.net.http';
import { CommonConstants } from '../../common/CommonConstants';
import Logger from '../../common/Logger';
import { PicData } from './PicData';
import SearchResult from './Result';
import promptAction from '@ohos.promptAction'
import router from '@ohos.router';
import common from '@ohos.app.ability.common';
import { Configuration } from '@ohos.app.ability.Configuration';
import mediaquery from '@ohos.mediaquery';

let dataSource = new PicData()

/**
 * 问题： 横竖屏切换，间距会发生偶发性变化
 * 解决方案：延迟300毫秒改变参数
 *
 */
@Entry
@Component
struct GridLayoutIndex {
  private context = getContext(this) as common.UIAbilityContext;
  @State pageNo: number = 0
  total: number = 0
  @State running: boolean = true
  @State screenDirection: number = this.context.config.direction
  @State columnsTemplate: string = '1fr 1fr'
  @State imageHeight: string = '20%'
  scroller: Scroller = new Scroller()

  // 当设备横屏时条件成立
  listener = mediaquery.matchMediaSync('(orientation: landscape)');

  onPortrait(mediaQueryResult) {
    if (mediaQueryResult.matches) {
      //横屏
      this.screenDirection = 1
    } else {
      //竖屏
      this.screenDirection = 0
    }

    setTimeout(()=>{
      this.configureParamsByScreenDirection()
    }, 300)
  }

  onBackPress(){
    this.context.eventHub.off('onConfigurationUpdate')
  }

  aboutToAppear() {
    console.log('已进入瀑布流页面')

    console.log('当前屏幕方向：' + this.context.config.direction)

    if (AppStorage.Get('screenDirection') != 'undefined') {
      this.screenDirection = AppStorage.Get(CommonConstants.ScreenDirection)
    }

    this.configureParamsByScreenDirection()

    this.eventHubFunc()

    let portraitFunc = this.onPortrait.bind(this)
    this.listener.on('change', portraitFunc)

    this.requestData()
  }

  @Builder loadDataFooter() {
    LoadingProgress()
      .width(px2vp(150))
      .height(px2vp(150))
      .color(Color.Orange)
  }

  build() {
    Stack() {
      WaterFlow({ scroller: this.scroller }) {
        LazyForEach(dataSource, item => {
          FlowItem() {
            Column({ space: 10 }) {
              Image(item.coverUrl).objectFit(ImageFit.Cover)
                .width('100%')
                .height(this.imageHeight)
              Text(item.title)
                .fontSize(px2fp(50))
                .fontColor(Color.Black)
                .width('100%')
            }.onClick(() => {
              router.pushUrl({ url: 'custompages/waterflow/Detail', params: item })
            })
          }
        }, item => item)
      }
      .columnsTemplate(this.columnsTemplate)
      .columnsGap(5)
      .rowsGap(5)
      .onReachStart(() => {
        console.info("onReachStart")
      })
      .onReachEnd(() => {
        console.info("onReachEnd")

        if (!this.running) {
          if ((this.pageNo + 1) * 15 < this.total) {
            this.pageNo++
            this.running = true

            setTimeout(() => {
              this.requestData()
            }, 2000)
          }
        }

      })
      .width('100%')
      .height('100%')
      .layoutDirection(FlexDirection.Column)

      if (this.running) {
         this.loadDataFooter()
      }

    }

  }

  requestData() {
    let url = `https://api.apiopen.top/api/getHaoKanVideo?page=${this.pageNo}&size=15`
    let httpRequest = http.createHttp()
    httpRequest.request(
      url,
      {
        header: {
          "User-Agent": "Mozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36"
        }
      }).then((value: http.HttpResponse) => {

      if (value.responseCode == 200) {

        let searchResult: SearchResult = JSON.parse(value.result as string)

        if (searchResult) {
          this.total = searchResult.result.total

          searchResult.result.list.forEach(ItemModel => {
            dataSource.addData(ItemModel)
          })
        }
      } else {
        console.error(JSON.stringify(value))
      }

    }).catch(e => {

      Logger.d(JSON.stringify(e))

      promptAction.showToast({
        message: '网络异常: ' + JSON.stringify(e),
        duration: 2000
      })

    }).finally(() => {
      this.running = false
    })

  }

  eventHubFunc() {
    this.context.eventHub.on('onConfigurationUpdate', (data) => {
      console.log(JSON.stringify(data))
      // let config = data as Configuration
      // this.screenDirection = config.direction
      // this.configureParamsByScreenDirection()
    });
  }

  configureParamsByScreenDirection(){
    if (this.screenDirection == 0) {
      this.columnsTemplate = '1fr 1fr'
      this.imageHeight = '20%'
    } else {
      this.columnsTemplate = '1fr 1fr 1fr 1fr'
      this.imageHeight = '50%'
    }
  }

}

图片详情页

import { CommonConstants } from '../../common/CommonConstants';
import router from '@ohos.router';
import { ItemModel } from './ItemModel';
import common from '@ohos.app.ability.common';
import { Configuration } from '@ohos.app.ability.Configuration';

@Entry
@Component
struct DetailIndex{
  private context = getContext(this) as common.UIAbilityContext;

  extParams: ItemModel
  @State previewUri: Resource = $r('app.media.splash')
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State isAutoPlay: boolean = false
  @State showControls: boolean = true
  controller: VideoController = new VideoController()

  @State screenDirection: number = 0
  @State videoWidth: string = '100%'
  @State videoHeight: string = '70%'

  @State tipWidth: string = '100%'
  @State tipHeight: string = '30%'

  @State componentDirection: number = FlexDirection.Column
  @State tipDirection: number = FlexDirection.Column

  aboutToAppear() {
    console.log('准备加载数据')
    if(AppStorage.Get('screenDirection') != 'undefined'){
      this.screenDirection = AppStorage.Get(CommonConstants.ScreenDirection)
    }

    this.configureParamsByScreenDirection()

    this.extParams = router.getParams() as ItemModel
    this.eventHubFunc()
  }

  onBackPress(){
    this.context.eventHub.off('onConfigurationUpdate')
  }

  build() {
      Flex({direction: this.componentDirection}){
        Video({
          src: this.extParams.playUrl,
          previewUri: this.extParams.coverUrl,
          currentProgressRate: this.curRate,
          controller: this.controller,
        }).width(this.videoWidth).height(this.videoHeight)
          .autoPlay(this.isAutoPlay)
          .objectFit(ImageFit.Contain)
          .controls(this.showControls)
          .onStart(() => {
            console.info('onStart')
          })
          .onPause(() => {
            console.info('onPause')
          })
          .onFinish(() => {
            console.info('onFinish')
          })
          .onError(() => {
            console.info('onError')
          })
          .onPrepared((e) => {
            console.info('onPrepared is ' + e.duration)
          })
          .onSeeking((e) => {
            console.info('onSeeking is ' + e.time)
          })
          .onSeeked((e) => {
            console.info('onSeeked is ' + e.time)
          })
          .onUpdate((e) => {
            console.info('onUpdate is ' + e.time)
          })

        Flex({direction: this.tipDirection, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center, alignContent: FlexAlign.Center}){
          Row() {
            Button('src').onClick(() => {
              // this.videoSrc = $rawfile('video2.mp4') // 切换视频源
            }).margin(5)
            Button('previewUri').onClick(() => {
              // this.previewUri = $r('app.media.poster2') // 切换视频预览海报
            }).margin(5)
            Button('controls').onClick(() => {
              this.showControls = !this.showControls // 切换是否显示视频控制栏
            }).margin(5)
          }

          Row() {
            Button('start').onClick(() => {
              this.controller.start() // 开始播放
            }).margin(5)
            Button('pause').onClick(() => {
              this.controller.pause() // 暂停播放
            }).margin(5)
            Button('stop').onClick(() => {
              this.controller.stop() // 结束播放
            }).margin(5)
            Button('setTime').onClick(() => {
              this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置
            }).margin(5)
          }
          Row() {
            Button('rate 0.75').onClick(() => {
              this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
            }).margin(5)
            Button('rate 1').onClick(() => {
              this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
            }).margin(5)
            Button('rate 2').onClick(() => {
              this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
            }).margin(5)
          }
        }
        .width(this.tipWidth).height(this.tipHeight)
      }

  }

  eventHubFunc() {
    this.context.eventHub.on('onConfigurationUpdate', (data) => {
       console.log(JSON.stringify(data))
       let config = data as Configuration
       this.screenDirection = config.direction

       this.configureParamsByScreenDirection()

    });
  }


  configureParamsByScreenDirection(){
    if(this.screenDirection == 0){
      this.videoWidth = '100%'
      this.videoHeight = '70%'
      this.tipWidth = '100%'
      this.tipHeight = '30%'
      this.componentDirection = FlexDirection.Column

    } else {
      this.videoWidth = '60%'
      this.videoHeight = '100%'
      this.tipWidth = '40%'
      this.tipHeight = '100%'
      this.componentDirection = FlexDirection.Row

    }

  }

}

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习文档能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

鸿蒙（HarmonyOS NEXT）5.0最新学习路线

在这里插入图片描述

有了路线图，怎么能没有学习文档呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习文档

《鸿蒙 (OpenHarmony)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V2.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习文档，请点击→纯血版全套鸿蒙HarmonyOS学习文档

代码减少发量
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS应用开发-AppMultiplier体验分享.docx
06-09
在 HarmonyOS 应用开发中，AppMultiplier 是一个极具创新性的功能，它允许开发者构建能够充分利用设备屏幕空间的应用。这个特性主要通过平行视界（App Multiplier）来实现，为用户提供更加高效和沉浸式的多任务体验...
javascript瀑布流式图片懒加载实例
10-22
主要为大家详细介绍了javascript瀑布流式图片懒加载实例，感兴趣的小伙伴们可以参考一下
鸿蒙OS开发实例：【瀑布流式图片浏览】
2301_76813281的博客
03-29 1133
瀑布流式图片展示横竖屏图片/视频展示。
HarmonyOS开发学习： 瀑布流式图片浏览-Video控件
maniu110的博客
07-08 611
瀑布流式展示图片文字，在当前产品设计中已非常常见，本篇将介绍关于WaterFlow的图片浏览场景，顺便集成Video控件，以提高实践的趣味性
HarmonyOS NEXT开发实战：主页瀑布流实现实列
m0_72493819的博客
07-03 934
该场景多用于购物、资讯类应用。
HarmonyOS实战开发：Stage模型开发
2401_84194030的博客
04-23 1023
Stage模型提供UIAbility和ExtensionAbility两种类型的组件，这两种组件都有具体的类承载，支持面向对象的开发方式。
纯血鸿蒙APP实战开发——主页瀑布流实现
m0_71524094的博客
04-27 683
本示例介绍使用ArkUIWaterFlow组件和实现瀑布流场景。该场景多用于购物、资讯类应用。如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
HarmonyOS NEXT应用开发案例集
1
03-20 2235
随着应用代码的复杂度提升，为了使应用有更好的可维护性和可扩展性，良好的应用架构设计变得尤为重要。本篇文章将介绍一个应用通用架构的设计思路，以减少模块间的耦合、提升团队开发效率，为开发者呈现一个清晰且结构化的开发框架。本文以“应用通用开发范例App”为例，从分层架构设计和模块化设计的方面介绍应用的架构组成。分层架构设计：将应用划分为产品定制层、基础特性层和公共能力层，可以降低层间的依赖性，从而提升代码的可维护性。|---common // 公共能力层，包括公共UI组件、数据管理、通信和工具库等。
HarmonyOS实战开发：@ohos.display (屏幕属性)
2401_84194030的博客
05-29 1081
屏幕属性提供管理显示设备的一些基础能力........
HarmonyOS鸿蒙应用开发 (一、环境搭建及第一个Hello World)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-17 3693
2024年1月16日，华为目前开启已HarmonyOS NEXT开发者预览版Beta招募，报名周期为1月15日-1月22日。HarmonyOS NEXT开发者预览版将不再兼容安卓开源应用，仅支持鸿蒙内核和系统的应用，因此被称为“纯血鸿蒙”。
HarmonyOS NEXT星河版之实战商城App瀑布流(含加载更多)
小洋人最happy的专栏
04-17 603
【代码】HarmonyOS NEXT星河版之实战商城App瀑布流(含加载更多)
javascript瀑布流式图片懒加载实例解析与优化
10-22
} 在这个JavaScript瀑布流式图片懒加载实例中，我们主要探讨了如何通过优化技术来提升用户体验和页面性能。懒加载是一种策略，旨在减少页面初次加载时的数据量，仅在用户滚动到相应位置时才加载图片，从而节省网络...
【HarmonyOS学习】Calendar Kit日历管理
包包熊的博客
07-16 529
Calendar Kit为用户提供了一系列接口来获取日历账户，并使用特定的接口向日历账户中写入日程。 如果写入的日程带有提醒时间则系统会在时间到达时向用户发送提醒。
【HarmonyOS学习】动画
包包熊的博客
07-16 292
分类介绍了常用动画的类型，并包含相关示例代码方便学习
玩转鸿蒙NXET之组件导航与路由跳转二
断线的风筝
07-12 939
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。模块通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。本文将从页面跳转、页面返回、页面返回前增加一个询问框和命名路由几个方面介绍模块提供的功能。页面跳转是开发过程中的一个重要组成部分。在使用应用程序时，通常需要在不同的页面之间跳转，有时还需要将数据从一个页面传递到另一个页面。 参数接收 通过调用方法获取Index页面传递过来的自定义参数 页面返回 页面返回 当用户在一个页面完成操作后，通常需要返回到上一个页面或者指定页面，这就需要用到
誉天教育与武汉晴川学院携手开展鸿蒙实训营，共筑鸿蒙生态新篇章！
07-15 485
为了进一步推动鸿蒙生态的繁荣发展，培养更多具备鸿蒙原生应用开发能力的专业人才，誉天教育与武汉晴川学院强强联合，共同举办了鸿蒙实训营，为鸿蒙生态的建设注入了新的活力。誉天教育作为国内领先的IT认证与实战技能培训机构，与武汉晴川学院携手合作，旨在通过鸿蒙实训营的形式，为广大学员提供一个深入了解鸿蒙系统、掌握鸿蒙原生应用开发技能的平台，共同推动鸿蒙生态的繁荣发展。推动人才培养：实训营的成功举办，不仅提升了学员们的鸿蒙原生应用开发能力，还为鸿蒙生态的繁荣发展提供了坚实的人才支撑。誉天教育共建鸿蒙生态的举措。
鸿蒙Navigation路由能力汇总
qq_36859035的博客
07-17 77
属性汇总：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation。
鸿蒙语言基础类库：【@system.mediaquery (媒体查询)】
最新发布
2301_76813281的博客
07-17 319
给MediaQueryList添加回调函数，回调函数应在onShow生命周期之前添加，即需要在onInit或onReady生命周期里添加。以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full。根据媒体查询条件，创建MediaQueryList对象。移除MediaQueryList中的回调函数。matches状态变化时的执行函数。定义MediaQuery列表信息。定义MediaQuery事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值