flutter GridView 网格布局
当数据量很大的时候用矩阵方式排列比较清晰。此时我们可以用网格列表组件 GridView 实
现布局。
GridView 创建网格列表有多种方式,常用有以下两种。
1、可以通过 GridView.count 实现网格布局
2、通过 GridView.builder 实现网格布局
示例代码
import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ return MaterialApp( title:'ListView widget', home:Scaffold( body:GridView.count( padding:const EdgeInsets.all(20.0), crossAxisSpacing: 10.0, crossAxisCount: 3, children: <Widget>[ const Text('哈喽'), const Text('I LOVE U'), const Text('中国红'), const Text('玩游戏'), const Text('看书'), const Text('吃火锅') ], ) ), ); } }
import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context ){ return MaterialApp( title:'ListView widget', home:Scaffold( body:GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 2.0, crossAxisSpacing: 2.0, childAspectRatio: 0.7 ), children: <Widget>[ new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover), ], ) ), ); } }
import 'package:flutter/material.dart'; import 'res/listData.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('FlutterDemo')), body: LayoutDemo(), )); } } class LayoutDemo extends StatelessWidget { Widget _getListData (context,index) { return Container( child:Column( children: <Widget>[ Image.network(listData[index]['imageUrl']), SizedBox(height: 12), Text( listData[index]['title'], textAlign: TextAlign.center, style: TextStyle( fontSize: 20 ), ) ], ), decoration: BoxDecoration( border: Border.all( color:Color.fromRGBO(233, 233,233, 0.9), width: 1 ) ), // height: 400, //设置高度没有反应 ); } @override Widget build(BuildContext context) { return GridView.builder( //注意 gridDelegate:SliverGridDelegateWithFixedCrossAxisCount( crossAxisSpacing:10.0 , //水平子 Widget 之间间距 mainAxisSpacing: 10.0, //垂直子 Widget 之间间距 crossAxisCount: 2, //一行的 Widget 数量 ), itemCount: listData.length, itemBuilder:this._getListData, ); } }
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('FlutterDemo')), body: LayoutDemo(), )); } } class LayoutDemo extends StatelessWidget { List<Widget> _getListData() { List<Widget> list = new List(); for (var i = 0; i < 20; i++) { list.add(Container( alignment: Alignment.center, child: Text( '这是第$i条数据', style: TextStyle(color: Colors.white, fontSize: 20), ), color: Colors.blue, // height: 400, //设置高度没有反应 )); } return list; } @override Widget build(BuildContext context) { return GridView.count( crossAxisSpacing:20.0 , //水平子 Widget 之间间距 mainAxisSpacing: 20.0, //垂直子 Widget 之间间距 padding: EdgeInsets.all(10), crossAxisCount: 2, //一行的 Widget 数量 childAspectRatio:0.7, //宽度和高度的比例 children: this._getListData(), ); } }
import 'package:flutter/material.dart'; import 'res/listData.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('FlutterDemo')), body: LayoutDemo(), )); } } class LayoutDemo extends StatelessWidget { List<Widget> _getListData() { var tempList=listData.map((value){ return Container( child:Column( children: <Widget>[ Image.network(value['imageUrl']), SizedBox(height: 12), Text( value['title'], textAlign: TextAlign.center, style: TextStyle( fontSize: 20 ), ) ], ), decoration: BoxDecoration( border: Border.all( color:Color.fromRGBO(233, 233,233, 0.9), width: 1 ) ), // height: 400, //设置高度没有反应 ); }); // ('xxx','xxx') return tempList.toList(); } @override Widget build(BuildContext context) { return GridView.count( crossAxisSpacing:10.0 , //水平子 Widget 之间间距 mainAxisSpacing: 10.0, //垂直子 Widget 之间间距 padding: EdgeInsets.all(10), crossAxisCount: 2, //一行的 Widget 数量 // childAspectRatio:0.7, //宽度和高度的比例 children: this._getListData(), ); } }
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-07-10 20:48 LoaderMan 阅读(2107) 评论(0) 编辑 收藏 举报