Flutter学习四:GridView练习
GridView有两种创建方式:1.通过最大宽度2.通过单行展示个数
import 'package:flutter/material.dart'; void main() { //debugPaintSizeEnabled = true; runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //根布局 return new MaterialApp( title: "Flutter", home: new Scaffold( appBar: new AppBar( title: new Text( "AppBar", ), ), body: new MyBody(), ), ); } } class MyBody extends StatelessWidget { @override Widget build(BuildContext context) { return buildGridViewExtent(); } } //GridView.count 允许您指定列数 Widget buildGridViewCount() { return new GridView.count( crossAxisCount: 2, padding: const EdgeInsets.all(0.0), mainAxisSpacing: 0.0, crossAxisSpacing: 0.0, children: <Widget>[ new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), ], ); } //GridView.extent 允许您指定项的最大像素宽度 Widget buildGridViewExtent() { return new GridView.extent( maxCrossAxisExtent: 150.0, padding: const EdgeInsets.all(0.0), mainAxisSpacing: 0.0, crossAxisSpacing: 0.0, children: <Widget>[ new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), new Image.asset('images/lake.jpg'), ], ); }
效果图:
1.buildGridViewCount
2.buildGridViewExtent