Flutter——GridView组件(网格列表组件)
GridView组件的常用参数:
名称 | 类型 | 说明 |
scrollDirection
|
Axis
|
滚动方法
|
padding |
EdgeInsetsGeometry
|
内边距
|
resolve
|
bool
|
组件反向排序
|
crossAxisSpacing
|
double
|
水平子 Widget 之间间距
|
mainAxisSpacing
|
double
|
垂直子 Widget 之间间距
|
crossAxisCount
|
int
|
一行的 Widget 数量
|
childAspectRatio
|
double
|
子 Widget 宽高比例
|
children
|
<Widget>[]
|
|
gridDelegate
|
SliverGridDelegateWithFix
edCrossAxisCount(常用)
SliverGridDelegateWithMax
CrossAxisExtent
|
控制布局主要用在
GridView.builder 里面
|
GridView.count实现静态网格布局
- import 'package:flutter/material.dart';
- void main(){
- runApp(MaterialApp(
- title: "GridView",
- home: MyApp(),
- ));
- }
- class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: GridView.count(
- crossAxisCount: 2,
- mainAxisSpacing: 10.0,
- crossAxisSpacing: 10.0,
- padding: EdgeInsets.all(5.0),
- children: <Widget>[
- Container(
- color: Colors.pink,
- ),
- Container(
- color: Colors.pink,
- ),
- Container(
- color: Colors.pink,
- ),
- Container(
- color: Colors.pink,
- ),
- Container(
- color: Colors.pink,
- ),
- Container(
- color: Colors.pink,
- ),
- Container(
- color: Colors.pink,
- ),
- Container(
- color: Colors.pink,
- ),
- ],
- ),
- );
- }
- }
GridView.builder实现动态网格列表
- import 'package:flutter/material.dart';
- void main(){
- runApp(MaterialApp(
- title: "GridView",
- home: MyApp(),
- ));
- }
- class MyApp extends StatelessWidget {
- List list = new List<String>();
- MyApp() {
- for(var i = 0; i < 9; i++) {
- this.list.add("图片$i");
- }
- }
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: GridView.builder(
- gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( // 注意,使用了GridView.builder,又要设置网格属性的话,要用这个属性!
- crossAxisCount: 3,
- mainAxisSpacing: 10.0,
- crossAxisSpacing: 10.0,
- ),
- itemCount: this.list.length,
- itemBuilder: (context,index) {
- return Container(
- color: Colors.pink,
- child: Center(
- child: Text(this.list[index]),
- )
- );
- }
- )
- );
- }
- }
Flutter——GridView组件(网格列表组件)的更多相关文章
- Flutter中的可滚动列表组件-PageView
PageVIew,可滚动的视图列表组件,而且每一个子组件的大小都和视图窗口大小一样. 属性: controller -> PageController 用于控制视图页面滚动到的位置 childr ...
- 【Flutter学习】基本组件之基本网格Gradview组件
一,概述 数据量很大的时用矩阵方式排列比较清晰,此时用网格列表组件,即为GridView组件,可实现多行多列的应用场景. 使用GridView创建网格列表有多种方式: GridView.count 通 ...
- flutter GridView 网格布局
当数据量很大的时候用矩阵方式排列比较清晰.此时我们可以用网格列表组件 GridView 实 现布局. GridView 创建网格列表有多种方式,常用有以下两种. 1.可以通过 GridView.cou ...
- Flutter学习笔记(12)--列表组件
如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...
- flutter中的列表组件
列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类: 垂直列表 ...
- Flutter 实战(一):列表项内容可自定义的列表组件
前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解 ...
- Android精通:View与ViewGroup,LinearLayout线性布局,RelativeLayout相对布局,ListView列表组件
UI的描述 对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...
- Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作
1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: acit ...
- Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作
1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: aci ...
随机推荐
- iOS——偏好设置的创建,数据写入与读取
NSUserDefaults与NSDictinary? 应用通过NSUserDefaults用键值对的方式来读取和保存偏好设置数据,与通过键从NSDictionary对象中获取数据一样,不同之处在于N ...
- tf.contrib.layers.fully_connected参数笔记
tf.contrib.layers.fully_connected 添加完全连接的图层. tf.contrib.layers.fully_connected( inputs, num_ou ...
- 【并行计算与CUDA开发】英伟达硬件加速编解码
硬件加速 并行计算 OpenCL OpenCL API VS SDK 英伟达硬件编解码方案 基于 OpenCL 的 API 自己写一个编解码器 使用 SDK 中的编解码接口 使用编码器对于 OpenC ...
- $.ajax 中的contentType类型
参考链接:https://www.jianshu.com/p/f4d92b3d387d
- 带你手写基于 Spring 的可插拔式 RPC 框架(三)通信协议模块
在写代码之前我们先要想清楚几个问题. 我们的框架到底要实现什么功能? 我们要实现一个远程调用的 RPC 协议. 最终实现效果是什么样的? 我们能像调用本地服务一样调用远程的服务. 怎样实现上面的效果? ...
- js中函数总结(1)
8.1函数定义js的函数可以嵌套在其他函数的定义中,这样它们就可以访问它们被定义时所处的作用域中的任何变量.意味着js函数构成了一个闭包:function name(){} 特殊的:函数表达式有时定义 ...
- java核心技术(第四章)对象与类
4.1 面向对象程序设计概述 每个对象包含对用户公开的特定功能部分和隐藏的实现部分. 4.1.1类 由类构造对象的过程称为创建类的实例. 封装(数据隐藏)是与对象有关的.从形式上看,封装不过是将数据和 ...
- LoadRunner编程之文件的操作
这篇文章主要写下LoadRunner下如何进行文件的操作. 1,文件的声明 LoadRunner不支持FILE数据类型,所以在LoadRunner中用int来声明一个文件: int MyFile; 2 ...
- TypeScript的变量声明
1.全新的变量声明方式 let和const是JavaScript ES6中新添加的变量声明方式.let在很多方面与var是相似的,但是它可以避免一些在JavaScript里常见一些问题. 而const ...
- TheSierpinskiFractal(POJ-1941)【递推】
题意:用‘\’,'/','_'按照给定规则画出三角形 题目链接:https://vjudge.net/problem/POJ-1941 思路:题中的三角形生成规则是符合递推关系的,可以先手动完成第一个 ...