前端入門flutter-07GridView元件 以及動態GridView
阿新 • • 發佈：2021-01-19
大道不同，卻又總是殊途同歸，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 // }
效果圖，如下：