鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:WaterFlow)

瀑布流容器,由“行”和“列”分割的单元格所组成,通过容器自身的排列规则,将不同大小的“项目”自上而下,如瀑布般紧密布局。

说明:

该组件从API Version 9 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

包含FlowItem子组件。

说明:

WaterFlow子组件的visibility属性设置为None时不显示,但该子组件周围的columnsGap、rowsGap、margin仍会生效。

接口

WaterFlow(options?: WaterFlowOptions)

参数:

参数名参数类型必填参数描述
optionsWaterFlowOptions瀑布流组件参数。

WaterFlowOptions对象说明

参数名参数类型必填参数描述
footerCustomBuilder设置WaterFlow尾部组件。
scrollerScroller可滚动组件的控制器,与可滚动组件绑定。
说明:
不允许和其他滚动类组件,如:List、Grid、Scroll等绑定同一个滚动控制对象。

属性

除支持通用属性外,还支持以下属性:

名称参数类型描述
columnsTemplatestring设置当前瀑布流组件布局列的数量,不设置时默认1列。
例如, '1fr 1fr 2fr' 是将父组件分3列,将父组件允许的宽分为4等份,第一列占1份,第二列占1份,第三列占2份。
可使用columnsTemplate('repeat(auto-fill,track-size)')根据给定的列宽track-size自动计算列数,其中repeat、auto-fill为关键字,track-size为可设置的宽度,支持的单位包括px、vp、%或有效数字,默认单位为vp,使用方法参见示例2。
默认值:'1fr'
rowsTemplatestring设置当前瀑布流组件布局行的数量,不设置时默认1行。
例如, '1fr 1fr 2fr'是将父组件分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。
可使用rowsTemplate('repeat(auto-fill,track-size)')根据给定的行高track-size自动计算行数,其中repeat、auto-fill为关键字,track-size为可设置的高度,支持的单位包括px、vp、%或有效数字,默认单位为vp。
默认值:'1fr'
itemConstraintSizeConstraintSizeOptions设置约束尺寸,子组件布局时,进行尺寸范围限制。
columnsGapLength设置列与列的间距。
默认值:0
rowsGapLength设置行与行的间距。
默认值:0
layoutDirectionFlexDirection设置布局的主轴方向。
默认值:FlexDirection.Column
enableScrollInteraction10+boolean设置是否支持滚动手势,当设置为false时,无法通过手指或者鼠标滚动,但不影响控制器的滚动接口。
默认值:true
nestedScroll10+NestedScrollOptions嵌套滚动选项。设置向前向后两个方向上的嵌套滚动模式,实现与父组件的滚动联动。
friction10+number | Resource设置摩擦系数,手动划动滚动区域时生效,只对惯性滚动过程有影响,对惯性滚动过程中的链式效果有间接影响。
默认值:非可穿戴设备为0.6,可穿戴设备为0.9
说明:
设置为小于等于0的值时,按默认值处理
cachedCount11+number设置预加载的FlowItem的数量,只在LazyForEach中生效。
默认值:1
说明:
设置该属性后会缓存cachedCount个FlowItem。
LazyForEach超出显示和缓存范围的FlowItem会被释放。
设置为小于0的值时,按默认值显示。
scrollBar11+BarState设置滚动条状态。
默认值:BarState.Off
说明:
滚动条位置和长度以已布局过的总高度和当前偏移为准,在瀑布流布局全部子节点之前随着滑动持续变化。
scrollBarWidth11+string | number设置滚动条的宽度,不支持百分比设置。
默认值:4
单位:vp
说明:
如果滚动条的宽度超过其高度,则滚动条的宽度会变为默认值。
scrollBarColor11+string | number | Color设置滚动条的颜色。
edgeEffect11+value:EdgeEffect,
options?:EdgeEffectOptions11+
设置边缘滑动效果。
- value:设置瀑布流组件的边缘滑动效果,支持弹簧效果和阴影效果。
默认值:EdgeEffect.None
- options:设置组件内容大小小于组件自身时,是否开启滑动效果。
默认值:false

