## 电影海报实例 1. GridView网格列表的使用 2. 图片网格列表的使用 3. 编写和讲解 #### GridView Widget 1. padding： 设置内边距的属性 2. crossAxisSpacing：网格间的空隙（相当于外边距） 3. crossAxisCount：网格的列数 ~~~ Widget build(BuildContext context){ return MaterialApp( title: '电影海报实例', home: Scaffold( appBar: AppBar( title: Text('电影海报实例') ), // GridView有几种方案，builder，count设置每一行的列数，custom，extent body: GridView.count( padding: const EdgeInsets.all(10.0),//内边距不允许直接设置值， crossAxisSpacing: 10.0, crossAxisCount: 3, children: <Widget>[ const Text('Flutter'), const Text('Flutter'), ] ) ), ); } ~~~ 实例 ~~~ import 'package:flutter/material.dart'; void main()=> runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: '电影海报实例', home: Scaffold( appBar: AppBar( title: Text('电影海报实例') ), // GridView有几种方案，builder，count设置每一行的列数，custom，extent body: GridView( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing:2.0, //主轴 crossAxisSpacing: 2.0, //副轴 childAspectRatio: 0.7//长宽比 ), children: <Widget>[ new Image.network('http://img5.mtime.cn/mg/2019/07/24/095433.91168731.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mg/2019/07/24/095433.91168731.jpg',fit: BoxFit.cover), new Image.network('http://img5.mtime.cn/mg/2019/07/24/095433.91168731.jpg',fit: BoxFit.cover), ], ) ), ); } } ~~~