前端开发进阶篇——Flutter实战之网格组件

        网格组件是我们页面常用的组件，比如相册展示，电影展示。下面我将使用GridView完成一个小的热门电影页面展示。效果如下：

2. 主函数入口

        void main(List<String> args) {

          runApp(MyApp());

        }

        class MyApp extends StatelessWidget {

          @override

          Widget build(BuildContext context) {

            return MaterialApp(

              title: 'Hello Flutter',

              home: Scaffold(

                  appBar: new AppBar(

                    title: Text('热门电影'),

                  ),

                  body: Center(

                      child: Container(

                    child: MyGridView(),

                    //height: 200,

                  ))),

            );

          }

        }

     在主函数入口文件中我们定义了顶部导航（appbar）、在函数体body中就是我们的主体内容，我使用了center和container组件进行了包裹。

2. 页面主体MyGridView()编写

            class MyGridView extends StatelessWidget {

              @override

              Widget build(BuildContext context) {

                return GridView(

                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

                      crossAxisCount: 3,

                      mainAxisSpacing: 2.0,

                      crossAxisSpacing: 2.0,

                      childAspectRatio: 0.7),

                  children: <Widget>[

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',

                        fit: BoxFit.cover),

                    new Image.network(

                        'http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',

                        fit: BoxFit.cover),

                  ],

                );

              }

            }

        这个类我们返回了一个GridView组件。下面我将对GridView组件进行介绍。

• gridDelegate：控制整个GridView子组件的布局。

• crossAxisCount: 网格的列数，相当于一行放置的个数。

• mainAxisSpacing: 主轴方向的间距。

• crossAxisSpacing: 网格间的距离。

• childAspectRatio: 子元素在横轴长度和主轴长度的比例，也就是我们宽和高的比例。

        在每一个网格中，我们都放了Image组件，其中用到了fit参数进行图片缩放模式设置，下面我们对其进行介绍一下。

• fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。

• cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。

• contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。