当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组件 GridView 实

现布局。

GridView 创建网格列表有多种方式,常用有以下两种。

1、可以通过 GridView.count 实现网格布局

2、通过 GridView.builder 实现网格布局

示例代码

import 'package:flutter/material.dart';
void main () => runApp(MyApp()); class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
body:GridView.count(
padding:const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 3,
children: <Widget>[
const Text('哈喽'),
const Text('I LOVE U'),
const Text('中国红'),
const Text('玩游戏'),
const Text('看书'),
const Text('吃火锅')
],
)
),
);
}
}
import 'package:flutter/material.dart';
void main () => runApp(MyApp()); class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context ){
return MaterialApp(
title:'ListView widget',
home:Scaffold(
body:GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0,
childAspectRatio: 0.7
),
children: <Widget>[
new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),
new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover), ],
)
),
);
}
}
import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
}
class LayoutDemo extends StatelessWidget { Widget _getListData (context,index) {
return Container(
child:Column(
children: <Widget>[
Image.network(listData[index]['imageUrl']),
SizedBox(height: 12),
Text(
listData[index]['title'],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20
),
)
], ),
decoration: BoxDecoration(
border: Border.all(
color:Color.fromRGBO(233, 233,233, 0.9),
width: 1
)
), // height: 400, //设置高度没有反应
);
} @override
Widget build(BuildContext context) {
return GridView.builder( //注意
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing:10.0 , //水平子 Widget 之间间距
mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
crossAxisCount: 2, //一行的 Widget 数量
),
itemCount: listData.length,
itemBuilder:this._getListData,
);
}
}
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
}
class LayoutDemo 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;
} @override
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing:20.0 , //水平子 Widget 之间间距
mainAxisSpacing: 20.0, //垂直子 Widget 之间间距
padding: EdgeInsets.all(10),
crossAxisCount: 2, //一行的 Widget 数量
childAspectRatio:0.7, //宽度和高度的比例
children: this._getListData(),
);
}
}
import 'package:flutter/material.dart';

import 'res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
body: LayoutDemo(),
));
}
}
class LayoutDemo extends StatelessWidget { List<Widget> _getListData() {
var tempList=listData.map((value){
return Container(
child:Column(
children: <Widget>[
Image.network(value['imageUrl']),
SizedBox(height: 12),
Text(
value['title'],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20
),
)
], ),
decoration: BoxDecoration( border: Border.all(
color:Color.fromRGBO(233, 233,233, 0.9),
width: 1
)
), // height: 400, //设置高度没有反应
); });
// ('xxx','xxx')
return tempList.toList();
} @override
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing:10.0 , //水平子 Widget 之间间距
mainAxisSpacing: 10.0, //垂直子 Widget 之间间距
padding: EdgeInsets.all(10),
crossAxisCount: 2, //一行的 Widget 数量
// childAspectRatio:0.7, //宽度和高度的比例
children: this._getListData(),
);
}
}

flutter GridView 网格布局的更多相关文章

  1. flutter网格布局之GridView组件

    前面总结了使用ListView来实现列表,但是,有的时候,数据量很大,需要使用矩阵方式排列才能更清晰的展示数据,在flutter中,可以使用网格列表组件GridView来实现这个布局. GridVie ...

  2. Flutter——GridView组件(网格列表组件)

    GridView组件的常用参数: 名称 类型 说明 scrollDirection Axis 滚动方法 padding EdgeInsetsGeometry 内边距 resolve bool 组件反向 ...

  3. GridLayout(网格布局)

    常用属性: 排列对齐: ①设置组件的排列方式:  android:orientation=""     vertical(竖直,默认)或者horizontal(水平) ②设置组件的 ...

  4. 在Flutter中构建布局

    这是在Flutter中构建布局的指南.首先,您将构建以下屏幕截图的布局.然后回过头, 本指南将解释Flutter的布局方法,并说明如何在屏幕上放置一个widget.在讨论如何水平和垂直放置widget ...

  5. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  6. dw的流体网格布局

    在设计视图拖拽 在插入面板中选择插入流体网格布局标签 在对话框中如果不选中新建行复选框 如果总的列数是5列 一行的列宽和上一行的列宽加起来没有5列的话,下一行会上浮

  7. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  8. 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  9. 浅谈GridLayout(网格布局)

    Android 4.0 布局-->GridLayout 网格布局 以行列单元格的形式展示内部控件排列,可以实现类似计算机键盘效果 ,也可以实现可自动变行的标签群效果 使用GridLayout , ...

随机推荐

  1. node绑定域名 nginx篇

    创建nodejs文件,并测试执行有没有问题. var express = require('express'); var app = express(); app.get('/', function ...

  2. 使用wc -l 来统计代码行数

    Linux使用wc来统计行数真的好用 如在当前路径下统计一共多少行代码 $ find ./ -name *.c |xargs wc -l #包括了空行 ##-l :lines 如果不包括空行 ¥fin ...

  3. Django 定时任务

    pip install apscheduler==2.1.2 安装完成后,打开django web 项目的views.py 增加以下内容: from apscheduler.scheduler imp ...

  4. Union-Find(并查集): Quick find算法

    解决dynamic connectivity的一种算法:Quick find Quick find--Data sturcture 如果两个objects是相连的,则它们有相同的array value ...

  5. *JavaScript标准参考教程 - 阮一峰

    参考 页向对象编程的模式(继承&模块化)

  6. fastjson ping外带信息poc

    public class Exploit { public Exploit(){ String base_url = ".egpkd5.dnslog.cn"; //你的dnslog ...

  7. 使用Navicat Premium 12导出SQL语句并在Power Designer 16.5中生成物理模型

    内容简介 本文主要介绍使用Navicat Premium 12导出建表SQL(使用MySQL数据库)文件,并在Power Designer 16.5中使用导出的SQL文件来生成物理模型的步骤. 操作步 ...

  8. js正则验证input输入框有空格时提示直接去除空格

    <input type="text" id="test"/> <input type="button" value=&qu ...

  9. 在idea中调试spark程序-配置windows上的 spark local模式

    spark程序大致有如下运行模式: standalone模式:spark自带的模式 spark on yarn:利用hadoop yarn来做集群的资源管理 local模式:主要在测试的时候使用, 这 ...

  10. learning java AWT 手绘窗口

    import java.awt.*;port java.awt.event.ActionListener; import java.awt.event.MouseAdapter; import jav ...