HarmonyOS 鸿蒙Next 我button 按钮 浮在最上层，导致了我下面的刷新组件功能不生效

HarmonyOS 鸿蒙Next 我button 按钮 浮在最上层，导致了我下面的刷新组件功能不生效

基本信息

import { router } from "@kit.ArkUI";

// 定义数据结构
interface TimeAxisData {
  yearMonth: string; // 年月 格式：YYYY-MM
  days: DayItem[];
}

interface DayItem {
  date: string; // 日期
  week: string; // 星期
  tags: string[]; // 标签
  amount: number; // 金额
  shop: string; // 商家
}

@Component
export struct TimeAxis {
  private timeAxisData: TimeAxisData[] = [
    {
      yearMonth: "2025-01",
      days: [
        {
          date: "13",
          week: "一",
          tags: ["#餐饮"],
          amount: 128,
          shop: "星巴克"
        },
        {
          date: "15",
          week: "三",
          tags: ["#交通"],
          amount: 8,
          shop: "公交卡充值"
        }
      ]
    },
  ];
  @State refreshing: boolean = false;
  @State refreshOffset: number = 0;
  @State refreshState: RefreshStatus = RefreshStatus.Inactive;
  @State isLoading: boolean = false;
  @State canLoad: boolean = false;
  @State searchName: string = '';

  @Builder
  search() {
    Row() {
      Row() {
        TextInput({ placeholder: '请根据关键字进行检索...' })
          .enterKeyType(EnterKeyType.Search)
          .width('100%')
          .height(40)
          .margin({ bottom: 10 })
          .onChange((value: string) => {
            this.searchName = value; // 更新搜索关键字
          });
      }
      .padding(10)
      .backgroundColor('#FFFFFF')
      .borderRadius(8)
      .shadow({
        radius: 4,
        color: "#10000000",
        offsetX: 2,
        offsetY: 2
      })
    }
  }

  @Builder
  refreshBuilder() {
    Stack({ alignContent: Alignment.Bottom }) {
      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(20)
      }
      Text('刷新中').padding({ top: 10 })
    }
    .clip(true)
    .height("100%")
    .width("100%")
  }

  /**
   * 底部
   */
  @Builder
  footer() {
    Row() {
      LoadingProgress().height(32).width(48)
      Text("加载中")
    }.width("100%")
    .height(64)
    .justifyContent(FlexAlign.Center)
    // 当不处于加载中状态时隐藏组件
    .visibility(this.isLoading ? Visibility.Visible : Visibility.Hidden)
  }

  /**
   * 添加
   */
  @Builder
  add() {
    Button('+', { type: ButtonType.Circle, stateEffect: true })
      .backgroundColor(0x317aff)
      .width(56)
      .height(56)
      .hitTestBehavior(HitTestMode.Transparent)
      .position({ x: '75%', y: '85%' })// 精确定位到右下角
      .margin({ right: 16, bottom: 16 })
      .onClick(() => {
        router.pushUrl({ url: 'pages/timeAxis/module/Add' })
      })
  }

  /**
   * 下拉刷新列表
   */
  @Builder
  refresh() {
    Refresh({ refreshing: $$this.refreshing, builder: this.refreshBuilder() }) {
      List({ space: 20 }) {
        ForEach(this.timeAxisData, (group: TimeAxisData) => {
          // 年月分组
          ListItem() {
            Column() {
              // 年月标题
              Text(group.yearMonth)
                .fontSize(20)
                .fontColor("#333")
                .textAlign(TextAlign.Start)
                .margin({ bottom: 12 })

              // 日期列表
              ForEach(group.days, (day: DayItem) => {
                Column() {
                  // 日期行
                  Row() {
                    // 左侧日期区块
                    Column() {
                      Text(day.date)
                        .fontSize(24)
                        .fontColor("#317AFF")
                      Text(day.week)
                        .fontSize(14)
                        .fontColor("#666")
                    }
                    .width("25%")

                    // 右侧内容区块
                    Column() {
                      // 金额和商家
                      Row() {
                        Text(`¥${day.amount.toFixed(2)}`)
                          .fontSize(18)
                          .fontColor("#317AFF")
                        Text(day.shop)
                          .fontSize(16)
                          .fontColor("#333")
                          .margin({ left: 16 })
                      }
                      .justifyContent(FlexAlign.SpaceBetween)

                      // 标签区域
                      Flex({ wrap: FlexWrap.Wrap }) {
                        ForEach(day.tags, (tag: string) => {
                          Text(tag)
                            .fontSize(12)
                            .fontColor("#317AFF")
                            .backgroundColor("#E8F1FF")
                            .borderRadius(12)
                            .padding({
                              left: 8,
                              right: 8,
                              top: 4,
                              bottom: 4
                            })
                            .margin({ right: 8, bottom: 4 })
                        })
                      }
                      .margin({ top: 8 })
                    }
                    .width("75%")
                  }
                  .padding(12)
                  .backgroundColor("#FFFFFF")
                  .borderRadius(8)
                  .shadow({
                    radius: 4,
                    color: "#10000000",
                    offsetX: 2,
                    offsetY: 2
                  })
                }
                .margin({ bottom: 12 })
              })
            }
            .zIndex(10)
            .width("100%")
            .padding(16)
            .backgroundColor("#F5F5F5")
          }
          .onClick(() => {
            let params: string = '111111';
            router.pushUrl({ url: 'pages/timeAxis/module/Details', params: params })
          })
        }, (group: TimeAxisData) => group.yearMonth)
        ListItem() {
          this.footer();
        }
      }
      .width("100%")
      .height("100%")
      .onScrollIndex((start: number, end: number) => {
        if (this.canLoad && end >= this.timeAxisData.length - 1) {
          this.canLoad = false;
          this.isLoading = true;

          setTimeout(() => {
            // 创建新数组
            const newGroups: TimeAxisData[] = [];
            newGroups.push({
              yearMonth: `2025-${this.timeAxisData.length}`, // 保证唯一性
              days: [
                {
                  date: "19",
                  week: "一",
                  tags: ["#通讯"],
                  amount: 98,
                  shop: "话费充值"
                }
              ]
            });

            // 使用concat创建新数组引用
            this.timeAxisData = this.timeAxisData.concat(newGroups);
            this.isLoading = false;
            this.canLoad = true; // 重置加载开关
          }, 700);

        }
      })
      .onScrollFrameBegin((offset: number, state: ScrollState) => {
        // 只有当向上滑动时触发新数据加载
        if (offset > 5 && !this.isLoading) {
          this.canLoad = true;
        }
        return { offsetRemain: offset };
      })
      .scrollBar(BarState.Off)
      // 开启边缘滑动效果
      .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
    }
    .margin({ top: 10 })
    .backgroundColor(0xeeeeee)
    .onOffsetChange((offset: number) => {
      this.refreshOffset = offset;
    })
    .onStateChange((state: RefreshStatus) => {
      this.refreshState = state;
    })
    .onRefreshing(() => {
      // 模拟数据刷新
      setTimeout(() => {
        this.refreshing = false;
      }, 2000)
    })
  }

  build() {
    // 使用Stack作为唯一根组件
    Stack() {
      // 主内容层
      Column() {
        this.search();
        this.refresh();
      }
      .width('100%')
      .height('100%')

      // 悬浮按钮（直接使用Stack布局定位）
      Stack({ alignContent: Alignment.BottomEnd }) {
        this.add()
      }
      .width('100%')
      .height('100%')
      .zIndex(999)
    }
  }
}