flutter -------- GridView的使用
使用GridView将widget放置为二维列表。 GridView提供了两个预制list,或者您可以构建自定义网格。当GridView检测到其内容太长而不适合渲染框时,它会自动滚动。
GridView 概览
- 在网格中放置widget
- 检测列内容超过渲染框时自动提供滚动
- 构建您自己的自定义grid,或使用一下提供的grid之一:
GridView.count允许您指定列数GridView.extent允许您指定项的最大像素宽度
案例效果:

官方文档(相关属性)介绍:
https://docs.flutter.io/flutter/widgets/GridView-class.html
案例代码:
/***
* 列表GridView
*/
class UITest3_GridView extends StatelessWidget{ List<Container> buildGridList(int count){
return new List<Container>.generate(count,
(int index) =>
new Container(
child: new Image.asset("images/lake.jpg"),
)
);
} Widget builGrid(){
return new GridView.extent(
maxCrossAxisExtent: 150.0,
padding: EdgeInsets.all(4),
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: buildGridList(30)
);
} @override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
title: new Text("GridView"),
),
body: new Center(
child: builGrid(),
),
);
} }
flutter -------- GridView的使用的更多相关文章
- flutter GridView 网格布局
当数据量很大的时候用矩阵方式排列比较清晰.此时我们可以用网格列表组件 GridView 实 现布局. GridView 创建网格列表有多种方式,常用有以下两种. 1.可以通过 GridView.cou ...
- Flutter——GridView组件(网格列表组件)
GridView组件的常用参数: 名称 类型 说明 scrollDirection Axis 滚动方法 padding EdgeInsetsGeometry 内边距 resolve bool 组件反向 ...
- Flutter 布局(八)- Stack、IndexedStack、GridView详解
本文主要介绍Flutter布局中的Stack.IndexedStack.GridView控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Stack A widget that po ...
- Flutter中打造多行列列表GridView组件的使用
GridView组件.一个可滚动的二维空间数组. 在使用无限加载滚动列表的时候,最先使用的还是ListView组件.但若是要一行显示2列或者更多列的滚动列表,GridView组件更为方便.如下 在向服 ...
- Flutter 案例学习之:GridView
GitHub:https://github.com/happy-python/flutter_demos/tree/master/gridview_demo 在 ListView 中,如果将屏幕的方向 ...
- Flutter利用GridView实现网格的商品布局
GridView.count 生成的是静态网格 效果: 代码: import 'package:flutter/material.dart'; void main() { runApp(MyApp() ...
- Flutter中用ListView嵌套GridView报错异常
flutter中的ListView组件和GridView组件都是常用的布局组件,有时候ListView中需要嵌套GridView来使用,例如下图: 这种情况就需要在ListView里面再嵌套一个Gri ...
- flutter网格布局之GridView组件
前面总结了使用ListView来实现列表,但是,有的时候,数据量很大,需要使用矩阵方式排列才能更清晰的展示数据,在flutter中,可以使用网格列表组件GridView来实现这个布局. GridVie ...
- 【Flutter】可滚动组件之GridView
前言 GridView可以构建一个二维网格列表.需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列(layout).Sl ...
随机推荐
- 第九届蓝桥杯C/C++B组省赛感想
因为做了近三年的初赛题,都对了5题+,所以这次比赛前信心满满,心里想最少水个省二没问题.可我怎么知道今年的套路居然和以前不一样了!一题深搜都没有,想想一周前做的第七届初赛题,10题有3.4题深搜题. ...
- 005-CSS让页脚始终在底部不论页面内容多少
让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部. 方案一: <!DOCTYPE html> <html> <head> <meta chars ...
- RoboMongo命令(版本:Robo 3T 1.1.1)
查询并排序db.getCollection('working_history').find({"identification" : "76170178"}).s ...
- php 图片添加文字,水印
因为工作需求,用到这个,网上找了很多,也没有找到好的方式,最后找到这种感觉比较简单的方式,记录下来,以备后用. $im = imagecreatefrompng("img/yyk_bg. ...
- AbstractMethodError:
AbstractMethodError: This java.lang.AbstractMethodError is usually thrown when we try to invoke the ...
- netperf
官网 下载 装包 yum -y install make automake libtool pkgconfig libaio-devel 编译安装 ./autogen.sh ./configure m ...
- ElasticSearch(八)Elasticsearch-head 连接不上Elasticsearch的原因和解决方案
在上篇博文里ElasticSearch(七) Elasticsearch在Centos下搭建可视化服务中已经访问到了可视化界面.然后兴奋地进行了数据提交测试,提交啊,刷新啊,就是看不到数据变化,仔细一 ...
- Java基础面试题总结
目录 索引 Java基础知识篇 Java web基础知识总结 Java集合篇常见问题 Java基础知识篇 面向对象和面向过程的区别 面向过程: 优点:性能比面向对象高,因为类调用时需要实例化,开销比较 ...
- 复旦大学2017--2018学年第二学期(17级)高等代数II期末考试第六大题解答
六.(本题10分) 设 $A$ 为 $n$ 阶幂零阵 (即存在正整数 $k$, 使得 $A^k=0$), 证明: $e^A$ 与 $I_n+A$ 相似. 证明 由 $A$ 是幂零阵可知, $A$ ...
- 关于新写的js在浏览器f12的时候看不到解决办法
这是由于浏览器缓存导致的,谷歌浏览器ctrl+shift+delete快捷键到清除浏览器数据清除即可.平时经常会遇到的,所以记录下.