layoutDirection优先级高于rowsTemplate和columnsTemplate。根据layoutDirection设置情况,分为以下三种设置模式:

  • layoutDirection设置纵向布局(FlexDirection.Column 或 FlexDirection.ColumnReverse)

    此时columnsTemplate有效(如果未设置,取默认值)。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时,瀑布流组件纵向布局,辅轴均分成横向2列。

  • layoutDirection设置横向布局(FlexDirection.Row 或 FlexDirection.RowReverse)

    此时rowsTemplate有效(如果未设置,取默认值)。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时,瀑布流组件横向布局,辅轴均分成纵向3列。

  • layoutDirection未设置布局方向

    布局方向为layoutDirection的默认值:FlexDirection.Column,此时columnsTemplate有效。例如columnsTemplate设置为"1fr 1fr"、rowsTemplate设置为"1fr 1fr 1fr"时,瀑布流组件纵向布局,辅轴均分成横向2列。

事件

除支持通用事件外,还支持以下事件:

名称功能描述
onReachStart(event: () => void)瀑布流组件到达起始位置时触发。
onReachEnd(event: () => void)瀑布流组件到底末尾位置时触发。
onScrollFrameBegin10+(event: (offset: number, state: ScrollState => { offsetRemain: number })瀑布流开始滑动时触发,事件参数传入即将发生的滑动量,事件处理函数中可根据应用场景计算实际需要的滑动量并作为事件处理函数的返回值返回,瀑布流将按照返回值的实际滑动量进行滑动。
- offset:即将发生的滑动量,单位vp。
- state:当前滑动状态。
- offsetRemain:实际滑动量,单位vp。
触发该事件的条件:手指拖动WaterFlow、WaterFlow惯性划动时每帧开始时触发;WaterFlow超出边缘回弹、使用滚动控制器和拖动滚动条的滚动不会触发。
onScroll11+(event: (scrollOffset: number, scrollState: ScrollState) => void)瀑布流滑动时触发。
- scrollOffset: 每帧滚动的偏移量,瀑布流的内容向上滚动时偏移量为正,向下滚动时偏移量为负,单位vp。
- scrollState: 当前滑动状态。
onScrollIndex11+(event: (first: number, last: number) => void)当前瀑布流显示的起始位置/终止位置的子组件发生变化时触发。瀑布流初始化时会触发一次。
- first: 当前显示的WaterFlow起始位置的索引值。
- last: 当前显示的瀑布流终止位置的索引值。
瀑布流显示区域上第一个子组件/最后一个组件的索引值有变化就会触发。
onScrollStart11+(event: () => void)瀑布流滑动开始时触发。手指拖动瀑布流或瀑布流的滚动条触发的滑动开始时,会触发该事件。使用Scroller滑动控制器触发的带动画的滑动,动画开始时会触发该事件。
onScrollStop11+(event: () => void)瀑布流滑动停止时触发。手指拖动瀑布流或瀑布流的滚动条触发的滑动,手指离开屏幕并且滑动停止时会触发该事件;使用Scroller滑动控制器触发的带动画的滑动,动画停止会触发该事件。

示例

示例1

WaterFlow的基本使用。

// WaterFlowDataSource.ets// 实现IDataSource接口的对象,用于瀑布流组件加载数据
export class WaterFlowDataSource implements IDataSource {private dataArray: number[] = []private listeners: DataChangeListener[] = []constructor() {for (let i = 0; i < 100; i++) {this.dataArray.push(i)}}// 获取索引对应的数据public getData(index: number): number {return this.dataArray[index]}// 通知控制器数据重新加载notifyDataReload(): void {this.listeners.forEach(listener => {listener.onDataReloaded()})}// 通知控制器数据增加notifyDataAdd(index: number): void {this.listeners.forEach(listener => {listener.onDataAdd(index)})}// 通知控制器数据变化notifyDataChange(index: number): void {this.listeners.forEach(listener => {listener.onDataChange(index)})}// 通知控制器数据删除notifyDataDelete(index: number): void {this.listeners.forEach(listener => {listener.onDataDelete(index)})}// 通知控制器数据位置变化notifyDataMove(from: number, to: number): void {this.listeners.forEach(listener => {listener.onDataMove(from, to)})}// 获取数据总数public totalCount(): number {return this.dataArray.length}// 注册改变数据的控制器registerDataChangeListener(listener: DataChangeListener): void {if (this.listeners.indexOf(listener) < 0) {this.listeners.push(listener)}}// 注销改变数据的控制器unregisterDataChangeListener(listener: DataChangeListener): void {const pos = this.listeners.indexOf(listener)if (pos >= 0) {this.listeners.splice(pos, 1)}}// 增加数据public add1stItem(): void {this.dataArray.splice(0, 0, this.dataArray.length)this.notifyDataAdd(0)}// 在数据尾部增加一个元素public addLastItem(): void {this.dataArray.splice(this.dataArray.length, 0, this.dataArray.length)this.notifyDataAdd(this.dataArray.length - 1)}// 在指定索引位置增加一个元素public addItem(index: number): void {this.dataArray.splice(index, 0, this.dataArray.length)this.notifyDataAdd(index)}// 删除第一个元素public delete1stItem(): void {this.dataArray.splice(0, 1)this.notifyDataDelete(0)}// 删除第二个元素public delete2ndItem(): void {this.dataArray.splice(1, 1)this.notifyDataDelete(1)}// 删除最后一个元素public deleteLastItem(): void {this.dataArray.splice(-1, 1)this.notifyDataDelete(this.dataArray.length)}// 重新加载数据public reload(): void {this.dataArray.splice(1, 1)this.dataArray.splice(3, 2)this.notifyDataReload()}
}
// Index.ets
import { WaterFlowDataSource } from './WaterFlowDataSource'@Entry
@Component
struct WaterFlowDemo {@State minSize: number = 80@State maxSize: number = 180@State fontSize: number = 24@State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]scroller: Scroller = new Scroller()dataSource: WaterFlowDataSource = new WaterFlowDataSource()private itemWidthArray: number[] = []private itemHeightArray: number[] = []// 计算FlowItem宽/高getSize() {let ret = Math.floor(Math.random() * this.maxSize)return (ret > this.minSize ? ret : this.minSize)}// 设置FlowItem的宽/高数组setItemSizeArray() {for (let i = 0; i < 100; i++) {this.itemWidthArray.push(this.getSize())this.itemHeightArray.push(this.getSize())}}aboutToAppear() {this.setItemSizeArray()}@BuilderitemFoot() {Column() {Text(`Footer`).fontSize(10).backgroundColor(Color.Red).width(50).height(50).align(Alignment.Center).margin({ top: 2 })}}build() {Column({ space: 2 }) {WaterFlow() {LazyForEach(this.dataSource, (item: number) => {FlowItem() {Column() {Text("N" + item).fontSize(12).height('16')Image('res/waterFlowTest(' + item % 5 + ').jpg').objectFit(ImageFit.Fill).width('100%').layoutWeight(1)}}.onAppear(() => {// 即将触底时提前增加数据if (item + 20 == this.dataSource.totalCount()) {for (let i = 0; i < 100; i++) {this.dataSource.addLastItem()}}}).width('100%').height(this.itemHeightArray[item % 100]).backgroundColor(this.colors[item % 5])}, (item: string) => item)}.columnsTemplate("1fr 1fr").columnsGap(10).rowsGap(5).backgroundColor(0xFAEEE0).width('100%').height('100%')}}
}

