HarmonyOS 底部遮挡的问题处理

参考示例如下：

// HomePage.ets:
import { HomeItem } from '@ohos/utils/src/main/ets/model/GetHomesModel';
import Logger from '@ohos/utils/src/main/ets/utils/Logger';
import DbDevTbApi from '@ohos/rdb/src/main/ets/tables/DbDevTbApi';
import { DeviceModel } from '@ohos/utils/src/main/ets/model/DevModel';
import { CardPage } from './CardPage';
import { PluginUtils } from 'plugin';
import { CommonConstants, LazyDataSource } from '@ohos/utils';
import { PreferenceManager } from '@ohos/datastore';

const TAG = '[HomePage]'

// @Preview
@Component
export struct HomePage {
  scroller: Scroller = new Scroller()
  @State Position: number = 0 //0代表滚动到grid顶部，1代表中间值，2代表滚动到grid底部。
  @Link @Watch('handleHomeItem') selectHome: HomeItem
  @State deviceModelArray: LazyDataSource<DeviceModel> = new LazyDataSource();
  pluginUtils = new PluginUtils(getContext(this));

  aboutToAppear(): void {
    this.pluginUtils.initPublicResource();
    this.handleHomeItem()
  }

  private async handleHomeItem(): Promise<void> {
    const res = await DbDevTbApi.queryById(this.selectHome.id)
    if (res) {
      Logger.info(TAG, 'selectHome handleHomeItem res=' + res.length);
      this.deviceModelArray.clear()
      this.deviceModelArray.pushArrayData(res)
    }

  }

  build() {
    // Flex({direction:FlexDirection.Column}){
    Column({ space: 5 }) {
      // Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Grid(this.scroller) {
        LazyForEach(this.deviceModelArray, (deviceModel: DeviceModel) => {
          GridItem() {
            CardPage({ deviceModel })
          }
          .height(100)
        }, (deviceModel: DeviceModel) => deviceModel.mac + '@' + deviceModel.pmac)
      }
      .layoutWeight(1)
      .columnsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .friction(0.6)
      .enableScrollInteraction(true)
      .supportAnimation(false)
      .multiSelectable(false)
      .edgeEffect(EdgeEffect.Spring)
      .scrollBar(BarState.On)
      .scrollBarColor(Color.Grey)
      .scrollBarWidth(4)
      .width('100%')
      .backgroundColor(Color.Transparent)
      .margin({ bottom: 11 })
      .onScrollIndex((first: number, last: number) => {
        console.info(first.toString())
        console.info(last.toString())
      })
      .onScrollBarUpdate((index: number, offset: number) => {
        console.info("XXX" + 'Grid onScrollBarUpdate,index : ' + index.toString() + ",offset" + offset.toString())
        return { totalOffset: (index / 5) * (80 + 10) - offset, totalLength: 80 * 5 + 10 * 4 }
      }) //只适用于当前示例代码数据源，如果数据源有变化，则需要修改该部分代码，或者删掉此属性
      .onScroll((scrollOffset: number, scrollState: ScrollState) => {
        console.info(scrollOffset.toString())
        console.info(scrollState.toString())
      })
      .onScrollStart(() => {
        console.info("XXX" + "Grid onScrollStart")
      })
      .onScrollStop(() => {
        console.info("XXX" + "Grid onScrollStop")
      })
      .onReachStart(() => {
        this.Position = 0
        console.info("XXX" + "Grid onReachStart")
      })
      .onReachEnd(() => {
        this.Position = 2
        console.info("XXX" + "Grid onReachEnd")
      })

      Button('next page')
        .onClick(() => { // 点击后滑到下一页
          // this.scroller.scrollPage({ next: true })
        })
    }.width('100%')
    .margin({ top: 5 })
  }
}