【Flutter】GridView的使用之GridView.extent

最新推荐文章于 2025-03-10 20:10:22 发布
最新推荐文章于 2025-03-10 20:10:22 发布
阅读量2.2k 收藏
点赞数 2
分类专栏： Flutter 文章标签： Flutter Flutter GridView GridView.extent GridView.count 与 GridView.extent的区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jking54/article/details/94915915
版权
本文深入探讨了Flutter框架中GridView.extent的使用方法，解释了如何通过设置maxCrossAxisExtent来动态调整Item的数量和宽度，以适应不同的屏幕尺寸。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

想了解更多关于Flutter的知识，可以关注：
https://github.com/jiangkang/flutter-system
https://jiangkang.tech

在上一篇文章 GridView.count 中讲过 GridView.count的用法，这里讲一下GridView.extent的用法。

GridView.count 是在交叉轴上创建固定个数的Item，crossAxisCount为必须的属性，表示交叉轴Item的个数；
GridView.extent是在交叉轴上创建最大可容纳的Item，maxCrossAxisExtent是必须的属性，表示交叉轴上Item最大的宽度；

如果GridView的主轴是纵轴，横轴是交叉轴（默认情况），设定交叉轴的宽度为500px，maxCrossAxisExtent 为 150，由于4x150 < 500 < 5 x150，因此Item有4个，500px/ 4 = 125px,因此Item的宽度为125px（不考虑Item之间的间距）。

下面看一下具体的例子：

  • maxCrossAxisExtent = 1000:
    在这里插入图片描述
  • maxCrossAxisExtent = 100:
    在这里插入图片描述
  • maxCrossAxisExtent = 10:
    在这里插入图片描述
