【Flutter】GridView的使用之GridView.extent

最新推荐文章于 2024-08-17 19:12:31 发布
最新推荐文章于 2024-08-17 19:12:31 发布
阅读量2.1k 收藏
点赞数 2
分类专栏： Flutter 文章标签： Flutter Flutter GridView GridView.extent GridView.count 与 GridView.extent的区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jking54/article/details/94915915
版权

想了解更多关于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 2228
Flutter开发中，表格组件是经常要用到的，表格展示数据也是App开发过程中不可缺少的需求的功能，其实Gridview的属性和ListView的属性很接近，那么本篇文章就来聊聊Flutter开发中表格组件Gridview的简单使用。 Gridview常用的几种方式： 1、GridView.count(@required int crossAxisCount) GridView.count的使用，需要传的是int类型的参数，也就是创建固定数量的item，crossAxisCount表示横轴it..
【Flutter】GridView使用之总结篇
开发简记
07-10 1670
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 381
flutter 之 GridView 中.count .extent .builder的使用SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent 用法
Flutter Listview 缓存item滑动后不进行重新渲染
最新发布
Ican
08-17 359
运行发现，keepAlive为true时每个Item都缓存了，为false时，每个Item都会重新创建，OK。
Flutter中网格布局GridView的用法
juer2017的博客
04-10 554
Flutter中网格布局GridView的用法介绍
Flutter GridView的使用
男儿不展风云志，空负天生八尺躯。
04-13 504
一，效果图 二，看代码 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 690
GridView可以构建一个二维网格列表 属性 gridDelegate 类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列(layout)。 SliverGridDelegate是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWi
【Flutter】使用GridView实现二维网格列表
sinat_36955332的博客
09-21 566
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 GridView 九宫格
android1396的博客
07-14 397
我收集了一些学习用的资料，其中包含了很多学习，面试，中高进阶fluuter资料，还有很多视频详解，如果有同学想进一步了解，详情请看文末。也欢迎各路大神门前来装X。 1 引言 GridView是常用可滚动组件之一，在Flutter中通常使用GridView构建二维网格列表，GridView创建方法有五种，描述如下 GridView的构造函数方法，一次性构建所有的子条目，适用于少量数据 GridView.builder方式来构建，懒加载模式，适用于大量数据的情况 GridView.count方式来构建，适用于固
flutter 实战 之 GridView
wniuniu_的博客
07-29 2764
如何利用 GridView.
Flutter GridView网格布局
10-05
GridView 是一个网格布局的列组件。GridView 继承至 CustomScrollView，有 CustomScrollView 的特性。
Flutter组件GridView使用介绍
WriteBug001的博客
01-10 1965
GridView 是 Flutter 中用于创建网格布局的滚动小部件。它可以创建多列布局，并且每个网格单元可以包含一个小部件。GridView：最通用的构造函数，完全自定义网格布局。：按需构建网格项，适用于具有大量（或无限）网格项的动态内容。：指定网格中的列数，适用于具有固定数量列的网格。：指定网格中最大交叉轴范围（例如，最大列宽），适用于需要控制列宽的网格。：这个构造函数提供了最高级别的自定义能力，允许使用自定义的SliverGridDelegate和SliverChildDelegate。
Flutter 中的网格视图 GridView 类型
iCloudEnd的博客
04-11 448
Flutter 提供了广泛的小部件来创建不同类型的 UI。今天我们将看到如何构建一个GridView.gridview flutter 为我们提供了一个 widget 调用GridView，用于创建可滚动的 widget 网格。
Flutter学习笔记07-GridView组件
convex1009848621的博客
11-07 268
GridView的三种使用，count、extent、builder
flutter -------- GridView的使用
weixin_30276935的博客
04-18 110
使用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 131
屏幕快照 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 2199
Flutter中GridView的使用
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值