zh-cn_image_WaterFlow.gif

示例2

auto-fill的使用。

//index.ets
import { WaterFlowDataSource } from './WaterFlowDataSource'@Entry
@Component
struct WaterFlowDemo {@State minSize: number = 80@State maxSize: number = 180@State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F]dataSource: WaterFlowDataSource = new WaterFlowDataSource()private itemWidthArray: number[] = []private itemHeightArray: number[] = []// 计算FlowItem宽/高getSize() {let ret = Math.floor(Math.random() * this.maxSize)return (ret > this.minSize ? ret : this.minSize)}// 设置FlowItem宽/高数组setItemSizeArray() {for (let i = 0; i < 100; i++) {this.itemWidthArray.push(this.getSize())this.itemHeightArray.push(this.getSize())}}aboutToAppear() {this.setItemSizeArray()}build() {Column({ space: 2 }) {WaterFlow() {LazyForEach(this.dataSource, (item: number) => {FlowItem() {Column() {Text("N" + item).fontSize(12).height('16')}}.width('100%').height(this.itemHeightArray[item % 100]).backgroundColor(this.colors[item % 5])}, (item: string) => item)}.columnsTemplate('repeat(auto-fill,80)').columnsGap(10).rowsGap(5).padding({left:5}).backgroundColor(0xFAEEE0).width('100%').height('100%')}}
}

