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 ...
随机推荐
- 蓝桥杯近3年决赛题之二(16年b组)
做的时候只做对了第一题. 1. 一步之遥 从昏迷中醒来,小明发现自己被关在X星球的废矿车里.矿车停在平直的废弃的轨道上.他的面前是两个按钮,分别写着“F”和“B”. 小明突然记起来,这两个按钮可以控制 ...
- 详解UML中的6大关系(关联、依赖、聚合、组合、泛化、实现)
UML中的6大关系相关英文及音标: 依赖关系 dependency --------> 关联关系 association ______> 聚合关系 aggregation ______ ...
- Nodejs使用robot操作鼠标键盘
1.安装robotjs库 前提是配置了cnpm cnpm i robotjs -g 2.如果报错VCBuild.exe,如下可以安装windows-tool MSBUILD : error MSB ...
- 【stm32开发之HAL采坑记之:001使用ST-LINK下载出错问题】
使用ST-LINK下载出错问题 开发环境:swstm32+stm32cubeMx+硬石F1开发板 联系方式:yexiaopeng1992@126.com 出现问题:在使用ST-linik下载时发现,在 ...
- ForkJoinPool
fork():开启一个新线程(或是重用线程池内的空闲线程),将任务交给该线程处理. join():等待该任务的处理线程处理完毕,获得返回值. ForkJoinPool 的每个工作线程都维护着一个工作队 ...
- 【转】数据处理常用的sql语句整理
一下语句都是基于 mysql数据库 查询是否使用索引 explain select * FROM t_table1; 结果列的含义: table:此次查询操作是关联哪张数据表 type:连接查询操作 ...
- python数据科学 学习之路
week1 - Python基础1 介绍.基本语法.流程控制 week1- Python基础2 列表.字典.集合 week1- Python基础3 函数.递归.内置函数 week1- Pyt ...
- 中文编码错误,Error output could not be translated from the native locale to UTF-8.
假如使用http访问仓库,用户配置的pre-commit钩子里面如果有中文,可能会出现"Error output could not be translated from the nativ ...
- awk、sed、date命令使用
个人学习笔记总结 [root@a ~]# awk 'END{print NR}' c.txt #没错,这就是文件的行数,当然,这种统计方法不是linux下最快的,但也是一种思路3[root ...
- pandas的基本功能(一)
第16天pandas的基本功能(一) 灵活的二进制操作 体现在2个方面 支持一维和二维之间的广播 支持缺失值数据处理 四则运算支持广播 +add - sub *mul /div divmod()分区和 ...