news 2026/7/22 5:01:06

GridView网格布局 - 鸿蒙Flutter商品展示应用

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
GridView网格布局 - 鸿蒙Flutter商品展示应用



概述

GridView是Flutter中用于展示网格布局的组件，适合商品列表、图片画廊等场景。GridView提供了多种构造方式，可以灵活地控制网格的列数、宽高比等属性。

GridView构造函数

GridView.count

通过指定列数创建网格：

GridView.count({Key?key,AxisscrollDirection=Axis.vertical,bool reverse=false,ScrollController?controller,bool?primary,ScrollPhysics?physics,EdgeInsetsGeometry?padding,bool shrinkWrap=false,required int crossAxisCount,// 列数double mainAxisSpacing=0,// 主轴间距double crossAxisSpacing=0,// 交叉轴间距double childAspectRatio=1,// 宽高比bool addAutomaticKeepAlives=true,bool addRepaintBoundaries=true,bool addSemanticIndexes=true,int?semanticChildCount,requiredList<Widget>children,// 子组件列表})

GridView.extent

通过指定最大宽度创建网格：

GridView.extent({Key?key,AxisscrollDirection=Axis.vertical,bool reverse=false,ScrollController?controller,bool?primary,ScrollPhysics?physics,EdgeInsetsGeometry?padding,bool shrinkWrap=false,required double maxCrossAxisExtent,// 最大宽度double mainAxisSpacing=0,double crossAxisSpacing=0,double childAspectRatio=1,bool addAutomaticKeepAlives=true,bool addRepaintBoundaries=true,bool addSemanticIndexes=true,int?semanticChildCount,requiredList<Widget>children,})

GridView.builder

懒加载模式，适合大数据网格：

GridView.builder({Key?key,AxisscrollDirection=Axis.vertical,bool reverse=false,ScrollController?controller,bool?primary,ScrollPhysics?physics,EdgeInsetsGeometry?padding,bool shrinkWrap=false,requiredSliverGridDelegategridDelegate,// 网格代理requiredIndexedWidgetBuilderitemBuilder,// 项构建器int?itemCount,bool addAutomaticKeepAlives=true,bool addRepaintBoundaries=true,bool addSemanticIndexes=true,int?semanticChildCount,})

核心属性详解

crossAxisCount

指定列数，只在GridView.count中使用：

crossAxisCount:2,// 2列

maxCrossAxisExtent

指定子组件的最大宽度，只在GridView.extent中使用：

maxCrossAxisExtent:200,// 每个子组件最大宽度200

mainAxisSpacing

主轴方向的间距：

mainAxisSpacing:10,// 垂直方向间距10像素

crossAxisSpacing

交叉轴方向的间距：

crossAxisSpacing:10,// 水平方向间距10像素

childAspectRatio

子组件的宽高比：

childAspectRatio:1,// 正方形childAspectRatio:1.5,// 宽大于高childAspectRatio:0.66,// 高大于宽

gridDelegate

网格代理，用于自定义网格布局，常用SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent：

// 固定列数gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:2,mainAxisSpacing:10,crossAxisSpacing:10,childAspectRatio:1,),// 固定最大宽度gridDelegate:constSliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent:200,mainAxisSpacing:10,crossAxisSpacing:10,childAspectRatio:1,),

基本用法示例

GridView.count

GridView.count(crossAxisCount:2,padding:EdgeInsets.all(16),mainAxisSpacing:10,crossAxisSpacing:10,children:[Container(color:Colors.blue[100],child:constCenter(child:Text('Item 1'))),Container(color:Colors.green[100],child:constCenter(child:Text('Item 2'))),Container(color:Colors.orange[100],child:constCenter(child:Text('Item 3'))),Container(color:Colors.purple[100],child:constCenter(child:Text('Item 4'))),],)

GridView.extent

GridView.extent(maxCrossAxisExtent:150,padding:EdgeInsets.all(16),mainAxisSpacing:10,crossAxisSpacing:10,children:[Container(color:Colors.blue[100],child:constCenter(child:Text('Item 1'))),Container(color:Colors.green[100],child:constCenter(child:Text('Item 2'))),Container(color:Colors.orange[100],child:constCenter(child:Text('Item 3'))),Container(color:Colors.purple[100],child:constCenter(child:Text('Item 4'))),],)

GridView.builder

GridView.builder(gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:2,mainAxisSpacing:10,crossAxisSpacing:10,),itemCount:100,itemBuilder:(context,index){returnContainer(color:Colors.grey[200],child:Center(child:Text('Item$index')),);},)

商品列表实战

基础商品网格

GridView.count(crossAxisCount:2,padding:EdgeInsets.all(16),mainAxisSpacing:12,crossAxisSpacing:12,childAspectRatio:0.7,children:[_buildProductCard('商品1','¥99'),_buildProductCard('商品2','¥199'),_buildProductCard('商品3','¥299'),_buildProductCard('商品4','¥399'),],)Widget_buildProductCard(Stringname,Stringprice){returnCard(elevation:2,child:Padding(padding:EdgeInsets.all(8),child:Column(children:[Expanded(child:Container(color:Colors.grey[200],child:constIcon(Icons.shopping_bag,size:48),),),SizedBox(height:8),Text(name,style:TextStyle(fontWeight:FontWeight.bold)),SizedBox(height:4),Text(price,style:TextStyle(color:Colors.red)),],),),);}

商品列表全屏布局

GridView.builder(gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:2,mainAxisSpacing:8,crossAxisSpacing:8,childAspectRatio:0.8,),padding:EdgeInsets.all(8),itemCount:50,itemBuilder:(context,index){returnCard(child:Column(children:[Expanded(child:Container(color:Colors.blue[100],child:Center(child:Text('商品$index')),),),Padding(padding:EdgeInsets.all(8),child:Column(children:[Text('商品名称$index',style:TextStyle(fontWeight:FontWeight.bold)),SizedBox(height:4),Text('¥${(index+1)*10}',style:TextStyle(color:Colors.red)),],),),],),);},)

图片画廊实战

图片网格布局

GridView.extent(maxCrossAxisExtent:150,padding:EdgeInsets.all(8),mainAxisSpacing:8,crossAxisSpacing:8,children:List.generate(20,(index){returnContainer(decoration:BoxDecoration(color:Colors.grey[200],borderRadius:BorderRadius.circular(8),),child:Center(child:Icon(Icons.image,size:48)),);}),)

三种构造方式对比

特性GridView.countGridView.extentGridView.builder
创建方式固定列数固定最大宽度懒加载
适合场景固定列数布局响应式布局大量数据
内存占用较高较高较低
性能一般一般优异

性能优化策略

使用GridView.builder

对于大量数据，使用GridView.builder进行懒加载：

GridView.builder(gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:3),itemCount:1000,itemBuilder:(context,index){returnText('Item$index');},)

设置childAspectRatio

设置合适的宽高比，避免不必要的测量：

childAspectRatio:0.7,// 商品卡片常用比例

优化子组件

确保子组件是轻量级的：

GridView.builder(gridDelegate:constSliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:2),itemCount:1000,itemBuilder:(context,index){returnContainer(child:constIcon(Icons.image),);},)

关键要点总结

  1. crossAxisCount指定列数（GridView.count）
  2. maxCrossAxisExtent指定最大宽度（GridView.extent）
  3. mainAxisSpacing和crossAxisSpacing控制间距
  4. childAspectRatio控制宽高比
  5. GridView.builder适合大数据网格
  6. gridDelegate用于自定义网格布局

常见问题

Q1: 如何实现响应式网格？

A: 使用GridView.extent，根据屏幕宽度自动调整列数。

Q2: 如何设置不同的列数？

A: 使用SliverGridDelegateWithFixedCrossAxisCount并动态设置crossAxisCount。

Q3: 大数据网格卡顿怎么办？

A: 使用GridView.builder进行懒加载。

Q4: 如何控制子组件大小？

A: 通过childAspectRatio和容器尺寸控制。

实践建议

  1. 固定列数：使用GridView.count
  2. 响应式布局：使用GridView.extent
  3. 大量数据：使用GridView.builder
  4. 商品列表：设置childAspectRatio为0.7~0.8
  5. 图片画廊：设置childAspectRatio为1（正方形）

通过合理使用GridView的各种构造方式和属性，可以创建出高效、美观的网格布局，满足商品展示、图片画廊等多种应用场景的需求。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/7/22 4:59:16

游戏AI实战：从A*路径规划到神经网络决策的架构与优化

1. 项目概述&#xff1a;从像素到智能的跨越如果你和我一样&#xff0c;是个老派的游戏开发者&#xff0c;可能还记得那个用一长串if-else语句控制怪物行为的年代。那时候的“AI”&#xff0c;与其说是智能&#xff0c;不如说是一本写死的剧本&#xff0c;玩家多玩几次就能摸清…

作者头像 李华
网站建设 2026/7/22 4:58:20

Druid核心架构解析与集群部署实践

1. Druid核心架构与本地集群规划Druid作为实时分析型数据库&#xff0c;其架构设计充分考虑了高吞吐量摄入与低延迟查询的需求。一个完整的Druid集群包含五种核心节点类型&#xff0c;每种节点都有明确的职责边界&#xff1a;Coordinator节点&#xff1a;负责管理数据分片&…

作者头像 李华
网站建设 2026/7/22 4:57:05

嵌入式工程师18K薪资进阶指南：从核心技能到项目实战

1. 项目概述&#xff1a;从零到“上岸”的嵌入式工程师养成记“月入18K的嵌入式上岸日记”&#xff0c;这个标题精准地戳中了当下无数电子、自动化、计算机相关专业学生和初入职场工程师的痛点与渴望。“上岸”一词&#xff0c;早已超越了考公考编的范畴&#xff0c;在技术圈里…

作者头像 李华
网站建设 2026/7/22 4:56:18

基于YOLOv8的手势识别与智能家居控制实践

1. 项目概述&#xff1a;手势识别与智能设备控制的现实意义手势识别作为人机交互的重要方式&#xff0c;正在从实验室走向日常生活。我最近完成的这个项目&#xff0c;通过YOLOv8/v11实现了高精度手势识别&#xff0c;并将其与智能家居设备控制系统深度整合。这套系统能够识别包…

作者头像 李华
网站建设 2026/7/22 4:55:56

C++11核心特性解析与性能优化实践

1. 为什么C11值得你立即升级&#xff1f;2003年发布的C98标准统治了C生态近十年&#xff0c;直到2011年C11标准的出现彻底改变了游戏规则。作为一名从C98时代走过来的老程序员&#xff0c;我至今记得第一次接触C11时那种"原来代码还能这样写"的震撼感。auto关键字让模…

作者头像 李华
网站建设 2026/7/22 4:55:54

AI论文写作工具：从文献管理到智能协作的全面评测

1. AI论文写作工具革命&#xff1a;从辅助到协作的范式转变作为一名在学术圈摸爬滚打十年的研究者&#xff0c;我见证了论文写作工具从EndNote到Zotero的文献管理进化&#xff0c;但AI工具的涌现彻底改变了游戏规则。2023年Nature调查显示&#xff0c;63%的科研人员已在论文写作…

作者头像 李华