HarmonyOS ArkUI滚动类组件-List、ListItem

List 是很常用的滚动类容器组件之一，它按照水平大概竖直方向线性分列子组件， List 的子组件必须是 ListItem ，它的宽度默认布满 List 的宽度。
List界说先容

1. interface ListInterface {
2.   (value?: { initialIndex?: number; space?: number | string; scroller?: Scroller }): ListAttribute;
3. }

复制代码

• initialIndex：默认值为 0 ，设置 List 第一次加载数据时所要体现的第一个子组件的下标，假如高出末了一个子组件的下标，则设置不见效。
  
• space：设置列表间的隔断隔断。
  
• scroller：设置滚动控制器。
  

简单样比方下所示：

1. List({space: 10}) {                       // 设置ListItem之间的间隔为10
2.   ListItem() {                            // List的子组件只能是ListItem
3.     Text('Text1')
4.       .size({width: '100%', height: 60})
5.       .fontSize(26)
6.       .backgroundColor('#aabbcc')
7.   }
8.   .width('100%')
10.   ListItem() {                            // List的子组件只能是ListItem
11.     Text('Text2')
12.       .size({width: '100%', height: 60})
13.       .fontSize(26)
14.       .backgroundColor('#aabbcc')
15.   }
16.   .width('100%')
18.   ListItem() {                            // List的子组件只能是ListItem
19.     Text('Text3')
20.       .size({width: '100%', height: 60})
21.       .fontSize(26)
22.       .backgroundColor('#aabbcc')
23.   }
24.   .width('100%')
26.   ListItem() {                            // List的子组件只能是ListItem
27.     Text('Text4')
28.       .size({width: '100%', height: 60})
29.       .fontSize(26)
30.       .backgroundColor('#aabbcc')
31.   }
32.   .width('100%')
34.   ListItem() {                            // List的子组件只能是ListItem
35.     Text('Text5')
36.       .size({width: '100%', height: 60})
37.       .fontSize(26)
38.       .backgroundColor('#aabbcc')
39.   }
40.   .width('100%')
41. }
42. .width('100%')
43. .height(200)
44. .padding(10)
45. .backgroundColor(Color.Pink)

复制代码

List属性先容

1. declare class ListAttribute<T> extends CommonMethod<T> {
2.   listDirection(value: Axis): T;
3.   scrollBar(value: BarState): T;
4.   edgeEffect(value: EdgeEffect): T;
5.   divider(value: {
6.     strokeWidth: number | string | Resource, color?: Color | number | string | Resource,
7.     startMargin?: number | string | Resource, endMargin?: number | string | Resource
8.   } | null): T;
9.   editMode(value: boolean): T;
10.   cachedCount(value: number): T;
11.   chainAnimation(value: boolean): T;
12. }

复制代码

• listDirection：设置子组件的分列方向， Axis 界说了以下 2 种分列方向：
  
  
  
  • Vertical（默认值）：设置子组件竖直方向分列
    
  • Horizontal：设置子组件水平方向分列
    
  
  
• edgeEffect：设置 List 滑动到边沿时的滑动结果， EdgeEffect 界说了以下 2 种滑动结果：
  
  
  
  • Spring（默认值）：弹性物理动效，滑动到边沿后可以根据初始速率或通过触摸事故继续滑动一段隔断，放手后回弹。
    
  • None：没有滑动结果。
    
  
  
• divider：设置分割线样式，默认无分割线，分割线样式分析如下：
  
  
  
  • strokeWidth：分割线的宽度
    
  • color：分割线的颜色
    
  • startMargin：分割线隔断列表侧边起始端的隔断。
    
  • endMargin：分割线隔断列表侧边竣事端的隔断。
    
  
  

简单样比方下所示：

