大道不同，却又总是殊途同归，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(width: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(width: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), width: 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 // }
效果图，如下：