介绍

GridView和ListView的大多数参数都是相同的，它们的含义也都相同，

唯一需要关注的是gridDelegate参数，类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列(layout)

Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithFixedCrossAxisCount

该子类实现了一个横轴为固定数量子元素的layout算法

crossAxisCount 横轴子元素的数量

mainAxisSpacing 主轴方向的间距

crossAxisSpacing 横轴方向子元素的间距

childAspectRatio
子元素在横轴长度和主轴长度的比例。

由于crossAxisCount指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度

可以发现，子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的。注意，这里的子元素指的是子组件的最大显示空间，注意确保子组件的实际大小不要超出子元素的空间。

可以有以下两种定义方式
GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, //横轴三个子widgetchildAspectRatio: 1.0 //宽高比为1时，子widget)
)GridView.count( crossAxisCount: 3,childAspectRatio: 1.0,
)

SliverGridDelegateWithMaxCrossAxisExtent

该子类实现了一个横轴子元素为固定最大长度的layout算法

maxCrossAxisExtent为子元素在横轴上的最大长度，之所以是“最大”长度，是因为横轴方向每个子元素的长度仍然是等分的，举个例子，如果ViewPort的横轴长度是450，那么当maxCrossAxisExtent的值在区间[450/4，450/3)内的话，子元素最终实际长度都为112.5，而childAspectRatio所指的子元素横轴和主轴的长度比为最终的长度比。其它参数和SliverGridDelegateWithFixedCrossAxisCount相同。

两种方式是等价的
GridView(padding: EdgeInsets.zero,gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(maxCrossAxisExtent: 120.0,childAspectRatio: 2.0 //宽高比为2),children: <Widget>[Icon(Icons.ac_unit),Icon(Icons.airport_shuttle),Icon(Icons.all_inclusive),Icon(Icons.beach_access),Icon(Icons.cake),Icon(Icons.free_breakfast),],
);GridView.extent(maxCrossAxisExtent: 120.0,childAspectRatio: 2.0,children: <Widget>[Icon(Icons.ac_unit),Icon(Icons.airport_shuttle),Icon(Icons.all_inclusive),Icon(Icons.beach_access),Icon(Icons.cake),Icon(Icons.free_breakfast),],);

GridView.builder

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main() {runApp(MyAppText());
}class MyAppText extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(backgroundColor: Colors.red,title: Text('GridView练习'),textTheme:TextTheme(title: TextStyle(fontSize: 18, color: Colors.yellow)),),body: GridViewClass(),),);}
}class GridViewClass extends StatelessWidget {@overrideWidget build(BuildContext context) {List<String>list=new List();list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844156&di=f1c754f5753835912ddf00f763e13e65&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Ffd039245d688d43fb6973ae77d1ed21b0ef43bec.jpg');list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844156&di=21132fe8a0731c3f3823a2602b5bb6c3&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F023b5bb5c9ea15ce1274e73ab4003af33a87b26e.jpg');list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844155&di=21f352bf854d3546967dd9c5f199c467&imgtype=0&src=http%3A%2F%2Fimg1.lukou.com%2Fstatic%2Fp%2Fblog%2Fmedium%2F0007%2F15%2F94%2F26%2F7159426.jpg');list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844154&di=66885dff3735acc2170b4c3c6290ef03&imgtype=0&src=http%3A%2F%2Fcbu01.alicdn.com%2Fimg%2Fibank%2F2016%2F415%2F534%2F3377435514_434466171.jpg');list.add('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591940844152&di=732c41d365e9c0c25c95745f6c12b96e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181220%2F4866e7e0dd434dc9aa8da2c6ccc436d6.jpg');return GridView.builder(itemCount: list.length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4,childAspectRatio: 1),itemBuilder: (BuildContext context,var index){return Image.network(list[index],fit: BoxFit.fill,);});}
}

Flutter组件学习（19）GridView相关推荐

Flutter组件学习（二）—— Image
序言上一节中,我们讲了 Flutter 中 Text 组件的一些用法以及 API,本节我们继续学习 Flutter 中的 Image 组件,同样先上图: Image组件的构造方法在 Android ...
Flutter组件学习（13）层叠布局Stack、Positioned
介绍层叠布局和Web中的绝对定位.Android中的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置.绝对定位允许子组件堆叠起来(按照代码中声明的顺序) Stack ali ...
Flutter组件学习（7）输入框TextField
目录常用属性介绍 TextFild应用 TextEditingController 光标位置常用属性介绍 decoration 设置输入框的外观 InputDecoration,decor ...
Flutter组件学习之自定义画板绘制圆形——筑梦之路
import 'package:flutter/material.dart';/*** 自定义画板* 绘制圆形*/ void main() => runApp(new MyApp());clas ...
Flutter学习笔记--Gridview网格组件制作相册
Flutter学习笔记–Gridview网格组件制作相册效果: GridView可以构建一个二维网格列表,其官方定义参考: https://book.flutterchina.club/chapte ...
【Flutter学习】组件学习之目录
01. Flutter组件-Layout-Container-容器 02. Flutter组件-Text-Text-文本 03. Flutter组件-Text-RichText-富文本 04. ...
flutter 九宫格菜单_flutter GridView 九宫格
我收集了一些学习用的资料,其中包含了很多学习,面试,中高进阶fluuter资料,还有很多视频详解,如果有同学想进一步了解,详情请看文末.也欢迎各路大神门前来装X. 1 引言 GridView是常用可滚 ...
dart语言Flutter组件表
Image组件中可用的属性 Image组件的构造方法来加载图片资源 Image对象的属性来控制图片的渲染效果属性名意义值类型 alignment 设置图片的对齐方式 AlignmentGeome ...
Flutter新手入门常用组件总结，让你了解更多的Flutter组件？
Flutter常用组件 1.MaterialApp 2.Scaffold 3.Container 4.BoxDecoration(装饰器) 5.Row(横向排布) 6.Column(纵向排布) 7.E ...

Flutter组件学习（19）GridView

介绍

SliverGridDelegateWithFixedCrossAxisCount

SliverGridDelegateWithMaxCrossAxisExtent

GridView.builder

Flutter组件学习（19）GridView相关推荐

最新文章

热门文章

crossAxisCount	横轴子元素的数量
mainAxisSpacing	主轴方向的间距
crossAxisSpacing	横轴方向子元素的间距
childAspectRatio	子元素在横轴长度和主轴长度的比例。由于`crossAxisCount`指定后，子元素横轴长度就确定了，然后通过此参数值就可以确定子元素在主轴的长度