Flutter开发：Gridview的使用
全沾软贱开发攻城狮
04-29 1万+
Flutter开发中，表格组件是经常要用到的，表格展示数据也是App开发过程中不可缺少的需求的功能，其实Gridview的属性和ListView的属性很接近，那么本篇文章就来聊聊Flutter开发中表格组件Gridview的简单使用。 Gridview常用的几种方式： 1、GridView.count(@required int crossAxisCount) GridView.count的使用，需要传的是int类型的参数，也就是创建固定数量的item，crossAxisCount表示横轴it..
【Flutter】GridView使用之总结篇
开发简记
07-10 1737
GridView的几种使用方式 GridView.count(@required int crossAxisCount) GridView.extent(@required double maxCrossAxisExtent) GridView(@required this.gridDelegate,List children) GridView.builder(@required this.g...
flutter 之 GridView 中.count .extent .builder的使用
艾米的猫儿的博客
02-01 434
flutter 之 GridView 中.count .extent .builder的使用SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent 用法
Flutter GridView 组件：动态 GridView 详解
最新发布
m0_57836225的博客
03-10 877
在 Flutter 开发中，GridView组件是用于展示网格布局的常用组件。它能以网格形式排列子项，在构建图片墙、商品列表等场景中应用广泛。本文将深入讲解GridView组件，尤其是动态GridView，并结合代码示例帮助理解。
Flutter中网格布局GridView的用法
juer2017的博客
04-10 716
Flutter中网格布局GridView的用法介绍
Flutter GridView的使用
男儿不展风云志，空负天生八尺躯。
04-13 538
一，效果图 二，看代码 import 'package:flutter/material.dart'; //样式 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: impl...
Flutter组件GridView
Android_小菜菜的博客
06-09 738
GridView可以构建一个二维网格列表 属性 gridDelegate 类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列(layout)。 SliverGridDelegate是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWi
【Flutter】使用GridView实现二维网格列表
sinat_36955332的博客
09-21 668
1 GridView构造函数 GridView({ Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap = false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDe
【Flutter】十七、Flutter中常用的布局容器——网格布局GridView
MAXLZ的博客
10-15 1962
一、使用GridView的多种方式1.1 GridView()1.2 GridView.count()1.3 GridView.builder()1.4 GridView.custom()1.5 GridView.extent()二、flutter_staggered_grid_view 一、使用GridView的多种方式 1.1 GridView() GridView({ Key ke...
flutter 实战 之 GridView
wniuniu_的博客
07-29 3008
如何利用 GridView.
Flutter GridView网格布局
10-05
GridView 是一个网格布局的列组件。GridView 继承至 CustomScrollView，有 CustomScrollView 的特性。
Flutter组件GridView使用介绍
WriteBug001的博客
01-10 2635
GridView 是 Flutter 中用于创建网格布局的滚动小部件。它可以创建多列布局，并且每个网格单元可以包含一个小部件。GridView：最通用的构造函数，完全自定义网格布局。：按需构建网格项，适用于具有大量（或无限）网格项的动态内容。：指定网格中的列数，适用于具有固定数量列的网格。：指定网格中最大交叉轴范围（例如，最大列宽），适用于需要控制列宽的网格。：这个构造函数提供了最高级别的自定义能力，允许使用自定义的SliverGridDelegate和SliverChildDelegate。
Flutter 中的网格视图 GridView 类型
iCloudEnd的博客
04-11 486
Flutter 提供了广泛的小部件来创建不同类型的 UI。今天我们将看到如何构建一个GridView.gridview flutter 为我们提供了一个 widget 调用GridView，用于创建可滚动的 widget 网格。
Flutter学习笔记07-GridView组件
convex1009848621的博客
11-07 338
GridView的三种使用，count、extent、builder
flutter -------- GridView的使用
weixin_30276935的博客
04-18 138
使用GridView将widget放置为二维列表。 GridView提供了两个预制list，或者您可以构建自定义网格。当GridView检测到其内容太长而不适合渲染框时，它会自动滚动。 GridView 概览 在网格中放置widget 检测列内容超过渲染框时自动提供滚动 构建您自己的自定义grid，或使用一下提供的grid之一: GridView.count允许您指定列数...
42、Flutter之GridView组件详解
热门推荐
wywinstonwy的专栏
01-21 1万+
GridView GridView可以构建一个二维网格列表，其默认构造函数定义如下： GridView({ Key? key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController? controller, bool? primary, ScrollPhysics? physics, bool shrinkWrap = false, E
android gridview圆脚焦点,Flutter GridView 使用
weixin_42509803的博客
05-31 171
屏幕快照 2019-09-19 13.50.30.png今天学习一下在Flutter中怎么使用GridView，效果如上图。头部是一个Banner，使用的是第三方的flutter_swiper: ^1.0.6四个按钮就是使用的GridView 直接上代码，以下代码就是对四个按钮的封装import 'package:flutter/material.dart';class PublisGridVie...
第五章：Scrollable Widgets(四) --GridView
Waruler的博客
04-17 2249
Flutter中GridView的使用
flutter listview gridview
02-26
### Flutter 中 ListView 和 GridView 的使用教程及区别 #### ListView 组件概述 `ListView` 是一种用于展示一维线性列表的组件，在 Flutter 应用开发中非常常见。此组件支持垂直和水平方向上的项目排列，并能够处理静态或动态的数据源[^1]。 ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('ListView Example')), body: ListView(children: [ ListTile(title: Text('Item 1')), Divider(), ListTile(title: Text('Item 2')), Divider(), // 更多子项... ]), ), ); } } ``` #### GridView 组件概述 `GridView` 提供了一种更加灵活的方式来创建二维网格布局，适用于需要以行列形式展示多个项目的场景。它同样可以适应固定数量或是通过构建器按需加载更多条目的情况[^2]。 ```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @Override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData(primarySwatch: Colors.blue), home: Scaffold( appBar: AppBar(title: const Text('Grid View Example')), body: GridView.count( crossAxisCount: 2, children: List.generate(10, (index) { return Center(child: Text('Item $index')); }), ), ), ); } } ``` #### 主要差异点分析 - **滚动维度**：`ListView` 默认情况下仅允许在一轴上滚动（通常是纵向），而 `GridView` 支持两轴间的交互操作，即可以在横向与纵向上同时进行滚动。 - **布局模式**：前者采用的是简单的线性布局方式；后者则提供了更为复杂的网格状布局选项，如 `count` 或者 `extent` 来定义每行/列中的单元格数目及其大小限制[^3]。 - **性能考量**：当涉及到大量数据渲染时，两者都可通过设置特定参数优化性能表现。对于 `ListView` 而言，可以通过配置 `shrinkWrap` 属性减少不必要的重绘开销；而对于 `GridView` ，利用 `builder` 构造函数能有效提升效率并降低内存占用。 #### 解决嵌套冲突的方法 如果在一个 `ListView` 内部想要放置另一个可滚动的小部件比如 `GridView` , 需要注意防止二者之间的滚动事件相互干扰。解决方案之一是在外部容器处指定 `NeverScrollableScrollPhysics()` 物理特性以及开启 `shrinkWrap` 参数来调整内部尺寸计算逻辑。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值