1.     // private items: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
2.     List() {// List默认竖直方向排列子组件
3.       ForEach(this.items, (item: any, index?: number) => {
4.         ListItem() {
5.           Text('Text: ' + item)
6.             .fontSize(20)
7.             .height(40)
8.             .backgroundColor("#aabbcc")
9.             .width('100%')
10.         }
11.       })
12.     }
13.     .height(120)
14.     .width('100%')
15.     .divider({
16.       strokeWidth: 4,   // 设置分割线宽度
17.       color: Color.Pink // 设置分割线颜色
18.     })

复制代码

• editMode：设置 List 是否可编辑，默认不可编辑。
  
• chainAnimation：时间开启联动结果，默认不开启。
  
• scrollBar：设置滚动条状态，功能同 Scroll 。
  
• cachedCount：设置 List 的缓存数量。
  

List事故先容

1. declare class ListAttribute<T> extends CommonMethod<T> {
2.   onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void): T;
3.   onScrollIndex(event: (start: number, end: number) => void): T;
4.   onReachStart(event: () => void): T;
5.   onReachEnd(event: () => void): T;
6.   onScrollStop(event: () => void): T;
7.   onItemDelete(event: (index: number) => boolean): T;
8.   onItemMove(event: (from: number, to: number) => boolean): T;
9. }

复制代码

• onItemDelete：列表项被删除时触发该回调。
  
• onScrollIndex：当前线表体现的起始位置和制止位置发生厘革时触发该回调。
  
• onReachStart：滚动到顶部触发该回调。
  
• onReachEnd：滚动到底部触发该回调。
  

ListItem界说先容

ListItem 用来展示 List 的详细 item，它的宽度默认布满 List 的宽度，它必须共同 List 利用才有结果，界说如下：

1. interface ListItemInterface {
2.   (value?: string): ListItemAttribute;
3. }

复制代码

• value：标记位，标记当前 item 的 flag。
  

ListItem属性先容

1. declare class ListItemAttribute<T> extends CommonMethod<T> {
2.   sticky(value: Sticky): T;
3.   editable(value: boolean | EditMode): T;
4. }

复制代码

• sticky：设置 ListItem 的吸顶结果， Sticky 提供了以下 2 种范例：
  
  
  
  • None（默认值）：没有吸顶结果。
    
  • Normal：设置当前 item 有吸顶结果。
    
  
  
• editable：是否可以编辑，进入编辑模式后可以删除 item ，默以为 false。
  

简单样比方下所示：

1. List({space: 10}) {
2.   ListItem() {
3.     Text('Text1')
4.       .size({width: '100%', height: 60})
5.       .fontSize(26)
6.       .backgroundColor('#aabbcc')
7.   }
8.   .sticky(Sticky.Normal)// 设置吸顶效果
9.   .width('100%')
11.   ListItem() {
12.     Text('Text2')
13.       .size({width: '100%', height: 60})
14.       .fontSize(26)
15.       .backgroundColor('#aabbcc')
16.   }
17.   .width('100%')
19.   ListItem() {
20.     Text('Text3')
21.       .size({width: '100%', height: 60})
22.       .fontSize(26)
23.       .backgroundColor('#aabbcc')
24.   }
25.   .width('100%')
27.   ListItem() {
28.     Text('Text4')
29.       .size({width: '100%', height: 60})
30.       .fontSize(26)
31.       .backgroundColor('#aabbcc')
32.   }
33.   .width('100%')
35.   ListItem() {
36.     Text('Text5')
37.       .size({width: '100%', height: 60})
38.       .fontSize(26)
39.       .backgroundColor('#aabbcc')
40.   }
41.   .width('100%')
42. }
43. .width('100%')
44. .height(200)
45. .padding(10)
46. .backgroundColor(Color.Pink)

复制代码

完备样例

List 联合 ListItem 完备样比方下所示：

