HarmonyOS 7.0 / API 26 DynamicLayout 性能排查：窗口拖拽时如何压住重复测量和刷新抖动

问题从哪里来

HarmonyOS 7.0 / API 26 做多设备适配时，DynamicLayout 这类动态布局能力能帮页面应对手机、折叠屏、平板和窗口态。但布局能动起来，不代表体验就稳。用户拖动窗口宽度、折叠屏展开、平板分屏比例变化时，页面可能会连续触发测量、重排、列表刷新和详情请求。

如果处理不好，用户看到的不是“自适应”，而是列表闪、详情白、按钮跳、接口重复请求。这个问题很常见，因为窗口变化不是一次事件，而是一串连续事件。页面如果每收到一次变化就完整重算，就会被自己的适配逻辑拖慢。

这篇只讲一个点：DynamicLayout 场景下的性能稳定。目标是让布局变化时页面只做必要更新，状态不丢，接口不炸，列表不抖。

先复现一个典型问题

假设页面有列表、筛选区和详情区。窗口从 760vp 拖到 980vp 时，页面从单栏切成主从结构。很多代码会在每次 width 变化时重新计算 layoutMode，然后触发列表和详情刷新。

type LayoutMode = 'singleColumn' | 'masterDetail' | 'threePane';

interface WindowChangeEvent {
  widthVp: number;
  heightVp: number;
  timestamp: number;
}

class BadLayoutController {
  private mode: LayoutMode = 'singleColumn';

  onWindowChange(event: WindowChangeEvent): void {
    this.mode = event.widthVp >= 900 ? 'masterDetail' : 'singleColumn';
    this.reloadList();
    this.reloadDetail();
    this.rebuildFloatLayer();
  }

  private reloadList(): void {}
  private reloadDetail(): void {}
  private rebuildFloatLayer(): void {}
}

这段代码看起来没问题，但它会把“窗口拖动中的每一帧”都当成最终布局来处理。拖动 1 秒可能触发几十次，页面当然会抖。

正确思路：布局事件先合并，再决定是否重排

我会把窗口变化分成两层：原始变化和稳定变化。原始变化只记录，不立刻刷新列表；等窗口宽度稳定一小段时间后，再判断布局模式有没有真正变化。

interface LayoutDecision {
  mode: LayoutMode;
  widthBucket: 'compact' | 'medium' | 'expanded';
  shouldReloadData: boolean;
  shouldRebuildPanel: boolean;
}

export class DynamicLayoutStabilityController {
  private lastDecision: LayoutDecision = {
    mode: 'singleColumn',
    widthBucket: 'compact',
    shouldReloadData: false,
    shouldRebuildPanel: false
  };
  private pendingTimer: number = -1;
  private pendingEvent?: WindowChangeEvent;

  onWindowChanging(event: WindowChangeEvent, apply: (decision: LayoutDecision) => void): void {
    this.pendingEvent = event;
    if (this.pendingTimer !== -1) {
      clearTimeout(this.pendingTimer);
    }
    this.pendingTimer = setTimeout(() => {
      if (!this.pendingEvent) return;
      const next = this.resolve(this.pendingEvent.widthVp);
      const decision = this.diff(this.lastDecision, next);
      this.lastDecision = next;
      apply(decision);
      this.pendingTimer = -1;
    }, 120);
  }

  private resolve(widthVp: number): LayoutDecision {
    if (widthVp >= 1200) {
      return { mode: 'threePane', widthBucket: 'expanded', shouldReloadData: false, shouldRebuildPanel: true };
    }
    if (widthVp >= 900) {
      return { mode: 'masterDetail', widthBucket: 'medium', shouldReloadData: false, shouldRebuildPanel: true };
    }
    return { mode: 'singleColumn', widthBucket: 'compact', shouldReloadData: false, shouldRebuildPanel: true };
  }

  private diff(prev: LayoutDecision, next: LayoutDecision): LayoutDecision {
    return {
      ...next,
      shouldReloadData: false,
      shouldRebuildPanel: prev.mode !== next.mode || prev.widthBucket !== next.widthBucket
    };
  }
}

这里有一个关键点：窗口变化不等于数据变化。布局变了，只需要调整页面结构；除非筛选条件、详情 ID 或数据版本变了，否则不应该重新请求。

案例一：拖动窗口 30 次，只重排 1 次

下面这个例子模拟窗口连续拖动。宽度从 850vp 到 930vp，中间变化很多次，但最终只需要在稳定后切到 masterDetail。

const controller = new DynamicLayoutStabilityController();
const decisions: LayoutDecision[] = [];