waterflow_auto-fill.png

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

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

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

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

鸿蒙(HarmonyOS NEXT)最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(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学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2869689.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

神经网络中激活函数的绘制——阶跃函数、sigmoid函数、ReLU函数

一、阶跃函数 import numpy as np import matplotlib.pylab as plt def step_function(x):return np.array(x>0)x np.arange(-5.0,5.0,0.1) y step_function(x) plt.plot(x, y) plt.ylim(-0.1, 1.1) plt.show() 二、sigmoid函数 import numpy as np import matplotlib.p…

194 基于matlab的日历GUI制作

基于matlab的日历GUI制作&#xff0c;可实时显示当前的日期和时间&#xff0c;精确到秒。非常漂亮&#xff0c;也很基础&#xff0c;学习GUI的不错程序&#xff0c;程序已调通&#xff0c;可直接运行。 194 matlab 日历制作 GUI可视化 - 小红书 (xiaohongshu.com)

JS第一阶段2

文章目录 1. 对象创建对象的三种方式new关键字遍历对象属性 2. JS内置对象2.1查文档2.2Math对象随机数 2.3日期对象Date 使用日期格式化获取日期的总的毫秒形式倒计时秒杀案例 2.4数组对象检测是否是数组添加删除数组元素的方法数组排序数组索引方法数组去重案例数组转换为字符…

Visual Studio配置libtorch(cuda安装一步到位)

Visual Studio配置libtorch visual Studio安装cuDNN安装CUDAToolkit安装libtorch下载Visual Studio配置libtorch(cuda版本配置) visual Studio安装 visual Studio点击安装 具体的安装和配置过程这里就不进行细讲了&#xff0c;可以参考我这篇博客Visual Studio配置OpenCV(保姆…

数据结构的概念大合集01(含数据结构的基本定义,算法及其描述)

概念大合集01 1、数据结构基础的定义2、数据结构2.1 数据元素之间关系的集合2.2数据结构的三要素2.2.1数据的逻辑结构2.2.2数据的存储&#xff08;物理&#xff09;结构2.2.3数据的运算 3、数据类型4、抽象数据类型类型&#xff08;ADT&#xff09;5、算法及其描述5.1算法的5个…

R语言实现中介分析(1)

中介分析&#xff0c;也称为介导分析&#xff0c;是统计学中的一种方法&#xff0c;它用于评估一个或多个中介变量&#xff08;也称为中间变量&#xff09;在自变量和因变量之间关系中所起的作用。换句话说&#xff0c;中介分析用于探索自变量如何通过中介变量影响因变量的机制…

将 OpenCV 与 Eclipse 结合使用(插件 CDT)

返回&#xff1a;OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇&#xff1a;将OpenCV与gcc和CMake结合使用 下一篇&#xff1a;OpenCV4.9.0在windows系统下的安装 警告&#xff1a; 本教程可以包含过时的信息。 先决条件 两种方式&#xff0c;一种…

【IC设计】Verilog线性序列机点灯案例(二)(小梅哥课程)

文章目录 该系列目录&#xff1a;设计目标设计思路RTL 及 Testbench仿真结果存在的问题&#xff1f;改善后的代码RTL代码testbench代码 仿真结果 案例和代码来自小梅哥课程&#xff0c;本人仅对知识点做做笔记&#xff0c;如有学习需要请支持官方正版。 该系列目录&#xff1a;…

接雨水-热题 100?-Lua 中文代码解题第4题

接雨水-热题 100&#xff1f;-Lua 中文代码解题第4题 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释…

2.2 物理层传输介质

文章目录 2.2 物理层传输介质&#xff08;一&#xff09;传输介质及分类&#xff08;二&#xff09;导向型传输介质&#xff08;1&#xff09;双绞线&#xff08;2&#xff09;同轴电缆&#xff08;3&#xff09;光纤 &#xff08;三&#xff09;非导向性传输介质 总结 2.2 物理…

数字多空策略(实盘+回测+数据)

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学&#xff0c;点击下方链接报名&#xff1a; 量化投资速成营&#xff08;入门课程&#xff09; Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

计算机网络----计算机网络的基础

目录 一.计算机网络的相关概念 二.计算机网络的功能 三.计算机网络的发展 四.计算机网络的组成 五.计算机网络的分类 六.计算机的性能指标 1.速率 2.带宽 3.吞吐量 4.时延 5.时延带宽积 6.往返时延RTT 7.利用率 七.计算机的分层结构 八.ISO/OSI参考模型 九.OSI…

【四 (6)数据可视化之 Grafana安装、页面介绍、图表配置】

目录 文章导航一、Grafana介绍[✨ 特性]二、安装和配置1、安装2、权限配置&#xff08;账户/团队/用户&#xff09;①用户管理②团队管理③账户管理④看板权限 3、首选项配置4、插件管理①数据源插件②图表插件③应用插件④插件安装方式一⑤安装方式二 三、数据源管理1、添加数…

宜搭faas服务器获取accessToken

可以用faas服务器的OpenAPIUtil.getCustomAccessTokenThenCache&#xff08;Client ID,Client Secret&#xff09;就可以获取 至于获取这个Client ID&#xff0c;Client Secret 就需要在钉钉开放平台创建一个应用 然后在这个应用的基础信息里面有 注意的是&#xff1a;如果需要…

如何通过小程序上的产品力和品牌力提升用户的复购能力?

随着网络购物小程序的发展以及内容电商、社交电商、垂直电商、品牌自营等多个细分类型的出现&#xff0c;小程序成为用户日常购物、大促囤货以及首发抢购的重要场景&#xff0c;市场竞争也逐渐激烈。如何在用户侧获得更多转化、留存与复购&#xff0c;成为企业品牌日益关注的话…

复习知识点

1. Java常用API 1.1 String类 在java中&#xff0c;String类代表字符串&#xff0c;字符串是常量的&#xff0c;不能被改变。如果想改变字符串。可以用字符串的缓冲区&#xff0c;StringBuffer、StringBuilder 1.1.1 String类的创建方式 第一种&#xff08;常用&#xff09…

DZB-214中间继电器 工作电压220V-保持电流1A-面板安装 JOSEF约瑟

系列型号:DZB-200中间继电器 DZB-210中间继电器&#xff1b;DZB-213中间继电器&#xff1b; DZB-214中间继电器&#xff1b;DZB-217中间继电器&#xff1b; DZB-220中间继电器&#xff1b;DZB-226中间继电器&#xff1b; DZB-228中间继电器&#xff1b;DZB-230中间继电器&#…

基于springboot+mysql+Shiro实现的宠物医院管理系统

1.项目介绍 系统主要为用户提供了管理员权限的用户&#xff0c;实现了前台查看客户信息、在线添加预约等&#xff1b;后台管理医生坐诊信息、管理就诊信息、修改密码&#xff0c;管理公告、管理宠物分类、管理就诊、管理用户、修改密码等。在设计方面&#xff0c;本系统采用MV…

Android Studio 打包 Maker MV apk 详细步骤

一.使用RPG Make MV 部署项目&#xff0c;获取项目文件夹 这步基本都不会有问题&#xff1a; 二.安装Android Studio 安装过程参考教材就行了&#xff1a; https://blog.csdn.net/m0_62491877/article/details/126832118 但是有的版本面板没有Android的选项&#xff08;勾…

Explain 关键字

优质博文&#xff1a;IT-BLOG-CN explain关键字可以模拟优化器执行 SQL 查询语句&#xff0c;从而知道 MySQL 是如何处理 SQL 语句的。分析查询语句或表结构的性能瓶颈。执行语句&#xff1a;explain SQL语句。表头信息如下&#xff1a; 一、ID 参数 select 查询的序列号&…