Futter基础第6篇：实现网格布局【GridView、GridView.count、GridView.builder】

一丶效果图

【1】简单的网格布局

【2】循环遍历假数据，实现网格布局

【3】GridView.count 动态获取数据并实现网格布局

【4】GridView.builder 动态获取数据并实现网格布局

二丶代码+注释

【1】简单的网格布局

import 'package:flutter/material.dart';void main()=>runApp(MyApp());class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(home:Scaffold(appBar: AppBar(title: Text('Flutter Demo'),),body: HomeContent(),));}
}class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn GridView.count(    //网格组件crossAxisCount: 2,    //控制网格列数children: <Widget>[     //控制网格元素Text('这是一个文本'), //孩子元素Text('这是一个文本'),Text('这是一个文本'),Text('这是一个文本'),Text('这是一个文本'),Text('这是一个文本'),Text('这是一个文本'),Text('这是一个文本'),Text('这是一个文本')],);}
}

【2】循环遍历假数据，实现网格布局

...
...class HomeContent extends StatelessWidget{List<Widget> _getlistData(){List<Widget> list = new List();for(var i=0;i<20;i++){list.add(Container(alignment: Alignment.center,child: Text('这是第$i条数据',style: TextStyle(color: Colors.white,fontSize: 20),),color: Colors.blue,
//        height: 400,    //设置高度没有反应,));}return list;}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn GridView.count(    //网格组件crossAxisSpacing: 20.0, //水平子Widget 之间的间距mainAxisSpacing: 20.0,  //垂直子Widget 之间的间距padding: EdgeInsets.all(10),  //与View上下左右间隔10crossAxisCount: 2,    //控制网格列数childAspectRatio: 0.7,    //宽度和高度的比例children: this._getlistData() //返回的是Widget);}
}

【3】GridView.count 动态获取数据并实现网格布局

在开头记得导入外部数据的dart文件，如下：

List listData=[{"title":'Candy Shop',"author":'Mohamed Chahin',"imageUrl":'https://www.itying.com/images/flutter/1.png',},{"title":'Childhood in a picture',"author":'Google',"imageUrl":'https://www.itying.com/images/flutter/2.png',},{"title":'Alibaba Shop',"author":'Alibaba',"imageUrl":'https://www.itying.com/images/flutter/3.png',},{"title":'Candy Shop',"author":'Mohamed Chahin',"imageUrl":'https://www.itying.com/images/flutter/4.png',},{"title":'Tornado',"author":'Mohamed Chahin',"imageUrl":'https://www.itying.com/images/flutter/5.png',}
];

main.dart

import 'package:flutter/material.dart';import 'res/listData.dart';...
...class HomeContent extends StatelessWidget{List<Widget> _getlistData(){var tempList = listData.map((value){return Container(child: Column(            //注意，这里也可以用ListView来获取数据，但是ListView的不足在它会自适应宽度，也就是平铺整个宽度children: <Widget>[     //但是，Column不会，他只会显示元素多大就是多大，而且是自动垂直排列Image.network(value['imageUrl']),SizedBox(height: 10,),    //让Text与Image有10的间距Text(value['title'],textAlign: TextAlign.center,style: TextStyle(fontSize: 15),)],),decoration: BoxDecoration(    //边框类border: Border.all(         //设置边框样式color: Color.fromRGBO(233, 233, 233, 0.9),  //颜色width: 1    //边框宽度)),);});return tempList.toList();}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn GridView.count(    //网格组件    —   列表布局crossAxisSpacing: 20.0, //水平子Widget 之间的间距mainAxisSpacing: 20.0,  //垂直子Widget 之间的间距padding: EdgeInsets.all(10),  //与View上下左右间隔10crossAxisCount: 2,    //控制网格列数//        childAspectRatio: 0.7,    //宽度和高度的比例children: this._getlistData() //返回的是Widget);}
}

【4】GridView.builder 动态获取数据并实现网格布局

import 'package:flutter/material.dart';import 'res/listData.dart';...
...class HomeContent extends StatelessWidget{Widget _getlistData(context,index){return Container(child: Column(            //注意，这里也可以用ListView来获取数据，但是ListView的不足在它会自适应宽度，也就是平铺整个宽度children: <Widget>[     //但是，Column不会，他只会显示元素多大就是多大，而且是自动垂直排列Image.network(listData[index]['imageUrl']),SizedBox(height: 10,),    //让Text与Image有10的间距Text(listData[index]['title'],textAlign: TextAlign.center,style: TextStyle(fontSize: 15),)],),decoration: BoxDecoration(    //边框类border: Border.all(         //设置边框样式color: Color.fromRGBO(233, 233, 233, 0.9),  //颜色width: 1    //边框宽度)),);}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn GridView.builder(    //网格组件    —   列表布局/*** 说明一下，这里写这个方法的作用是，因为当我们使用GridView.builder时，我们不能再将元素的样式放在外边，而是* 应该要借助下面这个类，才能去填写样式，否则会报错*/gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisSpacing: 20.0, //水平子Widget 之间的间距mainAxisSpacing: 20.0,  //垂直子Widget 之间的间距crossAxisCount: 2,    //控制网格列数),itemCount: listData.length,       //数据长度itemBuilder: this._getlistData    );}
}

三丶知识点

GridView 组件的常用参数
当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组件 GridView 实
现布局。
GridView 创建网格列表有多种方式，下面我们主要介绍两种。
1、可以通过 GridView.count 实现网格布局
2、通过 GridView.builder 实现网格布局

常用属性：

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

四丶笔记

1、Container 不是布局，是容器！

2、网格组件，也叫列表布局

Futter基础第6篇：实现网格布局【GridView、GridView.count、GridView.builder】相关推荐

Futter基础第3篇：实现引用远程图片、本地图片、实现圆形图片，实现圆角图片【Image.network、Image.asset、BorderRadius.circular（150）】
文章目录一丶效果图二丶代码+注释三丶知识点一丶效果图 [1]引用远程图片 [2]引用本地图片 [3]实现圆形图片(方法一).圆角图片(受弧度影响) [4]实现圆形图片(方法二) 二丶 ...
网格布局（grid layout）基础
1 网格grid基础 Grid布局是一种二维网格布局,有行和列的概念,可用于布局页面主要的区域或小型组件. 1.1 使用display: grid定义网格布局 1.2 显式网格(explicit gr ...
[Unity 学习] - 进阶篇 - Mesh基础系列1：生成网格
[Unity 学习] - 进阶篇 - Mesh基础系列1:生成网格本文并非原创,只是本人的学习记录,原文是由放牛的星星老师翻译Catlike系列教程链接: https://mp.weixin.qq ...
Grid网格布局教程-语法篇
一.概述网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
Grid：网格布局基础简述
一.Grid:网格布局 Grid顾名思义就是"网格",它的子控件被放在一个一个实现定义好的小格子里面,整齐配列.Grid和其他各个Panel比较起来,功能最多也最为复杂. 要使用 ...
【第八篇】CSS布局之网格布局
一个网页根据其各个功能块的分布,通常将其分成多个组成部分.同时为了页面美观,通常将各个功能模块放在页面固定的地方.CSS中存在多种布局方法,例如浮动,弹性和网格布局.每种布局都有其适用的范围. 网格布 ...
display:grid 网格布局的基础使用
css新特性--网格布局我们通过在元素上声明 display:grid 来创建一个网格容器.一旦我们这样做,这个元素的所有直系子元素将成为网格元素. 它将元素分割成行与列,通过栅格栏的形式弥补了fl ...
CSS3 网格布局(grid-layout)基础知识 - 弹性尺寸的定义单位：fr 简介及实例
网格布局支持弹性尺寸(flex-size),这是一个很好的自适应布局技术. 弹性尺寸使用fr尺寸单位,其来自 "fraction" 或 "fractional unit& ...
安卓编程基础——网格布局
目录前言一.新课讲解 (一)网格布局概述 1.布局特点 2.继承关系图 3.常用属性 (二)案例演示:计算器界面 1.创建安卓应用 2.准备背景图片 3.字符串资源文件 4.自定义边框配置文件 5 ...
CSS3 网格布局(grid layout)基础知识 - 隐式网格自动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)
网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道,构成显式网格. 当网格项目定位在这些界限之外,网格容器通过增加隐式网格线生成隐式网格轨道. 这些隐 ...

Futter基础第6篇：实现网格布局【GridView、GridView.count、GridView.builder】

一丶效果图

二丶代码+注释

三丶知识点

四丶笔记

Futter基础第6篇：实现网格布局【GridView、GridView.count、GridView.builder】相关推荐

最新文章

热门文章

Futter基础第6篇： 实现网格布局【GridView、GridView.count、GridView.builder】

一丶 效果图

二丶 代码+注释

三丶 知识点

四丶笔记

Futter基础第6篇： 实现网格布局【GridView、GridView.count、GridView.builder】相关推荐

最新文章

热门文章

Futter基础第6篇：实现网格布局【GridView、GridView.count、GridView.builder】

一丶效果图

二丶代码+注释

三丶知识点

Futter基础第6篇：实现网格布局【GridView、GridView.count、GridView.builder】相关推荐