组件实现未占满时自定义footer贴底显示

List() 
  .onAreaChange() 
Scroller() 
  .getItemRect()
1.
2.
3.
4.

@Entry 
@Component 
struct RefreshExample { 
  // 刷新组件刷新状态 
  @State isRefreshing: boolean = false 
  // 数据源 
  @State arr: String[] =['600','121221'] 
  // List父组件高度，在父组件onAreaChange时刷新 
  @State parentHeight:number = 0 
  // List组件中最后一个元素的y坐标（footer自定义组件） 
  @State endPointY:number = 0 
  // List组件中最后一个元素的默认高度（footer自定义组件） 
  @State endHeight:number = 100 
  // List组件绑定Scroller控制器 
  scroller:Scroller = new Scroller() 
  build() { 
    Column() { 
      Refresh({ refreshing: $$this.isRefreshing}) { 
        List({scroller:this.scroller}) { 
          // 自定义ListItem作为Header 
          ListItem() { 
            Text('我是header') 
              .width('100%').height('100%').fontSize(16) 
              .textAlign(TextAlign.Center).backgroundColor(Color.White) 
          }.height(200).onClick(()=>{ 
            this.arr.push('' + this.arr.length + 1) 
          }) 
          // 加载数据源 
          ForEach(this.arr, (item: string) => { 
            ListItem() { 
              Text('' + item) 
                .width('100%').height(100).fontSize(16) 
                .textAlign(TextAlign.Center).backgroundColor(Color.White) 
            } 
          }, (item: string) => item) 
          // 自定义ListItem作为Footer，未占满List时贴底自定义组件 
          ListItem() { 
            Column(){ 
              Text('我是footer') 
                .width('100%').height(100).fontSize(16) 
                .textAlign(TextAlign.Center).backgroundColor(Color.White) 
            }.justifyContent(FlexAlign.End).height('100%') 
            }.height(this.endHeight) 
            .constraintSize({minHeight:100}) 
            .backgroundColor(Color.White) 
          .onAreaChange((oldValue: Area, newValue: Area)=>{ 
            console.log('footer item onAreaChange' ) 
          }) 
        } 
        // 当滑动到顶部时，获取最后一个ListItem（footer）的y坐标，结合parentHeight高度计算预期高度 
        .onReachStart(()=>{ 
          this.endPointY = px2vp(this.scroller.getItemRect(this.arr.length).y) 
          if(this.endPointY == 0) this.endPointY = this.parentHeight 
          if((this.endPointY + 100) < this.parentHeight) { 
            this.endHeight = this.parentHeight - this.endPointY - 100 
          } 
          console.log('list onReachStart' +  this.endPointY ) 
        }) 
        .backgroundColor(Color.Black) 
        .height('100%') 
        .onScrollIndex((first: number) => { 
          console.info(first.toString()) 
        }) 
        .width('100%') 
        .height('100%') 
        .divider({strokeWidth:0.5,color:Color.Gray}) 
        .scrollBar(BarState.Off) 
      } 
      .onStateChange((refreshStatus: RefreshStatus) => { 
      }) 
      .onRefreshing(() => { 
        setTimeout(() => { 
          this.isRefreshing = false 
        }, 2000) 
      }) 
      .backgroundColor(0x89CFF0) 
      // 在List父组件Area变化时，获取parentHeight高度 
      .onAreaChange( (oldValue: Area, newValue: Area) =>{ 
        this.parentHeight = Number(newValue.height) 
        if(this.endPointY == 0) this.endPointY = this.parentHeight 
        if((this.endPointY + 100) < this.parentHeight) { 
          this.endHeight = this.parentHeight - this.endPointY - 100 
        } 
        console.log('parent onAreaChange ' + newValue.height.toString()) 
      }) 
    } 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.