HarmonyOS鸿蒙Next中使用瀑布流 HdsNavigation的动态模糊不生效是什么原因？

开发者您好，您需要去掉WaterFlow组件设置的高度.height(“100%”)或者设置高度为.height(“auto”)，然后外层Scroll()组件设置宽度.height(“100%”)或者不设置高度即可。在此场景下WaterFlow设置高度会使HdsNavigation无法正确感知滚动行为，所以无法实现动态模糊效果。

示例代码如下：

import { HdsNavigation, HdsNavigationAttribute, ScrollEffectType } from '@kit.UIDesignKit';
import { LengthMetrics } from '@kit.ArkUI';
import { WaterFlowDataSource } from './WaterFlowDataSource';

enum FooterState {
  Loading = 0,
  End = 1
}

@Entry
@Component
export struct Index {
  @State minSize: number = 80;
  @State maxSize: number = 180;
  @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F];
  @State footerState: FooterState = FooterState.Loading;
  scroller: Scroller = new Scroller();
  dataSource: WaterFlowDataSource = new WaterFlowDataSource();
  private itemWidthArray: number[] = [];
  private itemHeightArray: number[] = [];

  // 计算FlowItem宽/高
  getSize() {
    let ret = Math.floor(Math.random() * this.maxSize);
    return (ret > this.minSize ? ret : this.minSize);
  }

  // 设置FlowItem的宽/高数组
  setItemSizeArray() {
    for (let i = 0; i < 100; i++) {
      this.itemWidthArray.push(this.getSize());
      this.itemHeightArray.push(this.getSize());
    }
  }

  // 组件生命周期：在组件即将出现时初始化尺寸数组
  aboutToAppear() {
    this.setItemSizeArray();
  }

  @Builder
  itemFoot() {
    // 注意：不要直接用IfElse节点作为footer的根节点
    // 必须在外面使用(Column/Row/Stack等)容器包裹，确保布局正确
    Column() {
      if (this.footerState == FooterState.Loading) {
        Text(`加载中...`)
          .fontSize(10)
          .backgroundColor(Color.Red)
          .width(50)
          .height(50)
          .align(Alignment.Center)
          .margin({ top: 2 })
      } else if (this.footerState == FooterState.End) {
        Text(`到底啦...`)
          .fontSize(10)
          .backgroundColor(Color.Red)
          .width(50)
          .height(50)
          .align(Alignment.Center)
          .margin({ top: 2 })
      } else {
        Text(`Footer`)
          .fontSize(10)
          .backgroundColor(Color.Red)
          .width(50)
          .height(50)
          .align(Alignment.Center)
          .margin({ top: 2 })
      }
    }
  }

  build() {
    HdsNavigation() { // 创建HdsNavigation组件
      // HdsNavigation组件内容区
      Scroll() {
        Column({ space: 2 }) {
          WaterFlow({ footer: this.itemFoot() }) {
            LazyForEach(this.dataSource, (item: number) => {
              FlowItem() {
                Column() {
                  Text('N' + item).fontSize(12).height('16')
                  // 注意：需要确保对应的jpg文件存在才会正常显示
                  Image('res/waterFlowTest(' + item % 5 + ').jpg')
                    .objectFit(ImageFit.Fill)
                    .width('100%')
                    .layoutWeight(1)
                }
              }
              .height('100%')
              .height(this.itemHeightArray[item % 100])
              .backgroundColor(this.colors[item % this.colors.length])
            }, (item: string) => item)
          }
          .columnsTemplate('1fr 1fr') // 设置2列等宽布局
          .columnsGap(10)
          .rowsGap(5)
          .backgroundColor(0xFAEEE0)
          .width('100%')
          // 触底加载数据：滚动到底部时触发分页加载
          .onReachEnd(() => {
            console.info('onReachEnd')

            // 模拟分页加载：当数据超过200条时停止加载
            if (this.dataSource.totalCount() > 200) {
              this.footerState = FooterState.End;
              return;
            }
            setTimeout(() => {
              for (let i = 0; i < 100; i++) {
                this.dataSource.addLastItem();
              }
            }, 1000)
          })
          .onReachStart(() => {
            // 滚动到顶部时触发
            console.info('waterFlow reach start');
          })
          .onScrollStart(() => {
            // 开始滚动时触发
            console.info('waterFlow scroll start');
          })
          .onScrollStop(() => {
            // 停止滚动时触发
            console.info('waterFlow scroll stop');
          })
          .onScrollFrameBegin((offset: number, state: ScrollState) => {
            // 滚动帧开始时触发：可以控制滚动行为
            // offset：滚动偏移量，state：滚动状态
            console.info('waterFlow scrollFrameBegin offset: ' + offset + ' state: ' + state.toString());
            return { offsetRemain: offset }; // 返回开发者期望的实际滚动偏移量
          })
        }
      }.height("100%")

    }.titleBar({
      style: {
        // 设置导航组件标题栏样式
        // 标题栏动态模糊样式，包括是否使能滚动动态模糊，动态模糊类型，动态模糊生效的滚动距离等
        scrollEffectOpts: {
          enableScrollEffect: true,
          scrollEffectType: ScrollEffectType.COMMON_BLUR,
          blurEffectiveStartOffset: LengthMetrics.vp(0),
          blurEffectiveEndOffset: LengthMetrics.vp(20)
        },
        originalStyle: {
          // 内容区滚动前初始样式设置
          backgroundStyle: {
            // 标题栏背板样式设置
            backgroundColor: $r('sys.color.ohos_id_color_background'),
          },
          contentStyle: {
            // 标题栏内容区样式设置，包括标题区域，菜单区域，返回按钮区域
            titleStyle: {
              mainTitleColor: $r('sys.color.font_primary'),
              subTitleColor: $r('sys.color.font_secondary')
            },
            menuStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            },
            backIconStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            }
          }
        },
        scrollEffectStyle: {
          // 内容区滚动超过blurEffectiveEndOffset后样式设置
          backgroundStyle: {
            backgroundColor: $r('sys.color.ohos_id_color_background_transparent'),
          },
          contentStyle: {
            titleStyle: {
              mainTitleColor: $r('sys.color.font_primary'),
              subTitleColor: $r('sys.color.font_secondary')
            },
            menuStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            },
            backIconStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            }
          }
        }
      },
      content: {
        // 标题栏内容设置
        title: { mainTitle: 'Main', subTitle: 'Sub' },
      }
    })
  }
}