Flutter利用GridView实现网格的商品布局
2024-08-26 19:53:34
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,
);
}
}
最新文章
- 漫谈可视化Prefuse（三）---Prefuse API数据结构阅读有感
- POJ3461Oulipo 题解
- CSS基础（一）：开篇
- 有了Hadoop MapReduce, 为什么还要Spark?
- DHTMLX 前端框架 建立你的一个应用程序 教程(六)-- 表格加载数据
- BZOJ_1016_[JSOI2008]_最小生成树计数_(dfs+乘法原理)
- Android开发者必知的开发资源
- PHP - 字符串操作
- FineUIMvc的分部视图连接器 --VS-- FineUIPro的用户控件连接器
- 记一次CPU飙升BUG
- canvas API ，通俗的canvas基础知识（一）
- 60道Python面试题&答案精选！找工作前必看
- matlab中特殊符号如希腊字符
- 新浪天气api
- 内部排序->选择排序->堆排序
- 廖雪峰Java1-3流程控制-4switch多重选择
- Java基础—基础语法与常用命令
- mysql开启日志sql语句
- zookeeper命令行
- 关于InvokeMethod Activity的异步调用