GridView.count 生成的是静态网格

效果:

代码:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
HomeContent({Key key}) : super(key: key);
//动态列表数据:
List listData=[
{'title':'','img':"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"},
{'title':'','img':"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"},
{'title':'','img':"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"},
{'title':'','img':"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"},
{'title':'','img':"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"},
];
List<Widget> _getListData(){
//第一种设置数据:
// List<Widget> list=new List();
// for(var i=0;i<20;i++){
// list.add(Container(
// alignment: Alignment.center,
// color: Colors.blue,
// child: Text("这是第$i 条数据",style: TextStyle(
// color: Colors.white,fontSize: 20
// )),
// ));
// }
// return list.toList(); //第二种设置数据:
var tempList=listData.map((value){
return Container(
child: Column(
children: <Widget>[
Image.network(value['img']),
SizedBox(height: ),
Text(value['title'],
textAlign: TextAlign.center,
style: TextStyle(
fontSize:
),
) ],
),
decoration: BoxDecoration(
border: Border.all(
color: Color.fromRGBO(, ,, 0.9),
width:
)
),
);
});
return tempList.toList();
} @override
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing: 20.0, //水平子Widget之间的间距:
mainAxisSpacing: 20.0, //垂直Widget之间的间距:
padding: EdgeInsets.all(),
crossAxisCount: , //一行的Widget数量:
childAspectRatio: 0.7, //设置宽高比例
children: this._getListData(),
);
}
}
GridView.builder
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key); @override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("flutter demo"),
),
body: HomeContent(),
),
);
}
} class HomeContent extends StatelessWidget {
HomeContent({Key key}) : super(key: key);
//动态列表数据:
List listData = [
{
'title': '',
'img':
"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"
},
{
'title': '',
'img':
"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"
},
{
'title': '',
'img':
"https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg"
},
];
Widget _getListData(context, index) {
//第二种设置数据:
return Container(
child: Column(
children: <Widget>[
Image.network(listData[index]['img']),
// SizedBox(height: 10),
Text(
listData[index]['title'],
textAlign: TextAlign.center,
style: TextStyle(fontSize: ),
)
],
),
decoration: BoxDecoration(
border:
Border.all(color: Color.fromRGBO(, , , 0.9), width: )),
);
} @override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisSpacing: 10.0, //水平子Widget之间间距
mainAxisSpacing: 10.0, //垂直子Widget之间间距
crossAxisCount: //一行的Widget数量
),
itemCount: listData.length,
itemBuilder: this._getListData,
);
}
}

Flutter利用GridView实现网格的商品布局的更多相关文章

  1. Android商城开发系列(十三)—— 首页热卖商品布局实现

    热卖商品布局效果如下图: 这个布局跟我们上节做的推荐是一样的,也是用LinearLayout和GridView去实现的,新建一个hot_item.xml,代码如下所示: <?xml versio ...

  2. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  3. 利用column-width属性设置多栏布局

    css样式设置为: div{ background:blanchedalmond; margin:0 auto; width:1230px; -moz-column-width:400px; -web ...

  4. Asp.Net 操作XML文件的增删改查 利用GridView

    不废话,直接上如何利用Asp.NET操作XML文件,并对其属性进行修改,刚开始的时候,是打算使用JS来控制生成XML文件的,但是最后却是无法创建文件,读取文件则没有使用了 index.aspx 文件 ...

  5. 利用selenium爬取京东商品信息存放到mongodb

    利用selenium爬取京东商城的商品信息思路: 1.首先进入京东的搜索页面,分析搜索页面信息可以得到路由结构 2.根据页面信息可以看到京东在搜索页面使用了懒加载,所以为了解决这个问题,使用递归.等待 ...

  6. CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)

    网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道.构成显式网格. 当网格项目定位在这些界限之外.网格容器通过添加隐式网格线生成隐式网格轨道. 这些隐 ...

  7. 37 Flutter仿京东商城项目 结算页面布局

    加群452892873 下载对应34课文件,运行方法,建好项目,直接替换lib目录 CheckOut.dart import 'package:flutter/material.dart'; impo ...

  8. 07-08 Flutter仿京东商城项目 商品分类页面布局:Flutter仿京东商城项目 商品分类页面数据渲染

    Flutter实战(交流群:452892873) 本项目是一个实战项目,根据目录建文件,并复制从第一节到最新更新的文章,可以构成完整的一个请求后台数据的项目: CateModel.dart class ...

  9. 如何给GridView添加网格

    如何给gridview的单元格加上分割线 原文链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2013/1227/1582.html ...

随机推荐

  1. 《CoderXiaoban》第九次团队作业:Beta冲刺与验收准备2

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验十三 团队作业9:BETA冲刺与团队项目验收 团队名称 Coderxiaoban团队 作业学习目标 (1)掌握软件黑盒 ...

  2. 2-html标题、段落、换行与常用的字符实体

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. jedis:分片集群使用

    jedis使用 引入依赖 <dependency> <groupId>redis.clients</groupId> <artifactId>jedis ...

  4. BasicAuth

    Go实现 在头里设置WWW-Authenticate 返回401 func (webhandler) ServeHTTP(writer http.ResponseWriter, request *ht ...

  5. mysql优化后的主配置文件

    #!/bin/bash basedir=$mysql datadir=$mysql/data server_id=$(hostname -I | awk '{print $NF}'|awk -F '. ...

  6. 一.使用LDAP认证

    作用:网络用户认证,用户集中管理 网络用户信息:LDAP服务器提供 本地用户信息:/etc/passwd /etc/shadow提供     LDAP服务器:虚拟机classroom     LDAP ...

  7. rpm命令是RPM软件包的管理工具

    rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM ...

  8. Note_4.9

    2019/4/9 奇奇怪怪的笔记 关于代码,基本上是现写的,可能连编译都过不了 因为是简单算法场,所以就很不走心了昂,/小纠结 图论相关  最小生成树 prim,kruskal 最小生成树的切割性质 ...

  9. 制作OpenFOAM计算结果的gif动画【转载】

    转载自:http://blog.sina.com.cn/s/blog_6277cbbf0100niqi.html PS:对其中错误地方进行了修正 1.用ParaView将每一帧都输出成图片(File- ...

  10. meshing-网格加密

    ​原视频下载:http://yunpan.cn/cujvm8VbAPJZi  访问密码 0d3b