List 语法

List 组件 仅仅 支持ListItem,ListItemGroup 子组件

List 参数

interface ListInterface {
  // 设置当前List初次加载的时候显示起始位置的item索引,默认值是 0

  initialIndex?: number;

  // 子组件主轴方向的间隔, 每个Item之间的间隔

  space?: number | string;

  // 滚动控制器

  scroller?: Scroller;
}

declare class Scroller {
  // 滚动到指定位置
  scrollTo: {
    // 横轴滚动距离
    xOffset: number | string,
    // 纵轴滚动距离
    yOffset: number | string,
    // 滚动动画
    animation?: ScrollAnimationOptions | boolean,
  };
  // 滚动到容器边缘,不区分滚动轴方向，Edge.Top和Edge.Start表现相同，Edge.Bottom和Edge.End表现相同。
  scrollEdge: {
    value: Edge, // Edge.Top | Edge.Bottom | Edge.Start | Edge.End
    options: ScrollEdgeOptions, // 设置滚动到边缘位置的模式
  };

  // 滚动到下一页或者上一页

  scrollPage: {
    next: boolean, // true 表示下一页，false 表示上一页
  };

  // 获取当前的滚动偏移量 结果就是 就是{ xOffset:number , yOffset:number }

  currentOffset: OffsetResult;

  // scrollToIndex 滑动到指定的Index,支持滑动额外偏移量

  scrollToIndex: {
    value: number, // 滑动到指定的Index
    smooth: boolean, // 是否有动效 true 就代表有, false 就代表没有
    align: ScrollAlign, // 滑动对齐方式 ScrollAlign.START
    //  { extraOffset: { value: 230, unit: LengthUnit.VP } }
    // value 就是偏移量 unit 就是单位
    options: ScrollToIndexOptions, // 设置好偏移量
  };

  // scrollBy
  scrollBy: {
    dx: number, // 横轴偏移量
    dy: number, // 纵轴偏移量
  };

  // 是否滚动到底部

  isAtEnd: boolean;

  // {"x":0,"y":0,"width":360,"height":300}

  getItemRect: RectResult; // 获取指定索引的Item的宽度和高度,x,y
}

declare interface ScrollEdgeOptions {
  // 滚动速度

  velocity: number;
}

declare interface ScrollAnimationOptions {
  // 动画 持续时间
  duration?: number;

  // 滚动曲线，默认值是Curve.Ease
  curve?: Curve | ICurve;

  // 滚动是否越界 默认值是false
  canOverScroll?: boolean;
}

参数用法

@Entry
@Component
struct Index9 {
@State ListData: string[] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
// 滚动控制器

private scrollControl: Scroller = new Scroller()

build() {
    List(
        {
            initialIndex: 2,
            space: 30,
            scroller: this.scrollControl
        }
    ) {
        ForEach(this.ListData, (content: string, index) => {
            ListItemGroup() {
                ListItem() {
                    Row() {
                        Text(content).fontSize(25).fontColor(Color.Red)
                    }
                }
                .width('100%')
                .height(300)
                .onClick(() => {

                    // 点击滚动到指定位置和动画效果

                    // this.scrollControl.scrollTo({
                    //     xOffset: 0,
                    //     yOffset: 1500,
                    //     animation: {
                    //         curve: Curve.EaseIn,
                    //         duration: 2000,
                    //         canOverScroll: true
                    //     }
                    // })

                    // 点击滚动到容器边缘,第二个参数就是速度

                    // this.scrollControl.scrollEdge(Edge.Bottom, { velocity: 300 })

                    // 点击滚动到下一页

                    // this.scrollControl.scrollPage({ next: true })

                    // 获取目前滚动的距离 结果 就是{ xOffset:0 , yOffset:660 }

                    // console.info(JSON.stringify(this.scrollControl.currentOffset()))

                    // 滚动到指定的序号 支持偏移量

                    // this.scrollControl.scrollToIndex(10, true, ScrollAlign.START,
                    //     { extraOffset: { value: 230, unit: LengthUnit.VP } })

                    // 滚动到指定的距离

                    // this.scrollControl.scrollBy(0, 30)

                    // 是否滚动到底部

                    // console.info(this.scrollControl.isAtEnd().toString())

                    // 获取子组件的索引 获取子组件的大小及相对容器组件的位置。
                    // {"x":0,"y":0,"width":360,"height":300}
                    console.info(JSON.stringify(this.scrollControl.getItemRect(2)))
                })
            }
            .backgroundColor(Color.Pink)

        })
    }
}
}

List 属性

declare class ListAttributes {
  // 设置 List 组件排列方向

  listDirection: Axis;

  // 分割线
  divider: {
    // 分割线宽度
    strokeWidth: number,
    // 颜色
    color: Color.Green,
    // 分割线 与列表 侧边 起始端 距离
    startMargin: number,
    // 分割线 与列表 侧边 结束端 距离
    endMargin: number,
  };

  // 是否显示滚动条 BarState BarState.Auto(自动) | BarState.Off(隐藏) | BarState.On (显示)

  scrollBar: BarState;

  // 预加载列表

  cachedCount: number;