1. @Entry @Component struct ComponentTest {
3.   private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
4.   @State editFlag: boolean = false
6.   build() {
7.     Column() {
8.       List({ space: 20, initialIndex: 0 }) {
9.         ListItem() {
10.           Text('sticky:Normal , click me edit list')
11.             .width('100%')
12.             .height(60)
13.             .fontSize(14)
14.             .textAlign(TextAlign.Center)
15.             .backgroundColor(Color.Pink)
16.             .onClick(() => {
17.               this.editFlag = !this.editFlag
18.             })
19.         }.sticky(Sticky.Normal)
21.         ForEach(this.arr, (item, index) => {
22.           ListItem() {
23.             Text('' + item)
24.               .width('100%')
25.               .height(100)
26.               .fontSize(16)
27.               .textAlign(TextAlign.Center)
28.               .borderRadius(10)
29.               .backgroundColor('#bbccaa')
30.           }
31.           .editable(this.editFlag)
32.           .sticky(0 == index ? Sticky.Opacity : Sticky.None)
33.         }, item => item)
34.       }
35.       .editMode(true)
36.       .onItemDelete((index: number) => {
37.         this.arr.splice(index - 1, 1)
38.         this.editFlag = false
39.         return true
40.       }).width('90%')
41.     }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
42.   }
44.   private aboutToAppear() {
45.     for(var i: number = 0; i < 20; i++) {
46.       this.arr[i] = i;
47.     }
48.   }
49. }

复制代码

码牛讲堂也为了积极作育鸿蒙生态人才，让各人都能学习到鸿蒙开辟最新的技能，针对一些在职职员、0底子小白、应届生/盘算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开辟技能的学习门路。各人可以举行参考学习：https://qr21.cn/FV7h05

   ①全方位，更公道的学习路径：
门路图包罗ArkTS底子语法、鸿蒙应用APP开辟、鸿蒙本领集APP开辟、次开辟多端摆设开辟、物联网开辟等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入明白鸿蒙开辟原理！
  ②多条理，更多的鸿蒙原生应用：
门路图将包罗完全基于鸿蒙内核开辟的应用，好比一次开辟多端摆设、自由流转、元服务、端云一体化等，多方位的学习内容让门生可以大概高效把握鸿蒙开辟，少走弯路，真正明白并应用鸿蒙的核心技能和理念。
  ③实战化，更贴合企业需求的技能点：
学习门路图中的每一个技能点都可以大概紧贴企业需求，颠末多次真实实践，每一个知识点、每一个项目，都是码牛讲堂鸿蒙研发团队经心打磨和深度分析的结果，留意对门生的过细讲授，每一步都确保门生可以大概真正明白和把握。
  为了能让各人更好的学习鸿蒙（HarmonyOS NEXT）开辟技能，这边特意整理了《鸿蒙开辟学习手册》（共计890页），盼望对各人有所资助：https://qr21.cn/FV7h05
《鸿蒙开辟学习手册》：https://qr21.cn/FV7h05

怎样快速入门：

• 根本概念
  
• 构建第一个ArkTS应用
  
• ……
  

开辟底子知识：https://qr21.cn/FV7h05

• 应用底子知识
  
• 设置文件
  
• 应用数据管理
  
• 应用安全管理
  
• 应用隐私掩护
  
• 三方应用调用管控机制
  
• 资源分类与访问
  
• 学习ArkTS语言
  
• ……
  

基于ArkTS 开辟：https://qr21.cn/FV7h05

• Ability开辟
  
• UI开辟
  
• 公共事故与关照
  
• 窗口管理
  
• 媒体
  
• 安全
  
• 网络与链接
  
• 电话服务
  
• 数据管理
  
• 配景使命(Background Task)管理
  
• 装备管理
  
• 装备利用信息统计
  
• DFX
  
• 国际化开辟
  
• 折叠屏系列
  
• ……
  

鸿蒙开辟口试真题（含参考答案）：https://qr21.cn/FV7h05

大厂鸿蒙口试题：：https://qr18.cn/F781PH

鸿蒙开辟口试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开辟必备口试题
2.性能优化方向
3.架构方向
4.鸿蒙开辟体系底层方向
5.鸿蒙音视频开辟方向
6.鸿蒙车载开辟方向
7.鸿蒙南向开辟方向

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金