GridView组件的常用参数:

名称 类型 说明
scrollDirection
Axis
滚动方法
padding
EdgeInsetsGeometry
内边距
resolve
bool
组件反向排序
crossAxisSpacing
double
水平子 Widget 之间间距
mainAxisSpacing
double
垂直子 Widget 之间间距
crossAxisCount
int
一行的 Widget 数量
childAspectRatio
double
子 Widget 宽高比例
children
 
<Widget>[]
gridDelegate
SliverGridDelegateWithFix
edCrossAxisCount(常用)
SliverGridDelegateWithMax
CrossAxisExtent 
控制布局主要用在
GridView.builder 里面
  • GridView.count实现静态网格布局

  1. import 'package:flutter/material.dart';
  2.  
  3. void main(){
  4. runApp(MaterialApp(
  5. title: "GridView",
  6. home: MyApp(),
  7. ));
  8. }
  9.  
  10. class MyApp extends StatelessWidget {
  11. @override
  12. Widget build(BuildContext context) {
  13. return Scaffold(
  14. body: GridView.count(
  15. crossAxisCount: 2,
  16. mainAxisSpacing: 10.0,
  17. crossAxisSpacing: 10.0,
  18. padding: EdgeInsets.all(5.0),
  19. children: <Widget>[
  20. Container(
  21. color: Colors.pink,
  22. ),
  23. Container(
  24. color: Colors.pink,
  25. ),
  26. Container(
  27. color: Colors.pink,
  28. ),
  29. Container(
  30. color: Colors.pink,
  31. ),
  32. Container(
  33. color: Colors.pink,
  34. ),
  35. Container(
  36. color: Colors.pink,
  37. ),
  38. Container(
  39. color: Colors.pink,
  40. ),
  41. Container(
  42. color: Colors.pink,
  43. ),
  44. ],
  45. ),
  46. );
  47. }
  48. }
  • GridView.builder实现动态网格列表

  1. import 'package:flutter/material.dart';
  2.  
  3. void main(){
  4. runApp(MaterialApp(
  5. title: "GridView",
  6. home: MyApp(),
  7. ));
  8. }
  9.  
  10. class MyApp extends StatelessWidget {
  11. List list = new List<String>();
  12. MyApp() {
  13. for(var i = 0; i < 9; i++) {
  14. this.list.add("图片$i");
  15. }
  16. }
  17.  
  18. @override
  19. Widget build(BuildContext context) {
  20. return Scaffold(
  21. body: GridView.builder(
  22. gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // 注意,使用了GridView.builder,又要设置网格属性的话,要用这个属性!
  23. crossAxisCount: 3,
  24. mainAxisSpacing: 10.0,
  25. crossAxisSpacing: 10.0,
  26. ),
  27. itemCount: this.list.length,
  28. itemBuilder: (context,index) {
  29. return Container(
  30. color: Colors.pink,
  31. child: Center(
  32. child: Text(this.list[index]),
  33. )
  34. );
  35. }
  36. )
  37. );
  38. }
  39. }

Flutter——GridView组件(网格列表组件)的更多相关文章

  1. Flutter中的可滚动列表组件-PageView

    PageVIew,可滚动的视图列表组件,而且每一个子组件的大小都和视图窗口大小一样. 属性: controller -> PageController 用于控制视图页面滚动到的位置 childr ...

  2. 【Flutter学习】基本组件之基本网格Gradview组件

    一,概述 数据量很大的时用矩阵方式排列比较清晰,此时用网格列表组件,即为GridView组件,可实现多行多列的应用场景. 使用GridView创建网格列表有多种方式: GridView.count 通 ...

  3. flutter GridView 网格布局

    当数据量很大的时候用矩阵方式排列比较清晰.此时我们可以用网格列表组件 GridView 实 现布局. GridView 创建网格列表有多种方式,常用有以下两种. 1.可以通过 GridView.cou ...

  4. Flutter学习笔记(12)--列表组件

    如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...

  5. flutter中的列表组件

    列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类:  垂直列表 ...

  6. Flutter 实战(一):列表项内容可自定义的列表组件

    前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解 ...

  7. Android精通:View与ViewGroup,LinearLayout线性布局,RelativeLayout相对布局,ListView列表组件

    UI的描述 对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...

  8. Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作

    1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: acit ...

  9. Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作

    1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: aci ...

随机推荐

  1. iOS——偏好设置的创建,数据写入与读取

    NSUserDefaults与NSDictinary? 应用通过NSUserDefaults用键值对的方式来读取和保存偏好设置数据,与通过键从NSDictionary对象中获取数据一样,不同之处在于N ...

  2. tf.contrib.layers.fully_connected参数笔记

    tf.contrib.layers.fully_connected 添加完全连接的图层. tf.contrib.layers.fully_connected(    inputs,    num_ou ...

  3. 【并行计算与CUDA开发】英伟达硬件加速编解码

    硬件加速 并行计算 OpenCL OpenCL API VS SDK 英伟达硬件编解码方案 基于 OpenCL 的 API 自己写一个编解码器 使用 SDK 中的编解码接口 使用编码器对于 OpenC ...

  4. $.ajax 中的contentType类型

    参考链接:https://www.jianshu.com/p/f4d92b3d387d

  5. 带你手写基于 Spring 的可插拔式 RPC 框架(三)通信协议模块

    在写代码之前我们先要想清楚几个问题. 我们的框架到底要实现什么功能? 我们要实现一个远程调用的 RPC 协议. 最终实现效果是什么样的? 我们能像调用本地服务一样调用远程的服务. 怎样实现上面的效果? ...

  6. js中函数总结(1)

    8.1函数定义js的函数可以嵌套在其他函数的定义中,这样它们就可以访问它们被定义时所处的作用域中的任何变量.意味着js函数构成了一个闭包:function name(){} 特殊的:函数表达式有时定义 ...

  7. java核心技术(第四章)对象与类

    4.1 面向对象程序设计概述 每个对象包含对用户公开的特定功能部分和隐藏的实现部分. 4.1.1类 由类构造对象的过程称为创建类的实例. 封装(数据隐藏)是与对象有关的.从形式上看,封装不过是将数据和 ...

  8. LoadRunner编程之文件的操作

    这篇文章主要写下LoadRunner下如何进行文件的操作. 1,文件的声明 LoadRunner不支持FILE数据类型,所以在LoadRunner中用int来声明一个文件: int MyFile; 2 ...

  9. TypeScript的变量声明

    1.全新的变量声明方式 let和const是JavaScript ES6中新添加的变量声明方式.let在很多方面与var是相似的,但是它可以避免一些在JavaScript里常见一些问题. 而const ...

  10. TheSierpinskiFractal(POJ-1941)【递推】

    题意:用‘\’,'/','_'按照给定规则画出三角形 题目链接:https://vjudge.net/problem/POJ-1941 思路:题中的三角形生成规则是符合递推关系的,可以先手动完成第一个 ...