HarmonyOS鸿蒙Next中Flutter框架多设备开发指导-瀑布流场景

HarmonyOS鸿蒙Next中Flutter框架多设备开发指导-瀑布流场景

1.1 场景概述

在多设备系统开发中，不同设备的屏幕形态各异，如直板机、PAD、PC、折叠屏等，同时系统状态栏、导航栏、软键盘等元素也会占据屏幕空间。为了确保瀑布流界面在各种设备和场景下都能正常显示，提供流畅的用户体验。本文将详细介绍 RN 瀑布流组件的实现原理、适配指导以及具体的场景案例。

1.1.1 使用场景

在多设备系统、电商应用、内容展示、资讯流等应用中，瀑布流功能是很常见的功能，希望在不同设备上瀑布流界面都能正常显示和交互。下面是不同设备上瀑布流界面的差异，包括：直板机、PAD、PC、折叠屏（阔折叠、双折叠、三折叠）、智慧屏、座舱。

1.1.2 常见问题

开发过程中瀑布流界面在不同设备上会存在差异，可能会出现以下问题：

• 瀑布流布局在不同设备上显示不一致
• 卡片高度不一致导致布局错乱
• 横竖屏切换时列数调整不正确
• 分屏场景下交互元素被另一个应用窗口遮挡
• 滚动体验在不同设备上不一致

1.1.3 多设备适配

1.1.3.1 瀑布流多设备尺寸自适应适配

说明

根据断点布局实现瀑布流界面的自适应：

横向断点	sm	md	lg	xl
属性	适配竖屏手机，界面自适应	适配横屏平板，界面自适应	适配折叠屏，界面自适应	适配PC端，界面自适应

1.1.3.2 瀑布流多设备窗口变化适配

• 适配点1：基于断点实现组件自适应在多设备布局适配，窗口响应（横竖屏、分屏、折叠开合等）

• 适配点2：组件尺寸自适应覆盖拉伸、均分、占比、缩放、延伸、隐藏、折行

1.2 开发指导

1.2.1 Flutter开发

1.2.1.1 关键能力

flutter_staggered_grid_view 三方插件MasonryGridView组件。瀑布流布局行列数变化适配重点关注列数适配，依据断点规则适配列数

1.2.1.2 指导案例

Flutter瀑布流布局推荐采用flutter_staggered_grid_view 三方插件实现，瀑布流列数适配依据原生断点规则。

1）基于断点系统对设备进行分类开发适配逻辑，断点面向窗口而非设备类型，相同断点区间的窗口展示相同的瀑布流布局。布局根据业务需求设置，重点是使用MasonryGridView组件，且传入关键参数

crossAxisCount（横轴子元素的数量，即列数）

2）瀑布流布局行列数变化适配重点关注列数适配，依据断点规则适配列数

行列数主要适配属性如下：

1.2.1.3 示例代码

1）使用MasonryGridView组件

return Scaffold(
  appBar: AppBar(title: const Text('瀑布流'),),
  body: LayoutBuilder(
    builder: (context, constraints) {
      final width = constraints.maxWidth;
      final height = constraints.maxHeight;
      final widthBp = ResponsiveBreakpoints.widthOf(width);
      final heightBp =
      ResponsiveBreakpoints.heightOf(width: width, height: height);
      final crossAxisCount = _getCrossAxisCount(widthBp, heightBp);
      return MasonryGridView.count(
        padding: const EdgeInsets.all(8),
        crossAxisCount: crossAxisCount,
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return _WaterfallCard(item: item);
        },
      );
    },
  ),
);

2）断点规则决定列数

int _getCrossAxisCount(
  WidthBreakpoint widthBp,
  HeightBreakpoint heightBp,
) {
  switch (widthBp) {
    case WidthBreakpoint.xs:
      return 1;
    case WidthBreakpoint.sm:
      return 2;
    case WidthBreakpoint.md:
      return 3;
    case WidthBreakpoint.lg:
    case WidthBreakpoint.xl:
      return 4;
  }
}

瀑布流的Sample示例代码地址：Flutter 瀑布流 ，开发者可以通过该地址查看完整的示例代码，并根据自己的需求进行修改和扩展。