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

// Index.ets
import { audio } from '@kit.AudioKit';
@Entry
@Component
struct Index {
@State arr: Array<number> = [ 0,1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@State refreshing: boolean = false;
@State refreshOffset: number = 0;
@State refreshState: RefreshStatus = RefreshStatus.Inactive;
@State canLoad: boolean = false;
@State isLoading: boolean = false;
@State num: number =700;
@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
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)
        <span class="hljs-comment">// GridItem(){</span>
        <span class="hljs-comment">// this.footer()</span>
        <span class="hljs-comment">// }</span>

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

    }.height(<span class="hljs-number">700</span>)
  }<span class="hljs-keyword">else</span> {
    Column(){
      Grid() {
        ForEach(<span class="hljs-keyword">this</span>.arr, (item: number) =&gt; {
          GridItem() {
            Text(<span class="hljs-string">''</span> + item)
              .width(<span class="hljs-string">'100%'</span>)
              .height(<span class="hljs-number">80</span>)
              .fontSize(<span class="hljs-number">16</span>)
              .textAlign(TextAlign.Center)
              .backgroundColor(<span class="hljs-number">0xFFFFFF</span>)
          }
        }, (item: string) =&gt; item)

        <span class="hljs-comment">// GridItem(){</span>
        <span class="hljs-comment">// this.footer()</span>
        <span class="hljs-comment">// }</span>

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

    }.height(<span class="hljs-string">'100%'</span>)
  }

  <span class="hljs-keyword">this</span>.footer();
}
.width(<span class="hljs-string">'100%'</span>)
.height(<span class="hljs-string">'100%'</span>)
.backgroundColor(<span class="hljs-number">0xDCDCDC</span>)
.onOffsetChange((offset: number) =&gt; {
  <span class="hljs-keyword">this</span>.refreshOffset = offset;
})
.onStateChange((state: RefreshStatus) =&gt; {
  <span class="hljs-keyword">this</span>.refreshState = state;
})
.onRefreshing(() =&gt; {
  <span class="hljs-comment">// simulate refresh the data</span>
  setTimeout(() =&gt; {
    <span class="hljs-keyword">this</span>.refreshing = <span class="hljs-literal">false</span>;
  }, <span class="hljs-number">2000</span>)
})
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>