Flutter + OpenHarmony 网格布局：GridView 与 SliverGrid 在鸿蒙设备内容展示中的应用

个人主页：

注：本文所有实践均基于手机端场景，适用于 OpenHarmony 手机设备的应用开发。

前言

在 OpenHarmony 手机应用开发中，网格布局是展示图片、商品、功能入口等内容的常用方式。Flutter 提供了GridView和SliverGrid两种核心组件，分别适用于简单独立页面和复杂滚动联动场景。本文将从基础出发，系统介绍二者的作用、常见属性，并提供可直接运行的手机端代码示例。

基础组件——GridView 组件

作用/特点

GridView是 Flutter 中用于构建二维滚动列表的基础组件。它适用于独立的网格页面，如相册、应用图标列表、商品橱窗等。其特点是：

• 使用简单，开箱即用；
• 支持垂直或水平滚动；
• 可通过gridDelegate灵活控制列数与子项比例；
• 默认使用ListView的底层机制，具备良好的性能表现。

常见属性

⚠️ 手机端建议：始终使用GridView.builder，避免一次性构建所有子项；若子项高度一致，可配合固定childAspectRatio提升性能。

代码示例

// grid_view_demo_phone.dartimport'package:flutter/material.dart';voidmain()=>runApp(constMyApp());classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'GridView 手机示例',home:Scaffold(appBar:AppBar(title:constText('GridView - 商品列表')),body:GridView.builder(itemCount:40,gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:2,// 手机常用 2 列childAspectRatio:0.85,// 宽略大于高mainAxisSpacing:12,crossAxisSpacing:12,),cacheExtent:600,itemBuilder:(context,index){return_buildGridItem('商品$index');},),),);}staticWidget_buildGridItem(Stringtitle){returnCard(clipBehavior:Clip.hardEdge,child:Column(crossAxisAlignment:CrossAxisAlignment.stretch,children:[AspectRatio(aspectRatio:1.0,child:Container(color:Colors.grey[300]),),Padding(padding:constEdgeInsets.all(8),child:Text(title,textAlign:TextAlign.center,maxLines:1,overflow:TextOverflow.ellipsis,style:constTextStyle(fontSize:14),),),],),);}}

运行界面：

基础组件——SliverGrid 组件

作用/特点

SliverGrid不是独立 Widget，而是CustomScrollView中的一种sliver（可滑动片段）。它适用于需要与其他滚动元素联动的复杂页面，例如：

• 顶部大图 Banner + 网格内容；
• 可折叠的 AppBar + 网格列表；
• 多类型混合滚动（文本 + 网格 + 分割线）。

其核心优势在于：统一滚动上下文，实现无缝联动与高性能滚动。

常见属性

⚠️ 注意：SliverGrid必须作为CustomScrollView的直接子项（sliver），不能单独使用。

代码示例

// sliver_grid_demo_phone.dartimport'package:flutter/material.dart';voidmain()=>runApp(constMyApp());classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(title:'SliverGrid 手机示例',home:Scaffold(body:CustomScrollView(slivers:[constSliverAppBar(title:Text('应用中心'),pinned:true,expandedHeight:180,flexibleSpace:FlexibleSpaceBar(background:DecoratedBox(decoration:BoxDecoration(color:Colors.blue,image:DecorationImage(image:NetworkImage('https://picsum.photos/seed/banner/800/400'),//顶部风景图，可替换fit:BoxFit.cover,),),),),),SliverGrid(delegate:SliverChildBuilderDelegate((context,index){return_buildGridItem('App$index');},childCount:30,),gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:4,// 手机图标常用 4 列childAspectRatio:1.0,// 正方形mainAxisSpacing:10,//控制网格横向间距crossAxisSpacing:10,//控制网格纵向间距),),],),),);}staticWidget_buildGridItem(Stringtitle){returnCard(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[Icon(Icons.apps_outlined,size:32,color:Colors.grey[700]),constSizedBox(height:4),Text(title,textAlign:TextAlign.center,maxLines:1,overflow:TextOverflow.ellipsis,style:constTextStyle(fontSize:12),),],),);}}

运行界面：

面向 OpenHarmony 的工程建议

1. 动态列数策略
   不要硬编码 crossAxisCount，应根据屏幕宽度计算：

intgetColumnCount(double width){if(width>1200)return6;// 智慧屏if(width>800)return4;// 平板return2;// 手机}

2.图片加载必须优化

• 使用 cached_network_image，并指定 width/height 或 fit，防止重排。

3.智慧屏交互适配

• 增大点击区域（≥48dp）
• 添加焦点高亮（focusColor 或边框）
• 减少每屏信息量，避免视觉疲劳

4.性能监控常态化

• 使用 Flutter DevTools 检查
• Frame time（目标 <16ms）
• Memory usage（滚动时平稳）
• Widget rebuilds（网格项无意外重建）

结语

在 OpenHarmony 手机应用开发中，GridView与SliverGrid各有其适用场景：前者简洁高效，适合独立内容展示；后者灵活强大，适用于需与 AppBar、Banner 等组件联动的复杂滚动页面。只要合理使用builder模式、固定子项比例、控制预加载范围，即可在手机端实现流畅、低内存占用的网格体验。

本文提供的两套完整示例代码，已覆盖日常开发中的主流需求，可直接集成至项目并快速迭代。掌握这两种网格布局方式，是构建高质量 Flutter 应用的重要基础。

🔜下期预告：《Flutter + OpenHarmony 用户输入框：TextField 与 InputDecoration 在多端表单中的交互设计》
我们将深入探讨如何在 OpenHarmony 手机上打造安全、易用、美观的输入体验，涵盖焦点管理、键盘适配、校验反馈与样式定制等实战技巧。敬请期待！

欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net