前言
各位同学有段时间没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测试版本 明年会启动纯血鸿蒙应用 所以我就想提前给大家写一些博客文章
效果图:
具体实现
我们在鸿蒙的ark ui 里面列表使用我们的list组件来实现 类似flutter 里面的listview和安卓里面的listview 和recyclerview
代码实现:
-
准备数据源 本地数据
export interface PanelListItemType {
name: Resource;
cname: Resource;
}
export const panelInitialList: PanelListItemType[] = [
{
name: $r('app.string.Fatburningplan1'),
cname: $r('app.string.change1'),
},
{
name: $r('app.string.Fatburningplan2'),
cname: $r('app.string.change2'),
},
{
name: $r('app.string.Fatburningplan3'),
cname: $r('app.string.change3'),
},
{
name: $r('app.string.Fatburningplan4'),
cname: $r('app.string.change4'),
},
]
-
创建DataSource 管理数据 类似我们安卓的adapter 适配器一样的
import { panelInitialList, PanelListItemType } from './PanelData';
/**
* create a List range
*/
const createListRange = () => {
let result = [];
for (let i = 0; i < 2; i++) {
result = [...result, ...panelInitialList];
}
return result;
}
/**
* LazyLoad Class
*/
class BasicDataSource implements IDataSource {
private listeners: DataChangeListener[] = []
public totalCount(): number {
return 0;
}
public getData(index: number): PanelListItemType {
return undefined;
}
public getPositionData(index: number): PanelListItemType {
return undefined;
}
registerDataChangeListener(listener: DataChangeListener): void {
if (this.listeners.indexOf(listener) < 0) {
this.listeners.push(listener);
}
}
unregisterDataChangeListener(listener: DataChangeListener): void {
const position = this.listeners.indexOf(listener);
if (position >= 0) {
this.listeners.splice(position, 1);
}
}
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);
})
}
}
export class PanelDataSource extends BasicDataSource {
private listData = createListRange();
public totalCount(): number {
return this.listData.length;
}
public getData(index: number): PanelListItemType {
return this.listData[index];
}
public pushData(): void {
if(this.listData.length < 12) {
this.listData = [...this.listData, ...panelInitialList];
this.notifyDataAdd(this.listData.length - 1);
}
}
}
-
list显示在页面上面
- 我们需要用一个Row组件来包裹一下
build() {
Row() {
List({ space: TVCommonConstant.LIST_ITEM_SPACE }) {
LazyForEach(this.positionListData, (item) => {
ListItem() {
Row() {
Column() {
Row() {
Text(item?.name)
.fontSize(TVCommonConstant.NORMAL_FONT_SIZE)
.margin({ left:10,top: TVCommonConstant.BIGGER_FONT_SIZE })
}
.justifyContent(FlexAlign.Start)
.width(TVCommonConstant.GOODS_LIST_WIDTH)
Row() {
Text("置顶")
.fontColor($r('app.color.red'))
.fontSize(TVCommonConstant.GOODS_EVALUATE_FONT_SIZE)
Text(item?.cname)
.fontColor($r('app.color.black_text_color'))
.fontSize(TVCommonConstant.GOODS_EVALUATE_FONT_SIZE).margin({ left: 10 })
} .justifyContent(FlexAlign.Start)
.width(TVCommonConstant.GOODS_LIST_WIDTH)
.margin({ top: 20 })
}
.padding(TVCommonConstant.GOODS_LIST_PADDING)
.width(TVCommonConstant.GOODS_FONT_WIDTH)
.height(TVCommonConstant.LAYOUT_WIDTH_OR_HEIGHT)
}
.justifyContent(FlexAlign.SpaceBetween)
.height(TVCommonConstant.GOODS_LIST_HEIGHT)
.width(TVCommonConstant.LAYOUT_WIDTH_OR_HEIGHT)
}
.onTouch((event: TouchEvent) => {
switch (event.type) {
case TouchType.Down:
this.startTouchOffsetY = event.touches[0].y;
break;
case TouchType.Up:
this.startTouchOffsetY = event.touches[0].y;
break;
case TouchType.Move:
if(this.startTouchOffsetY - this.endTouchOffsetY > 0) {
this.positionListData.pushData();
}
break;
}
})
})
}
.width(TVCommonConstant.GOODS_LIST_WIDTH).onClick(()=>{
console.log("点击事件")
})
}
.justifyContent(FlexAlign.Center)
.width(TVCommonConstant.LAYOUT_WIDTH_OR_HEIGHT)
}
list的点击事件
.width(TVCommonConstant.GOODS_LIST_WIDTH).onClick(()=>{
console.log("点击事件")
})
list列表的其他手势事件
.onTouch((event: TouchEvent) => {
switch (event.type) {
case TouchType.Down:
this.startTouchOffsetY = event.touches[0].y;
break;
case TouchType.Up:
this.startTouchOffsetY = event.touches[0].y;
break;
case TouchType.Move:
if(this.startTouchOffsetY - this.endTouchOffsetY > 0) {
this.positionListData.pushData();
}
break;
}
})
最后总结
arkui 写法和flutter非常的像 有兴趣的同学可以多尝试哈 今天的文章就讲到这里 。最后呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