在 Flutter 应用中创建响应式网格布局可能是一项艰巨的任务。开发者经常难以在各种屏幕尺寸和方向上实现一致且自适应的设计。借助 Wolt Responsive Layout Grid 库，构建响应式网格布局变得更加简单。

Wolt Responsive Layout Grid 库引入了 Material Design 的响应式布局网格 的 Flutter 实现。它提供了一个统一的多平台网格系统，无论使用的设备或操作系统如何，都能确保一致性和视觉完整性。

An animated image of the sample app

功能

Wolt Responsive Layout Grid 库提供以下主要功能：

响应式网格布局：WoltResponsiveLayoutGrid 小部件能够创建响应式网格布局，以适应不同的屏幕尺寸和方向。

Material Design 适配：该库实现了 Material Design 的响应式布局网格，保证了与现有设计原则的一致性和遵守。

可自定义的间距：通过调整 WoltResponsiveLayoutGrid 小部件的 gutter（沟槽）和 margin（外边距）属性，开发者可以完全控制间距，从而创建符合设计要求的布局。

屏幕宽度自适应：WoltScreenWidthAdaptiveWidget 允许开发者根据屏幕宽度自适应子小部件，动态调整布局和内容呈现。通过为小屏幕和大屏幕提供不同的子小部件，WoltScreenWidthAdaptiveWidget 会根据屏幕宽度在它们之间自动切换，确保在各种设备上获得无缝的用户体验。

用于视觉调试的覆盖层：在开发过程中，通常需要网格布局的视觉表示来微调和验证其结构。Wolt Responsive Layout Grid 库包含一个覆盖层功能，可让您可视化网格布局。此覆盖层为每个列和沟槽渲染彩色框，从而更轻松地进行调试并确保正确对齐。可以根据调试需求启用或禁用覆盖层。

入门

要使用此插件，请将 wolt_responsive_layout_grid 添加到您的 pubspec.yaml 文件中作为依赖项。

用法

WoltResponsiveLayoutGrid

WoltResponsiveLayoutGrid 小部件是该库的核心。通过使用 WoltColumnSpanCell 对象列表，您可以为每个单元格定义内容和列跨度。这允许将一个或多个列分组，以在可用空间内创建部分或内容。

WoltResponsiveLayoutGrid(
  isOverlayVisible: true,
  gutter: 16,
  margin: 32,
  columnSpanCells: [
    WoltColumnSpanCell(
      columnCellWidget: Placeholder(color: Colors.blue, strokeWidth: 4),
      columnSpan: 4,
    ),
    WoltColumnSpanCell(
      columnCellWidget: Placeholder(color: Colors.red, strokeWidth: 4),
      columnSpan: 6,
    ),
    WoltColumnSpanCell(
      columnCellWidget: Placeholder(color: Colors.green, strokeWidth: 4),
      columnSpan: 2,
    ),
  ],
)

\

居中构造函数

WoltResponsiveLayoutGrid 小部件提供了一个名为 centered 的工厂构造函数，它通过子小部件和指定的列数简化了居中布局的创建。此构造函数接受以下参数：

child：要居中放置在网格布局中的子小部件。

centerWidgetColumnCount：子小部件应占用的列数。

paddedColumnCountPerSide：要在子小部件的每一侧添加的填充列数。这些填充列在居中小部件周围创建空白区域，从而产生视觉上平衡且吸引人的布局。

WoltResponsiveLayoutGrid.centered(
  centerWidgetColumnCount: 3,
  paddedColumnCountPerSide: 2,
  margin: 32,
  gutter: 16,
  isOverlayVisible: true,
  child: DecoratedBox(
    decoration: BoxDecoration(border: Border.all(color: Colors.black, width: 2)),
    child: Text(
      'Center Widget',
      style: Theme.of(context).textTheme.displayLarge,
      textAlign: TextAlign.center,
    ),
  ),
),
平板电脑 – 竖屏 平板电脑 – 横屏

WoltScreenWidthAdaptiveWidget

WoltScreenWidthAdaptiveWidget 旨在提供基于屏幕宽度的自适应渲染。它允许开发者定义两个子小部件：一个用于小屏幕，另一个用于大屏幕。该小部件会根据屏幕宽度在子小部件之间自动切换，确保界面能够无缝适应不同的设备尺寸。

WoltScreenWidthAdaptiveWidget(
  smallScreenWidthChild: Icon(Icons.store, size: 16, color: Colors.black),
  largeScreenWidthChild: Text(isOnline ? 'Online' : 'Offline'),
),

附加信息

要了解更多信息，您可以查看以下博文：

GitHub

查看 Github