一、插件介绍

flutter_multidevice_layout_scenepkg 是一个专为解决 Flutter 多设备适配问题而开发的组件库，特别优化了对鸿蒙平台的支持，包括折叠屏、平板、手机等不同设备类型。该库提供了一系列便捷的接口和开箱即用的组件，帮助开发者轻松构建适配各种设备的响应式布局。

主要功能特性：

• 断点管理：利用鸿蒙平台动态断点能力，实现屏幕尺寸变化时的自适应布局
• 栅格布局：对标 ArkUI 的 GridRow/GridCol 组件，提供灵活的栅格系统
• 自适应显隐容器：根据屏幕空间自动调整组件的显示与隐藏
• 侧边栏组件：实现可折叠的侧边栏布局，支持多种显示模式
• 导航分栏组件：提供类似鸿蒙原生的导航分栏效果，优化多设备体验

二、使用说明

2.1 包的引入

由于这是一个自定义修改版本的包，需要通过 Git 方式引入。在项目的 pubspec.yaml 文件中添加以下依赖配置：

dependencies:
  hadss_adaptive_layout:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/location/location"

添加依赖后，执行以下命令获取包：

flutter pub get

2.2 API调用示例

2.2.1 导入包

import 'package:hadss_adaptive_layout/hadss_adaptive_layout.dart';

2.2.2 断点管理

断点管理组件用于监听屏幕尺寸变化，实现响应式布局：

// 初始化断点管理器
BreakpointData initialData = await BreakpointManager().init();

// 获取当前断点状态
WidthBreakpoint widthBp = BreakpointManager().getWindowWidthBreakpoint();
HeightBreakpoint heightBp = BreakpointManager().getWindowHeightBreakpoint();

// 添加断点变化监听
BreakpointManager().addBreakpointCallback((breakpointData) {
  // 处理断点变化事件
  WidthBreakpoint newWidthBp = breakpointData.widthBreakpoint;
  HeightBreakpoint newHeightBp = breakpointData.heightBreakpoint;
  // 更新UI逻辑
});

// 自定义断点区间（非鸿蒙平台或API<13时有效）
BreakpointManager().setWidthBreakpointRange(WidthBreakpointRange(
  xs: 320,
  sm: 600,
  md: 840,
  lg: 1200,
  xl: 1600,
));

2.2.3 栅格布局

栅格组件提供灵活的网格布局系统：

GridRow(
  gridCols: [
    GridCol(
      span: SpanOption(
        xs: 12,  // 超小屏幕占12列
        sm: 6,   // 小屏幕占6列
        md: 4,   // 中屏幕占4列
        lg: 3,   // 大屏幕占3列
        xl: 2,   // 超大屏幕占2列
      ),
      child: Container(
        color: Colors.blue,
        padding: EdgeInsets.all(10),
        child: Text('栅格项1'),
      ),
    ),
    GridCol(
      span: SpanOption(
        xs: 12,
        sm: 6,
        md: 8,
      ),
      child: Container(
        color: Colors.red,
        padding: EdgeInsets.all(10),
        child: Text('栅格项2'),
      ),
    ),
  ],
  columns: 12,  // 总列数
  gutter: Gutter(x: 16, y: 16),  // 行列间距
  margin: EdgeInsets.all(20),  // 外边距
)

2.2.4 自适应显隐容器

自适应显隐容器根据屏幕空间自动调整组件的显示与隐藏：

DisplayPriorityBox(
  direction: Axis.horizontal,  // 水平排列
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  displayPriorityList: [
    DisplayPriorityObject(
      displayPriority: 1,  // 优先级1（最高）
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
        child: Center(child: Text('高优先级')),
      ),
    ),
    DisplayPriorityObject(
      displayPriority: 2,  // 优先级2
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
        child: Center(child: Text('中优先级')),
      ),
    ),
    DisplayPriorityObject(
      displayPriority: 3,  // 优先级3（最低）
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
        child: Center(child: Text('低优先级')),
      ),
    ),
  ],
)

2.2.5 侧边栏组件

侧边栏组件实现可折叠的侧边栏布局：

SideBarContainer(
  sideBar: Container(
    width: 240,
    color: Colors.grey[200],
    child: ListView(
      children: [
        ListTile(title: Text('菜单项1')),
        ListTile(title: Text('菜单项2')),
        ListTile(title: Text('菜单项3')),
      ],
    ),
  ),
  content: Container(
    color: Colors.white,
    child: Center(child: Text('主内容区域')),
  ),
  type: SideBarContainerType.auto,  // 自动模式
  showSideBar: true,  // 显示侧边栏
  sideBarWidth: 240,  // 侧边栏宽度
  minContentWidth: 360,  // 内容区最小宽度
  autoHide: true,  // 自动隐藏
  sideBarPosition: SideBarPosition.start,  // 侧边栏位置
  onChange: (bool isVisible) {
    // 侧边栏显示状态变化回调
    print('侧边栏状态: $isVisible');
  },
)

2.2.6 导航分栏组件

导航分栏组件提供类似鸿蒙原生的导航分栏效果：

NavigationSplitContainer(
  primary: Container(
    width: 200,
    color: Colors.grey[200],
    child: ListView(
      children: [
        ListTile(title: Text('导航项1')),
        ListTile(title: Text('导航项2')),
        ListTile(title: Text('导航项3')),
      ],
    ),
  ),
  secondary: Container(
    color: Colors.white,
    child: Center(child: Text('详细内容区域')),
  ),
  orientation: Orientation.horizontal,  // 水平方向
  ratio: 0.3,  // 分栏比例
  resizeable: true,  // 可调整大小
  minPrimaryWidth: 180,  // 主栏最小宽度
  maxPrimaryWidth: 400,  // 主栏最大宽度
)

三、总结

flutter_multidevice_layout_scenepkg 组件库为 Flutter 开发者提供了一套完整的多设备适配解决方案，特别优化了对鸿蒙平台的支持。通过使用该库提供的组件，开发者可以轻松实现：

1. 响应式布局：利用断点管理和栅格系统，确保应用在不同尺寸的设备上都能呈现良好的布局
2. 自适应显示：根据屏幕空间自动调整组件的显示与隐藏，优化用户体验
3. 原生体验：提供类似鸿蒙原生的侧边栏和导航分栏组件，保持平台一致性
4. 灵活配置：所有组件都提供了丰富的配置选项，满足不同的设计需求

该组件库的设计充分考虑了鸿蒙平台的特性，特别是动态断点能力，使得开发者能够更高效地构建适配各种鸿蒙设备的应用。无论是简单的单页应用还是复杂的多页面应用，都可以借助这个组件库快速实现优质的多设备适配效果。