06Flutter GridView

GridView组件

1. 常用属性

scrollDirection	Axis 滚动方法
padding	EdgeInsetsGeometry 内边距
reverse	boolean 组件反向排序
crossAxisSpacing	double 水平子Widget之间间距
mainAxisSpacing	double 垂直子Widget之间间距
crossAxisCount	int 一行的Widget数量
childAspectRatio	double 子Widget宽高比例
children	[]
gridDelegate	SliverGridDelegateWithFixedCrossAxisCount(常用)， SliverGridDelegateWithMaxCrossAxisExtent 控制布局主要用在GridView.builder里面

2. GridView第一种使用方式 ————GridView.count

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('FlutterDemo')),
      body: LayoutDemo(),
    ));
  }
}
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2, //一行的 Widget 数量
      // childAspectRatio: 6,
      children: <Widget>[
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要'),
        Text('世界不需要')
      ],
    );
  }
}

——————弊端： item不能复用，内容过多，占用内存过多，类似于android scrollview的使用

3.GridView第二种使用方式———— GridView.builder

import 'package:flutter/material.dart';

import '../res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FlutterDemo')),
        body: LayoutDemo(),
      ));
  }
}
class LayoutDemo extends StatelessWidget {  

  Widget _getListData (context,index) {
        return Container(            
            child:Column(
                children: <Widget>[
                  Image.network(listData[index]['imageUrl']),
                  SizedBox(height: 12),
                  Text(
                    listData[index]['title'],
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 20
                    ),
                  )
                ],

            ),
            decoration: BoxDecoration(
              border: Border.all(
                color:Color.fromRGBO(233, 233,233, 0.9),
                width: 1
              )
            ),
              
            // height: 400,  //设置高度没有反应
          );
  }


  @override
  Widget build(BuildContext context) {    
    return GridView.builder(
        
        //注意
        gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
          mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距          
          crossAxisCount: 2,  //一行的 Widget 数量
        ),
        itemCount: listData.length,
        itemBuilder:this._getListData,
    );
  }
}

————对于SliverGridDelegateWithMaxCrossAxisExtent而言，水平方向元素个数不再固定，其水平个数也就是有几列，由maxCrossAxisExtent和屏幕的宽度以及padding和mainAxisSpacing等决定。

数据源

  List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      }      
  ];

4. 使用GridView注意点

1.设置图片宽度是无效的，需要通过 childAspectRatio: 0.7,

2.开发中推荐第二种使用方式，复用item

5.如何解决手机相册中图片问题

1.切勿直接使用GridView和ImageView加载，内存暂用过多，加载，缓慢，毕竟相册图片目前主流手机都是5M以上

2.应该将图片进行裁剪压缩进行加载

参考文章：https://blog.csdn.net/weixin_39982537/article/details/111220902?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161734520216780255211420%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161734520216780255211420&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_blogfirst_rank_v2~rank_v29-10-111220902.pc_v2_rank_blog_default&utm_term=Flutter+GridView%E7%BB%84%E4%BB%B6