个人主页：
文章目录
- 前言
- 基础组件——GridView 组件
- 作用/特点
- 常见属性
- 代码示例
- 基础组件——SliverGrid 组件
- 作用/特点
- 常见属性
- 代码示例
- 面向 OpenHarmony 的工程建议
- 结语
注：本文所有实践均基于手机端场景，适用于 OpenHarmony 手机设备的应用开发。
前言
在 OpenHarmony 手机应用开发中，网格布局是展示图片、商品、功能入口等内容的常用方式。Flutter 提供了GridView和SliverGrid两种核心组件，分别适用于简单独立页面和复杂滚动联动场景。本文将从基础出发，系统介绍二者的作用、常见属性，并提供可直接运行的手机端代码示例。
基础组件——GridView 组件
作用/特点
GridView是 Flutter 中用于构建二维滚动列表的基础组件。它适用于独立的网格页面，如相册、应用图标列表、商品橱窗等。其特点是：
- 使用简单，开箱即用；
- 支持垂直或水平滚动；
- 可通过
gridDelegate灵活控制列数与子项比例； - 默认使用
ListView的底层机制，具备良好的性能表现。
常见属性
| 属性 | 类型 | 说明 |
|---|---|---|
scrollDirection | Axis | 滚动方向，默认Axis.vertical |
reverse | bool | 是否反转滚动方向 |
padding | EdgeInsetsGeometry? | 内边距 |
gridDelegate | SliverGridDelegate | 控制网格布局规则（必填） |
children/itemBuilder+itemCount | — | 子项数据源（推荐使用builder形式） |
cacheExtent | double | 可视区域外预加载距离，提升滚动流畅度 |
physics | ScrollPhysics? | 滚动物理效果，手机默认为ClampingScrollPhysics |
shrinkWrap | bool | 是否包裹内容高度（嵌套时使用，否则影响性能） |
⚠️ 手机端建议：始终使用
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 + 网格列表；
- 多类型混合滚动（文本 + 网格 + 分割线）。
其核心优势在于：统一滚动上下文，实现无缝联动与高性能滚动。
常见属性
| 属性 | 类型 | 说明 |
|---|---|---|
delegate | SliverChildDelegate | 子项构建方式，常用SliverChildBuilderDelegate |
gridDelegate | SliverGridDelegate | 同GridView，控制列数与比例 |
key | Key? | 建议提供稳定 Key，避免重建 |
findChildIndexCallback | ChildIndexGetter? | 大数据集优化（配合ValueKey使用） |
⚠️ 注意：
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 的工程建议
- 动态列数策略
不要硬编码 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
