Flutter × OpenHarmony 跨端网格布局实践：自定义列数的GridView实现-优快云博客

文章目录

Flutter × OpenHarmony 跨端网格布局实践：自定义列数的GridView实现

Flutter × OpenHarmony 跨端网格布局实践：自定义列数的GridView实现

前言

在跨端应用开发中，网格布局是最常见的 UI 组件之一，无论是展示商品、图片还是功能入口，都离不开灵活的网格布局。而在 Flutter × OpenHarmony 的跨端开发场景下，如何快速构建一个支持自定义列数的网格布局，成为很多开发者关注的重点。

本文将通过一个简单的示例，讲解如何在 Flutter 中利用 GridView.builder 构建可动态调整列数的网格布局，并兼顾跨端特性与可复用性。

在这里插入图片描述

背景

在传统移动应用开发中，Android 和 iOS 往往需要分别实现 RecyclerView/GridView 或 CollectionView 来完成网格布局。而 Flutter 的 声明式 UI + 跨平台能力，使得同一份代码可以运行在 OpenHarmony、iOS、Android 等多个平台上。

然而，即便是跨端开发，也需要关注以下几个问题：

列数可配置：不同页面或屏幕大小可能需要不同的列数（2列、3列或更多）。
自适应网格项：网格项宽高比和间距应保持一致。
UI 可定制：颜色、圆角、文字样式等需可灵活调整。

Flutter × OpenHarmony 跨端开发介绍

Flutter 本身是一套跨平台 UI 框架，而 OpenHarmony 提供了对设备生态的支持，通过 ArkUI + DevEco Studio 可以直接运行 Flutter 应用。

在 Flutter 中：

GridView.builder 可以按需生成网格项，支持大数据量场景。
SliverGridDelegateWithFixedCrossAxisCount 可以轻松控制列数、间距和宽高比。
ThemeData 与 colorScheme、textTheme 的结合，让 UI 更加统一和易于维护。

通过结合 Flutter 的灵活布局能力和 OpenHarmony 的跨端特性，我们可以快速搭建通用网格组件。

在这里插入图片描述

开发核心代码（详细解析）

在这里插入图片描述

下面是核心实现代码，并附带解析：

/// 构建基础网格布局
/// 使用GridView.builder创建网格，支持自定义列数（2列或3列）
/// 参数crossAxisCount控制网格的列数
Widget _buildBasicGrid(ThemeData theme, int crossAxisCount) {
  // 1. 准备网格数据，这里简单生成6个示例项
  final items = List.generate(6, (index) => '项目 ${index + 1}');

  return Container(
    // 2. 外层容器样式：圆角 + 背景色 + 内边距
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(12),
      color: theme.colorScheme.surfaceContainerHighest,
    ),
    padding: const EdgeInsets.all(8),
    child: GridView.builder(
      shrinkWrap: true, // 3. 让GridView根据内容自适应高度
      physics: const NeverScrollableScrollPhysics(), // 4. 禁止滚动，嵌套在可滚动父组件时常用
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: crossAxisCount, // 5. 动态控制列数
        mainAxisSpacing: 8, // 6. 主轴间距（行间距）
        crossAxisSpacing: 8, // 7. 交叉轴间距（列间距）
        childAspectRatio: 2.5, // 8. 子项宽高比，宽/高
      ),
      itemCount: items.length,
      itemBuilder: (context, index) {
        // 9. 单个网格项的样式
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: theme.colorScheme.primary.withOpacity(0.1),
          ),
          child: Center(
            child: Text(
              items[index],
              style: theme.textTheme.bodyMedium?.copyWith(
                color: theme.colorScheme.primary,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        );
      },
    ),
  );
}