flutter适配openHarmony 交错网格布局

摘要本文介绍了Flutter中交错网格布局的实现方法，展示5种典型应用场景：基础网格、三列网格、响应式网格、卡片式网格和图片网格。重点讲解了如何通过GridView组件实现不同布局效果，包括动态列数调整、性能优化和UI定制技巧。文章还探讨了网格布局的高级应用，如动画过渡、数据过滤和无障碍支持等，并提供了PC端适配建议。这种布局方式特别适合展示图片库、商品列表等内容，具有灵活性和视觉吸引力。

2501_94450199

688人浏览 · 2025-12-02 23:37:25

2501_94450199 · 2025-12-02 23:37:25 发布

在这里插入图片描述

案例概述

交错网格布局（Staggered Grid）是一种常见的网格布局方式，适合展示不同尺寸的内容。与普通网格不同，交错网格允许不同的行和列跨度。本案例展示了如何创建各种交错网格布局。

核心概念

1. 网格布局基础

网格布局通过行和列组织内容。交错网格允许每个项目占据不同数量的行和列，创建视觉上更有趣的布局。

2. 响应式网格

根据屏幕大小动态调整网格的列数和项目大小。

3. 性能优化

使用 ListView.builder 或 GridView.builder 实现虚拟化，只渲染可见的项目。

代码详解

示例 1：基础交错网格

class BasicStaggeredGridExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: List.generate(6, (index) {
        final height = index % 2 == 0 ? 200.0 : 150.0;
        return Container(
          color: Colors.primaries[index % Colors.primaries.length],
          height: height,
          child: Center(
            child: Text('项目 $index'),
          ),
        );
      }),
    );
  }
}

代码解释： 这个示例展示了基础的网格布局。通过 GridView.count 创建固定列数的网格。每个项目的高度不同，创建交错效果。

示例 2：三列交错网格

class ThreeColumnStaggeredExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      childAspectRatio: 0.8,
      children: List.generate(9, (index) {
        return Container(
          color: Colors.primaries[index % Colors.primaries.length],
          child: Center(
            child: Text('项目 $index'),
          ),
        );
      }),
    );
  }
}

代码解释： 这个示例展示了三列网格布局。通过 childAspectRatio 控制项目的宽高比。

示例 3：响应式交错网格

class ResponsiveStaggeredExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final crossAxisCount = screenWidth > 600 ? 3 : 2;

    return GridView.count(
      crossAxisCount: crossAxisCount,
      children: List.generate(12, (index) {
        return Container(
          color: Colors.primaries[index % Colors.primaries.length],
          child: Center(
            child: Text('项目 $index'),
          ),
        );
      }),
    );
  }
}

代码解释： 这个示例展示了响应式网格。根据屏幕宽度动态调整列数。

示例 4：卡片交错网格

class CardStaggeredExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      children: List.generate(8, (index) {
        return Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                color: Colors.primaries[index % Colors.primaries.length],
                height: 150,
                width: double.infinity,
              ),
              Padding(
                padding: const EdgeInsets.all(8),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('标题 $index'),
                    const SizedBox(height: 4),
                    Text('描述文本'),
                  ],
                ),
              ),
            ],
          ),
        );
      }),
    );
  }
}

代码解释： 这个示例展示了卡片式的网格布局。每个项目是一个卡片，包含图片和文本。

示例 5：图片交错网格

class ImageStaggeredExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        crossAxisSpacing: 8,
        mainAxisSpacing: 8,
      ),
      itemCount: 20,
      itemBuilder: (context, index) {
        return Container(
          decoration: BoxDecoration(
            color: Colors.primaries[index % Colors.primaries.length],
            borderRadius: BorderRadius.circular(8),
          ),
          child: Center(
            child: Text('图片 $index'),
          ),
        );
      },
    );
  }
}