使用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的使用的更多相关文章

  1. flutter GridView 网格布局

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

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

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

  3. Flutter 布局(八)- Stack、IndexedStack、GridView详解

    本文主要介绍Flutter布局中的Stack.IndexedStack.GridView控件,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. Stack A widget that po ...

  4. Flutter中打造多行列列表GridView组件的使用

    GridView组件.一个可滚动的二维空间数组. 在使用无限加载滚动列表的时候,最先使用的还是ListView组件.但若是要一行显示2列或者更多列的滚动列表,GridView组件更为方便.如下 在向服 ...

  5. Flutter 案例学习之:GridView

    GitHub:https://github.com/happy-python/flutter_demos/tree/master/gridview_demo 在 ListView 中,如果将屏幕的方向 ...

  6. Flutter利用GridView实现网格的商品布局

    GridView.count 生成的是静态网格 效果: 代码: import 'package:flutter/material.dart'; void main() { runApp(MyApp() ...

  7. Flutter中用ListView嵌套GridView报错异常

    flutter中的ListView组件和GridView组件都是常用的布局组件,有时候ListView中需要嵌套GridView来使用,例如下图: 这种情况就需要在ListView里面再嵌套一个Gri ...

  8. flutter网格布局之GridView组件

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

  9. 【Flutter】可滚动组件之GridView

    前言 GridView可以构建一个二维网格列表.需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列(layout).Sl ...

随机推荐

  1. React项目中使用hot-react-loader

    在构建react项目时,默认使用的webpack-dev-serve有热刷新功能,但是局限是修改一处会使整个页面刷新 当引入了react-hot-loader时,可以实现局部刷新,即同个页面上,某一处 ...

  2. 记录Django学习1

    一.Django 1.首先安装好django模块 pip3 install django 2.然后配置好相应的环境变量 C:\Python35\Scripts 3. 创建Django工程,首先可以使用 ...

  3. puppeteer(六)启动参数——浏览器扩展应用的添加及应用

    前言 最近再做浏览器的自动化,首页是定制化的,是通过extension(扩展)实现的,由于通过puppeteer默认是以无参(即首次以干净的环境)运行的,导致登录页无法正常显示,首先想当然是直接找扩展 ...

  4. sql 查询所有作业的详情

    DECLARE @WeekDays TABLE ( freq_interval INT, weekdays ) ) INSERT INTO @WeekDays ,N'星期日 ' UNION ALL , ...

  5. JavaScript之jsx&react

    1.Virtual DOM 1.将网页所有内容映射到一颗树形结构的层级对象模型上,浏览器提供对dom的支持,用户可以是用脚本调用dom,api来动态修改dom节点,从而达到修改网页目的,这种修改是浏览 ...

  6. Maven项目集成Jetty

    1.新建webapp maven项目. 项目目录结构如下. 2.pom文件添加jetty构建. <project xmlns="http://maven.apache.org/POM/ ...

  7. Ping 命令实战小结--TCP/IP协议学习

    2011-12-22 22:38:49 图1 图2 一,环境说明 硬件连线.PC与2440开发板直接用网线连接. PC的ip地址:192.168.0.107.2440开发板的ip地址:192.168. ...

  8. 'scope' is defined but never used

    错误如下: 解决办法: 1.scope这个属性在最新版本vue已经被弃用,升级成slot-scope了 ,所以属性名应该改为slot-scope. 2.如上所示,我们发现,还是有报错,原因是vetur ...

  9. Servlet+jSP+java实现商品信息和流水的操作

    设计思路:先是创建两个表,一个用来操作库内商品的增删改查,一个用来记录商品的流水信息. 设计过程:先对商品的属性进行创建javaBean编写,之后编写数据库连接类,之后编写数据库操作类,之后编写服务类 ...

  10. es2018(es9)前瞻

    命名捕获 语法 : ?<name> 一:举个栗子 我们要把从2018-05-20取出年月日 1:普通方法 let str = '2018-05-20'; let reg1 = /(\d{4 ...