for (let i = 0; i < 30; i++) {
  controller.onWindowChanging({
    widthVp: 850 + i * 3,
    heightVp: 760,
    timestamp: Date.now() + i * 16
  }, decision => decisions.push(decision));
}

setTimeout(() => {
  console.info(decisions.length);       // 期望：1
  console.info(decisions[0].mode);      // 期望：masterDetail
  console.info(decisions[0].shouldReloadData); // 期望：false
}, 200);

这个验证能直接抓出问题。如果 decisions 出现十几条，说明页面还是在跟着窗口拖动频繁重排。正式页面里，这种频繁重排会把列表、图片解码和浮层定位全部拖慢。

案例二：跨断点才重排，同断点内只调整尺寸

第二个案例更细一点。用户在平板分屏里从 960vp 拖到 1040vp，都属于 masterDetail。此时不应该重建左右面板，只需要调整列宽。

interface PanelSizeResult {
  mode: LayoutMode;
  listWidthVp: number;
  detailMinWidthVp: number;
  rebuild: boolean;
}

export class PanelSizeResolver {
  resolve(widthVp: number, previousMode: LayoutMode): PanelSizeResult {
    const mode: LayoutMode = widthVp >= 1200
      ? 'threePane'
      : widthVp >= 900
        ? 'masterDetail'
        : 'singleColumn';

    if (mode === 'singleColumn') {
      return { mode, listWidthVp: widthVp, detailMinWidthVp: 0, rebuild: previousMode !== mode };
    }

    if (mode === 'masterDetail') {
      const listWidth = Math.min(360, Math.max(300, Math.round(widthVp * 0.36)));
      return { mode, listWidthVp: listWidth, detailMinWidthVp: widthVp - listWidth, rebuild: previousMode !== mode };
    }

    return { mode, listWidthVp: 360, detailMinWidthVp: widthVp - 600, rebuild: previousMode !== mode };
  }
}

这段代码把“模式变化”和“尺寸变化”分开了。模式没变，就不要重建组件；只调整宽度即可。这样折叠屏和平板窗口变化时，页面会稳很多。

页面里怎么接

页面层不要直接把 width 变化绑到所有子组件。建议只让布局控制器输出一个稳定 decision，然后页面根据 decision 更新布局。

@Component
struct DynamicLayoutPerfPage {
  private stability = new DynamicLayoutStabilityController();
  private sizeResolver = new PanelSizeResolver();
  @State private mode: LayoutMode = 'singleColumn';
  @State private listWidthVp: number = 390;
  @State private detailMinWidthVp: number = 0;

  onWindowSizeChange(widthVp: number, heightVp: number) {
    this.stability.onWindowChanging({ widthVp, heightVp, timestamp: Date.now() }, decision => {
      const panel = this.sizeResolver.resolve(widthVp, this.mode);
      this.mode = panel.mode;
      this.listWidthVp = panel.listWidthVp;
      this.detailMinWidthVp = panel.detailMinWidthVp;

      if (decision.shouldReloadData) {
        this.reloadData();
      }
    });
  }

  private reloadData(): void {
    // 只有筛选条件、账号、数据版本变化时才请求，不因为窗口拖动请求
  }

  build() {
    if (this.mode === 'singleColumn') {
      Column() { Text('列表') }.width('100%')
    } else {
      Row() {
        Column() { Text('列表') }.width(this.listWidthVp)
        Column() { Text('详情') }.layoutWeight(1)
      }
    }
  }
}

这套结构能把性能问题压在布局层。窗口变化时，页面先等稳定，再跨断点重排；同断点内只调尺寸，不重新拉数据。

方案取舍

我会选第三种。它没有过度设计，只是把窗口变化当成高频事件来处理，这一点很重要。多设备适配不是把大屏摆满，而是窗口一直变化时页面还稳。

验收清单

• 连续拖动窗口 1 秒，列表不重复请求；
• 同一断点内调整尺寸，不销毁列表和详情；
• 跨断点时才重建面板结构；
• 搜索词、选中项、滚动位置保留；
• 浮层和详情区域跟随最终布局，不跟着每一帧抖；
• 日志能看到本次是尺寸变化、断点变化还是数据变化。

最后总结

HarmonyOS 7.0 / API 26 的多设备适配，不能只看页面能不能铺开。窗口拖动、折叠屏展开和平板分屏都会带来连续布局事件。DynamicLayout 相关页面要稳，核心是三件事：合并高频窗口变化、区分断点变化和尺寸变化、不要因为布局变化重复拉数据。

把这三件事做好，页面从手机到折叠屏、平板、鸿蒙电脑窗口态都会更稳定，用户也不会在窗口变化时看到列表闪烁和详情白屏。