【Flutter】GridView使用之总结篇

最新推荐文章于 2024-10-09 18:05:27 发布
最新推荐文章于 2024-10-09 18:05:27 发布
阅读量1.6k 收藏
点赞数
分类专栏： Flutter 文章标签： Flutter GridView GridView的几种使用方式 GridView.builder GridView.custom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jking54/article/details/95375069
版权
本文详细介绍了Flutter中GridView的五种使用方式，包括GridView.count、GridView.extent、直接使用GridView、GridView.builder以及GridView.custom。分别阐述了它们的特点和应用场景，如GridView.count适用于交叉轴固定数量的Item，而GridView.extent则根据最大尺寸自动调整。文章还提供了相关文章链接以深入学习。
摘要由CSDN通过智能技术生成

GridView的几种使用方式

  • GridView.count(@required int crossAxisCount)
  • GridView.extent(@required double maxCrossAxisExtent)
  • GridView(@required this.gridDelegate,List children)
  • GridView.builder(@required this.gridDelegate,@required IndexedWidgetBuilder itemBuilder)
  • GridView.custom(@required this.gridDelegate,@required this.childrenDelegate)

GridView.count(@required int crossAxisCount)

使用这种方式，必须要传的一个参数就是crossAxisCount，即交叉轴（默认是横轴）上Item的个数。

使用这种方式创建的GridView，交叉轴上的Item个数是固定的，并且Item的宽高不由自己决定，而是在交叉轴上均分，当然也可以通过mainAxisSpacing/
crossAxisSpacing来控制Item之间的间距。可以通过childAspectRatio控制Item的宽高比。

具体的使用方式可以查看我之前的文章GridView.count的使用

最低0.47元/天 解锁文章
姜康
关注
专栏目录
Flutter 基础（二）基本组件GridView
danfengw的博客
04-08 565
GridView 常用属性 padding：内边距 crossAxisSpacing：网格间的空隙 mainAxisSpacing: 网格间主轴方向的空隙（类似marginTop/marginBottom） childAspectRatio: 宽高比 crossAxisCount：网格列数 创建方式 方式一 GridView.count( crossAxisCount: 3, ...
Flutter 组件抽取：自适应每行最高 item 高度的 GridView（OptionGridView）
zeqiao的博客
05-01 2859
自适应每行最高 item 高度的 GridView，多用于多入口选项，且选项高度会因选项 tag 的不同而不断变化的场景。
flutter自定义debug横幅
最新发布
weixin_42285486的博客
10-09 313
它用于控制是否显示屏幕右上角的 “DEBUG” 横幅，主要在。下出现，设置为true时，显示横幅。是 Flutter 框架中。
Flutter GridView设置宽高
热门推荐
trues的博客
11-15 2万+
GridView设置宽高场景关键属性使用 场景 我们在使用GridView的时候 child在列表中所占大小宽高是一致的，但是往往我们需求不是的。 关键属性 ///每个孩子的横轴与主轴范围的比率。 child的宽高比 常用来处理child的适配 childAspectRatio 使用 我们只需要设置对应的宽高比就可了 return GridView.count( // paddi...
Flutter GridView 自定义宽高
杰森丶郭达斯坦森的博客
06-26 3337
/一行多少个crossAxisSpacing: 20, //设置列间距mainAxisSpacing: 10, //设置行间距),
3_flutter_黑色主题,Listview(列表),GridView(网格)
weixin_33713350的博客
02-23 493
1_黑色主题 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( ...
Flutter之GridView
01-08
#资料 基本 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class GridViewWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(Container), ), body: GridView.count(
Flutter GridView网格布局
10-05
GridView 是一个网格布局的列组件。GridView 继承至 CustomScrollView，有 CustomScrollView 的特性。
flutter-GridView使用
weixin_43575775的博客
08-03 1629
flutter-GridView组件配合SingleChildScrollView组件使用
Flutter GridView组件以及动态GridView
01-07
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //StatefulWidget:有状态组件，状态可以改变 //fluter中一切都是组件...
flutter学习之GridView
隔壁小王的博客
11-22 1257
GridView Gridview可以实现多维网格布局，最主要的属性gridDelegate， 类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列。如果不设置此属性，则必然报错 SliverGridDelegate是一个抽象类，Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossA...
flutter gridview 自适应_Flutter基础控件介绍
weixin_39769091的博客
11-30 2437
StatefulWidget动态组件，开发中需要改变状态，使用动态组件StatelessWidget静态组件，定义后不会再改变组件按照功能分类1. 基础类组件基础组件 Text(文本)，Image(图片)，xxButton(按钮)，TextField(输入框)，Form(表单)Text('Hello World');Form单独说一下Form组件​ 实际业务中，在正式向服务器提交数据前，都会对...
android gridview圆脚焦点,Flutter GridView 使用
weixin_42509803的博客
05-31 138
屏幕快照 2019-09-19 13.50.30.png今天学习一下在Flutter中怎么使用GridView，效果如上图。头部是一个Banner，使用的是第三方的flutter_swiper: ^1.0.6四个按钮就是使用的GridView 直接上代码，以下代码就是对四个按钮的封装import 'package:flutter/material.dart';class PublisGridVie...
GridView中item高度自适应
weixin_34146410的博客
11-11 857
2019独角兽企业重金招聘Python工程师标准>>> ...
flutter ListView自适应高度的2种写法
hacjy
11-11 4330
flutter ListView自适应高度的2种写法。
Flutter GridView的使用
男儿不展风云志，空负天生八尺躯。
04-13 511
一，效果图 二，看代码 import 'package:flutter/material.dart'; //样式 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: impl...
Flutter-GridView
Clear亮的博客
06-04 434
Flutter组件之GridView ##创建方式一： GridView.count(crossAxisCount); GridView.custom(gridDelegate, childrenDelegate); GridView.builder(gridDelegate, itemBuilder); GridView.extent(maxCrossAxisExtent); GridV...
【Flutter】GridView的使用之GridView.extent
开发简记
07-06 2167
想了解更多关于Flutter的知识，可以关注： https://github.com/jiangkang/flutter-system https://jiangkang.tech 在上一篇文章 GridView.count 中讲过 GridView.count的用法，这里讲一下GridView.extent的用法。 GridView.count 是在交叉轴上创建固定个数的Item，cross...
Flutter的staggered GridView详细使用
haoxuhong的博客
03-05 5325
一、简介 flutter staggered gridview是一个支持多列网格大小不同的布局，且Android、iOS、Web都适用 在这种布局中每个单元格都可以称为一个Tile。 它有以下几种特性： 可以像GridView一样设置多列 在纵轴和主轴上可以设置Tile的个数或者所占用的比例（如crossAxisCount：4，StaggeredTile.fit(2)则表示在纵轴上有两列，如果StaggeredTile.fit(1)则表示在纵轴上有4列，如果使用StaggeredTile.Coun
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值