HarmonyOS 鸿蒙Next Scroll显示问题

HarmonyOS 鸿蒙Next Scroll显示问题

Stack({ alignContent: Alignment.Top }) {
  Scroll() {
    Image($r('app.media.ic_beautiful_number_detail_bg_one'))
      .width(Const.ONE_HUNDRED_PERCENT)
      .objectFit(ImageFit.Contain)
  }
  .align(Alignment.TopStart)
  .scrollBar(BarState.Off)
  .scrollable(ScrollDirection.Vertical)
  .layoutWeight(1)

  MyTitleBar({
    backIcon: $r('app.media.ic_white_back'),
    backClick: () => {
      this.onBackPress()
    }
  })
    .backgroundColor(Color.Transparent)
}
.width(Const.ONE_HUNDRED_PERCENT)
.height(Const.ONE_HUNDRED_PERCENT)

更多关于HarmonyOS 鸿蒙Next Scroll显示问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

开发者您好，如果您想实现全屏沉浸式，可参考窗口沉浸式-实现沉浸式效果中的方案四，调用窗口强制全屏布局接口setWindowLayoutFullScreen()设置窗口为沉浸式布局。参考如下demo：

// Index.ets
import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  aboutToAppear(): void {
    window.getLastWindow(this.getUIContext().getHostContext(), (error, win) => {
      if (error.code) {
        console.error(`Cause: ${error.code} ${error.name} ${error.message}`);
        return;
      }
      win.setWindowLayoutFullScreen(true);
    });
  }

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Scroll() {
        Column() {
          Text().width('100%').height(200).backgroundColor(Color.Black);
          Text().width('100%').height(200).backgroundColor(Color.Orange);
          Text().width('100%').height(200).backgroundColor(Color.Blue);
          Text().width('100%').height(200).backgroundColor(Color.Gray);
          Text().width('100%').height(200).backgroundColor(Color.Red);
          Text().width('100%').height(200).backgroundColor(Color.Green);
          Text().width('100%').height(200).backgroundColor(Color.Pink);
        };
      }
      .align(Alignment.TopStart)
      .scrollBar(BarState.Off)
      .scrollable(ScrollDirection.Vertical)
      .layoutWeight(1);
    }
    .width('100%');
  }
}

更多关于HarmonyOS 鸿蒙Next Scroll显示问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


建议对组件设置expandSafeArea属性实现沉浸式效果，也可直接通过窗口接口setWindowLayoutFullScreen实现全屏沉浸式效果。参考：安全区域

您好，添加

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

nice，

设置全屏展示了吗

这是原图

顶部和底部会有空白 没有在安全区域内显示

在HarmonyOS Next中，Scroll组件用于实现滚动视图。常见显示问题包括内容未滚动、滚动边界异常或嵌套滚动冲突。这些问题通常与布局约束、滚动方向设置或组件嵌套方式有关。确保正确设置滚动方向（.vertical或.horizontal）和内容区域大小。检查是否在可滚动容器内正确放置了内容组件。避免在Scroll内嵌套另一个可滚动组件，除非明确处理了滚动事件。

根据你提供的代码，问题很可能出在 Stack 布局和 Scroll 组件的尺寸与滚动区域计算上。

核心问题分析：

在 Stack 布局中，默认情况下，其子组件会堆叠在同一个位置（覆盖）。你的代码中，Scroll 和 MyTitleBar 都位于 Stack 内。Scroll 虽然设置了 .layoutWeight(1)，但在 Stack 中，layoutWeight 属性不会生效。Stack 布局不遵循线性尺寸分配规则。

因此，Scroll 组件没有获得明确的高度约束来定义其可滚动区域。它默认会尝试包裹其内容（即 Image 组件），但 Image 设置了 .width(Const.ONE_HUNDRED_PERCENT) 和 .objectFit(ImageFit.Contain)。Contain 模式会保持图片宽高比进行缩放，其最终高度可能无法撑满父容器，导致 Scroll 的可滚动区域高度与图片实际显示高度一致，从而无法滚动或滚动行为异常。

解决方案：

你需要明确指定 Scroll 组件的高度，使其拥有一个固定的、小于其内容高度的滚动视口。有几种修改方式：

  1. 推荐方案：使用 Column 或 Flex 替代 Stack 进行主要布局 如果 MyTitleBar 是固定在顶部的标题栏，下方内容可滚动，更标准的做法是使用 Column。

    Column() {
  MyTitleBar({
    backIcon: $r('app.media.ic_white_back'),
    backClick: () => {
      this.onBackPress()
    }
  })
  .backgroundColor(Color.Transparent)
  // 可以给TitleBar一个固定高度，例如 .height(60)

  Scroll() {
    Image($r('app.media.ic_beautiful_number_detail_bg_one'))
      .width(Const.ONE_HUNDRED_PERCENT)
      .objectFit(ImageFit.Contain)
  }
  .scrollBar(BarState.Off)
  .scrollable(ScrollDirection.Vertical)
  .layoutWeight(1) // 在Column中，这个属性会生效，让Scroll占据剩余所有空间
}
.width(Const.ONE_HUNDRED_PERCENT)
.height(Const.ONE_HUNDRED_PERCENT)

  2. 如果必须使用 Stack：为 Scroll 明确设置高度 你可以通过 calc 或直接设置百分比来定义 Scroll 的高度。

    Stack({ alignContent: Alignment.Top }) {
  Scroll() {
    Image($r('app.media.ic_beautiful_number_detail_bg_one'))
      .width(Const.ONE_HUNDRED_PERCENT)
      .objectFit(ImageFit.Contain)
  }
  .align(Alignment.TopStart)
  .scrollBar(BarState.Off)
  .scrollable(ScrollDirection.Vertical)
  .width(Const.ONE_HUNDRED_PERCENT)
  .height('100%') // 关键：设置高度为100%，但注意会被上层的TitleBar遮挡一部分。

  MyTitleBar({
    // ... 参数
  })
  .backgroundColor(Color.Transparent)
}
.width(Const.ONE_HUNDRED_PERCENT)
.height(Const.ONE_HUNDRED_PERCENT)

    使用此方法时，Scroll 会铺满整个 Stack，MyTitleBar 会覆盖在其上方。你需要确保 MyTitleBar 有合适的背景或 Scroll 的内容有足够的上边距，防止被标题栏遮挡。

总结： Stack 布局中子组件的尺寸需要显式声明或由内容撑开。对于需要滚动的 Scroll，必须确保其本身具有明确的高度约束，且其内容（Image）的高度超过 Scroll 本身的高度，才能触发垂直滚动。根据你的UI设计，优先考虑使用 Column 布局可能更简单可靠。

回到顶部