大道不同，却又总是殊途同归，GridView组件类似于前端的flex弹性布局：
1 import 'package:flutter/material.dart'; 2 import 'res/listData.dart'; 3 4 void main(){ 5 runApp(new MyApp()); 6 7 } 8 9 /* 10 GridView : 11 通过GridView.count实现网格布局 12 通过GridView.builder实现网格布局 13 scrollDirction Axis 滚动方法 14 padding EdgeInsetsGeometry 内边距 15 resolve bool 组件反向排序 16 crossAxisSpacing double 水平子Widget之间间距 17 mainAxisSpacing double垂直子Widget之间间距 18 crossAxisCount int 一行的Widget数量 19 childAspectRatio double 子Wiget宽高比例 20 */ 21 22 class MyApp extends StatelessWidget{ 23 @override 24 Widget build(BuildContext context) { 25 // TODO: implement build 26 return MaterialApp( 27 home:Scaffold( 28 appBar: AppBar(title: Text("GridView组件、动态GridView")), 29 body: HomeContent(), 30 ), 31 // 主题 32 theme: ThemeData(primarySwatch: Colors.deepOrange), 33 ); 34 } 35 } 36 37 //GridView.builder 38 class HomeContent extends StatelessWidget{ 39 Widget _getListData(context,index){ 40 return Container( 41 decoration: BoxDecoration( 42 border: Border.all(1.0,color: Colors.green) 43 ), 44 child: Column( 45 children: <Widget>[ 46 Image.network(listData[index]['imageUrl'],height: 100.0,), 47 SizedBox(height:10.0), 48 Text(listData[index]['title'], 49 textAlign: TextAlign.center, 50 style:TextStyle(fontSize: 20), 51 ) 52 ], 53 ), 54 ); 55 } 56 57 58 // 59 60 @override 61 Widget build(BuildContext context) { 62 // TODO: implement build 63 return GridView.builder( 64 gridDelegate:SliverGridDelegateWithFixedCrossAxisCount( 65 crossAxisCount: 2,//一行的Widget的数量 66 crossAxisSpacing:10.0,//水平子Widget之间间距 67 mainAxisSpacing: 10.0,//垂直子Widget之间间距 68 ) , 69 itemCount: listData.length, 70 itemBuilder: this._getListData, 71 ); 72 } 73 } 74 75 76 //使用外部数据 77 // class HomeContent extends StatelessWidget{ 78 // List<Widget> _getListData(){ 79 // var template = listData.map((value){ 80 // return Container( 81 // decoration: BoxDecoration( 82 // border: Border.all(1.0,color: Colors.green) 83 // ), 84 // child: Column( 85 // children: <Widget>[ 86 // Image.network(value['imageUrl'],height: 100.0,), 87 // SizedBox(height:10.0), 88 // Text(value['title'], 89 // textAlign: TextAlign.center, 90 // style:TextStyle(fontSize: 20), 91 // ) 92 // ], 93 // ), 94 // ); 95 // }); 96 // 97 // 98 // return template.toList(); 99 // } 100 // 101 // @override 102 // Widget build(BuildContext context) { 103 // // TODO: implement build 104 // return GridView.count( 105 // crossAxisCount: 2,//一行的Widget的数量 106 // crossAxisSpacing:10.0,//水平子Widget之间间距 107 // mainAxisSpacing: 10.0,//垂直子Widget之间间距 108 // // childAspectRatio: 0.7,//宽度和高度的比例 109 // padding: EdgeInsets.all(2.0), 110 // children: this._getListData() 111 // 112 // 113 // 114 // ); 115 // } 116 // } 117 118 // class HomeContent extends StatelessWidget{ 119 // List<Widget> _getListData(){ 120 // List<Widget> list = new List(); 121 // 122 // for(var i = 0;i<20;i++){ 123 // list.add(Container( 124 // // height: 400.0,//设置无效 125 // decoration: new BoxDecoration( 126 // // border: new Border.all(color: Color(0xFFFF0000), 0.5), 127 // color: Color(0xFF9E9E9E), 128 // // borderRadius: new BorderRadius.circular((20.0)) 129 // ), 130 // alignment: Alignment.center, 131 // // padding: EdgeInsets.all(2.0), 132 // // margin: EdgeInsets.all(2.0), 133 // 134 // child: Text( 135 // "这是第$i条数据", 136 // style:TextStyle(color:Colors.red, 137 // 138 // ), 139 // // 140 // ), 141 // 142 // )); 143 // } 144 // return list; 145 // } 146 // 147 // @override 148 // Widget build(BuildContext context) { 149 // // TODO: implement build 150 // return GridView.count( 151 // crossAxisCount: 3,//一行的Widget的数量 152 // crossAxisSpacing:2.0,//水平子Widget之间间距 153 // mainAxisSpacing: 2.0,//垂直子Widget之间间距 154 // childAspectRatio: 0.7,//宽度和高度的比例 155 // padding: EdgeInsets.all(2.0), 156 // children: this._getListData() 157 // 158 // 159 // 160 // ); 161 // } 162 // } 163 164 // class HomeContent extends StatelessWidget{ 165 // @override 166 // Widget build(BuildContext context) { 167 // // TODO: implement build 168 // return GridView.count( 169 // crossAxisCount: 3, 170 // children: <Widget>[ 171 // 172 // Text("this is a pig"), 173 // Text("this is a pig"), 174 // Text("this is a pig"), 175 // Text("this is a pig"), 176 // Text("this is a pig"), 177 // Text("this is a pig"), 178 // Text("this is a pig"), 179 // Text("this is a pig"), 180 // Text("this is a pig"), 181 // Text("this is a pig"), 182 // Text("this is a pig"), 183 // Text("this is a pig"), 184 // Text("this is a pig"), 185 // Text("this is a pig"), 186 // Text("this is a pig"), 187 // Text("this is a pig"), 188 // Text("this is a pig"), 189 // Text("this is a pig"), 190 // Text("this is a pig"), 191 // Text("this is a pig"), 192 // ], 193 // ); 194 // } 195 // }
效果图，如下：