   // 设置边缘滑动效果反弹还是遮罩
   //  EdgeEffect.Spring 反弹
   //  EdgeEffect.Fade 遮罩
  edgeEffect:{
       EdgeEffect.Spring
  }

  // chainAnimation  是否开启链式动画
  // 就是 主带次而不是自由滑动
  chainAnimation:boolean

  // 一排放多少个
  lanes: number || {minLength: number, maxLength: number}

  // 当每行 ListItem的宽度小于每行的宽度时，辅轴对齐的方式

  alignListItem: ListItemAlign.Center

  // 配合ListItemGroup组件使用，设置ListItemGroup中header和footer是否要吸顶或吸底。
  // StickyStyle.Header , StickyStyle.Footer , StickyStyle.None
  sticky: StickyStyle.None

  // 是否支持滚动手势

  enableScrollInteraction:Boolean

  // 摩擦系数 例如 0.4
  friction:float

  // 设置起始内容偏移量

  contentStartOffset: number

  // 设置结束内容偏移量
  contentEndOffset:number


}

属性用法

@Entry
@Component
struct Index9 {
    @State ListData: string[] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
    // 滚动控制器
    @State arr: string[] =
        ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
    @State alignListItem: ListItemAlign = ListItemAlign.Center

    build() {
        Column() {
            List({ space: 20, initialIndex: 0 }) {
                ForEach(this.arr, (item: string) => {
                    ListItem() {
                        Text('' + item)
                            .width(30)
                            .height(100)
                            .fontSize(16)
                            .textAlign(TextAlign.Center)
                            .borderRadius(10)
                            .backgroundColor(0xFFFFFF)
                    }
                    .border({ width: 2, color: Color.Green })
                }, (item: string) => item)
            }
            .height(300)
            .width("90%")

            // 边框

            .border({ width: 3, color: Color.Red })

            // 一排 几个

            .lanes(3)

            // 辅助对其方式

            .alignListItem(this.alignListItem)

            // 滚动条是否显示

            .scrollBar(BarState.Off)

            // 吸顶
            .sticky(StickyStyle.None)

            // 是否支持滚动手势
            .enableScrollInteraction(true)

            // 摩擦系数
            .friction(0.4)

            // 设置内容起始偏移量
            .contentStartOffset(30)

            // 设置内容结束偏移量
            .contentEndOffset(50)

        }
    }
}

List 事件

// 滚动开始的序号 ,结束的序号,中间的序号
onScrollIndex((start, end, center) => {
  console.info("--开始的序号---");
  console.info(start.toString());
  console.info("---居中的序号---");
  console.info(center.toString());
  console.info("---结束的序号---");
  console.info(end.toString());
});
// 到达页面开始的位置
onReachStart(() => {
  console.info("到达了页面起始的位置");
});
// 到达页面结束的位置
onReachEnd(() => {
  console.info("到达了页面结束的位置");
});
// 页面开始滑动
onScrollStart(() => {
  console.info("列表开始滑动了");
});
// 页面滚动停止
onScrollStop(() => {
  console.info("列表开始结束滚动");
});
// 列表元素发生移动的时候触发
// from 移动前的索引值
// to 移动后的索引值
// 返回值是boolean 如果移动了就是true,没移动就是false
onItemMove((from: number, to: number) => {
  return false;
});
// 开始拖拽列表元素触发
// event 拖拽点的信息
// itemIndex 被拖拽元素的索引值
onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
  console.info(JSON.stringify(event));
  console.info(itemIndex.toString());
});
// 拖拽列表元素进入列表范围触发
// event 拖拽点的信息
onItemDragEnter((event: ItemDragInfo) => {
  console.info(JSON.stringify(event));
});
// 拖拽列表元素在列表范围内移动的时候触发
// event 拖拽点的信息
// itemIndex 拖拽的起始位置
// insertIndex 拖拽的插入位置
onItemDragMove(
  (event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
    console.info(JSON.stringify(event));
    console.info(itemIndex.toString());
    console.info(insertIndex.toString());
  }
);
// 拖拽列表元素离开列表范围的时候触发
// event 拖拽点的信息
// 拖拽离开的列表元素的索引值
onItemDragLeave((event: ItemDragInfo, itemIndex: number) => {
  console.info(JSON.stringify(event));
  console.info(itemIndex.toString());
});

 // 拖拽结束放开元素
// event 拖拽点的信息
// itemIndex 拖拽起始位置。
// insertIndex 拖拽插入位置
// isSuccess 是否成功释放
.onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
    console.info(JSON.stringify(event))
    console.info(itemIndex.toString())
    console.info(insertIndex.toString())
    console.info(isSuccess.toString())
})

 // 滚动组件滑动时触发，返回当前·帧·滑动的偏移量和当前滑动状态
// ScrollState.Idle 对应 0 空间
// ScrollState.Scroll 对应 1 滚动状态
// ScrollState.Fling 对应 2 惯性滚动
.onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
    console.info("页面偏移量")
    console.info(scrollOffset.toString())
    console.info("滑动状态")
    console.info(scrollState.toString())
})

