HarmonyOS 鸿蒙Next Grid列表使用Refresh加载更多时footer未能展示在底部

写了一个demo，当footer放到grid里面，如果数组是奇数个，就会只占一半，是否考虑拿出来，这样可以展示在底部，参考demo：

// Index.ets
import { audio } from '[@kit](/user/kit).AudioKit';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 [@State](/user/State) arr: Array<number> = [ 0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 [@State](/user/State) refreshing: boolean = false;
 [@State](/user/State) refreshOffset: number = 0;
 [@State](/user/State) refreshState: RefreshStatus = RefreshStatus.Inactive;
 [@State](/user/State) canLoad: boolean = false;
 [@State](/user/State) isLoading: boolean = false;
 [@State](/user/State) num: number =700;

 [@Builder](/user/Builder)
 refreshBuilder() {
   Stack({ alignContent: Alignment.Bottom }) {
     // can use the refresh state to decide whether the progress component is exist or not.
     // in this case, the component is not exist otherwise in the pull down or refresh state
     if (this.refreshState != RefreshStatus.Inactive && this.refreshState != RefreshStatus.Done) {
       Progress({ value: this.refreshOffset, total: 64, type: ProgressType.Ring })
         .width(32).height(32)
         .style({ status: this.refreshing ? ProgressStatus.LOADING : ProgressStatus.PROGRESSING })
         .margin(10)
     }
   }.height("100%").width("100%")
 }

 [@Builder](/user/Builder)
 footer() {
   Row() {
     LoadingProgress().height(32).width(48)
     Text("加载中1")
   }.width("100%")
   .height(64)
   .justifyContent(FlexAlign.Center)
   // hidden this component when don't need to load
   .visibility(this.isLoading ? Visibility.Visible : Visibility.Hidden)
   .position({bottom:3})

 }

 build() {
   Refresh({ refreshing: $$this.refreshing, builder: this.refreshBuilder() }) {
     if (this.isLoading){
       Column(){
         Grid() {
           ForEach(this.arr, (item: number) => {
             GridItem() {
               Text('' + item)
                 .width('100%')
                 .height(80)
                 .fontSize(16)
                 .textAlign(TextAlign.Center)
                 .backgroundColor(0xFFFFFF)
             }
           }, (item: string) => item)

           // GridItem(){
           // this.footer()
           // }

         }
         // .height(this.num)
         .columnsTemplate('1fr 1fr')
         .onScrollIndex((start: number, end: number) => {
           // when reach the end of list, trigger data load
           if (this.canLoad && end >= this.arr.length - 1) {
             this.canLoad = false;
             this.isLoading = true;
             // simulate trigger data load
             setTimeout(() => {
               for (let i = 0; i < 10; i++) {
                 this.arr.push(this.arr.length);
                 this.isLoading = false;
               }
             }, 700)
           }
         })
         .onScrollFrameBegin((offset: number, state: ScrollState) => {
           // loading can be triggered only when swipe up
           if (offset > 5 && !this.isLoading) {
             this.canLoad = true;
           }
           return { offsetRemain: offset };
         })
         .scrollBar(BarState.Off)
         // open the spring back of edge
         .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })

       }.height(700)
     }else {
       Column(){
         Grid() {
           ForEach(this.arr, (item: number) => {
             GridItem() {
               Text('' + item)
                 .width('100%')
                 .height(80)
                 .fontSize(16)
                 .textAlign(TextAlign.Center)
                 .backgroundColor(0xFFFFFF)
             }
           }, (item: string) => item)

           // GridItem(){
           // this.footer()
           // }

         }
         // .height(this.num)
         .columnsTemplate('1fr 1fr')
         .onScrollIndex((start: number, end: number) => {
           // when reach the end of list, trigger data load
           if (this.canLoad && end >= this.arr.length - 1) {
             this.canLoad = false;
             this.isLoading = true;
             // simulate trigger data load
             setTimeout(() => {
               for (let i = 0; i < 10; i++) {
                 this.arr.push(this.arr.length);
                 this.isLoading = false;
               }
             }, 700)
           }
         })
         .onScrollFrameBegin((offset: number, state: ScrollState) => {
           // loading can be triggered only when swipe up
           if (offset > 5 && !this.isLoading) {
             this.canLoad = true;
           }
           return { offsetRemain: offset };
         })
         .scrollBar(BarState.Off)
         // open the spring back of edge
         .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })

       }.height('100%')
     }

     this.footer();
   }
   .width('100%')
   .height('100%')
   .backgroundColor(0xDCDCDC)
   .onOffsetChange((offset: number) => {
     this.refreshOffset = offset;
   })
   .onStateChange((state: RefreshStatus) => {
     this.refreshState = state;
   })
   .onRefreshing(() => {
     // simulate refresh the data
     setTimeout(() => {
       this.refreshing = false;
     }, 2000)
   })
 }
}