// 滚动组件滑动时触发，返回当前帧滑动的偏移量和当前滑动状态
// ScrollState.Idle 对应 0 空间
// ScrollState.Scroll 对应 1 滚动状态
// ScrollState.Fling 对应 2 惯性滚动
.onWillScroll((scrollOffset: number, scrollState: ScrollState,
    scrollSource: ScrollSource): ScrollResult => {
    console.info("当前帧偏移量" + scrollOffset.toString())
    console.info(scrollState.toString())
    console.info(scrollSource.toString())
    return {
        offsetRemain: 10
    }
})

事件用法

@Entry
@Component
struct Index {
    @State message: string[] = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"];

    build() {
        Stack({ alignContent: Alignment.BottomEnd }) {
            List() {
                ForEach(this.message, (content: string, index) => {
                    ListItemGroup() {
                        ListItem() {
                            Column() {
                                Text(content).fontSize(25).fontColor(Color.Red)
                                Divider().width('100%').height(5).backgroundColor(Color.Brown)
                                Text("内容")
                                    .fontSize(25)
                                    .fontColor(Color.Red)
                                    .width('100%')
                                    .height(100)
                                    .backgroundColor(Color.Pink)
                            }
                            .backgroundColor(Color.Green)

                        }
                    }
                })
            }
            // 获取到页面开始 结束 和中间的序号
            .onScrollIndex((start, end, center) => {
                console.info("--开始的序号---")
                console.info(start.toString())
                console.info("---居中的序号---")
                console.info(center.toString())
                console.info("---结束的序号---")
                console.info(end.toString())
            })
            // 到达页面起始的位置
            .onReachStart(() => {
                console.info("到达了页面起始的位置")
            })
            // 到达页面结束的位置
            .onReachEnd(() => {
                console.info("到达了页面结束的位置")
            })
            // 页面开始滑动
            .onScrollStart(() => {
                console.info("列表开始滑动了")
            })
            // 页面滚动停止
            .onScrollStop(() => {
                console.info("列表开始结束滚动")
            })
            // 列表元素发生移动的时候触发
            // from 移动前的索引值
            // to 移动后的索引值
            // 返回值是boolean 如果移动了就是true,没移动就是false
            .onItemMove((from: number, to: number) => {
                return false
            })

            // 开始拖拽列表元素触发
            // event 拖拽点的信息
            // itemIndex 被拖拽元素的索引值
            .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
                console.info(JSON.stringify(event))
                console.info(itemIndex.toString())
            })

            // 拖拽列表元素进入列表范围触发
            // event 拖拽点的信息
            .onItemDragEnter((event: ItemDragInfo) => {
                console.info(JSON.stringify(event))
            })

            // 拖拽列表元素在列表范围内移动的时候触发
            // event 拖拽点的信息
            // itemIndex 拖拽的起始位置
            // insertIndex 拖拽的插入位置
            .onItemDragMove((event: ItemDragInfo, itemIndex: number, insertIndex: number) => {
                console.info(JSON.stringify(event))
                console.info(itemIndex.toString())
                console.info(insertIndex.toString())
            })
            // 拖拽列表元素离开列表范围的时候触发
            // event 拖拽点的信息
            // itemIndex 拖拽离开的列表元素索引值。
            .onItemDragLeave((event: ItemDragInfo, itemIndex: number) => {
                console.info(JSON.stringify(event))
                console.info(itemIndex.toString())
            })

            // 拖拽结束放开元素
            // event 拖拽点的信息
            // itemIndex 拖拽起始位置。
            // insertIndex 拖拽插入位置
            // isSuccess 是否成功释放
            .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
                console.info(JSON.stringify(event))
                console.info(itemIndex.toString())
                console.info(insertIndex.toString())
                console.info(isSuccess.toString())
            })
            // 滚动组件滑动时触发，返回当前帧滑动的偏移量和当前滑动状态
            // ScrollState.Idle 对应 0 空间
            // ScrollState.Scroll 对应 1 滚动状态
            // ScrollState.Fling 对应 2 惯性滚动
            .onDidScroll((scrollOffset: number, scrollState: ScrollState) => {
                console.info("页面偏移量")
                console.info(scrollOffset.toString())
                console.info("滑动状态")
                console.info(scrollState.toString())
            })

            // 滚动组件滑动时触发，返回当前帧滑动的偏移量和当前滑动状态
            // ScrollState.Idle 对应 0 空间
            // ScrollState.Scroll 对应 1 滚动状态
            // ScrollState.Fling 对应 2 惯性滚动
            .onWillScroll((scrollOffset: number, scrollState: ScrollState,
                scrollSource: ScrollSource): ScrollResult => {
                console.info("当前帧偏移量" + scrollOffset.toString())
                console.info(scrollState.toString())
                console.info(scrollSource.toString())
                return {
                    offsetRemain: 10
                }
            })

            Button("+")
                .margin({
                    right: 10
                })
                .fontSize(21)
                .backgroundColor(Color.Blue)
                .fontColor(Color.Yellow)
                .width(60)
                .height(60)
                .type(ButtonType.Circle)
                .onClick(() => {
                    console.info("开始吧")
                })
                .zIndex(99)
        }
    }
}