2019-10-20 Fultter学习（五）Gridview组件

一、 Flutter 列表组件概述
二、 Flutter GridView 组件的常用参数
三、 Flutter GridView.count 实现网格
四、 Flutter GridView.builder 实现网格布局

GridView的常用参数介绍

1.Gridview创建网格布局的方式有多种，介绍最常见的两种：
一是通过Gridview.count创建 ，一是通过Gridview.builder创建
2.常见的属性
名称 ？ 类型 ？ 说明
scrollDirection ？ Axis ？滚动方法
padding ? EdgeInsetsGeometry ？内边距
resolve ? boolean ? 反向排序
crossAxisSpacing？ double? 水平子组件weight之间的间距
mainAxisSpacing？ double ?垂直子组件之间的间距
crossAxisCount ？ int ? 一行有多少个weight
childAspectRatio? double ？子weight的宽高比例
child ？ []
gridDelegate ? 控制布局主要用在Gridview.builder中

Gridview.count实现网格的形式

贴上代码看

class LayoutDemo extends StatelessWidget {  
  List _getListData() {
      List list = new List();
      for (var i = 0; i < 20; i++) {
        list.add(Container(
          alignment: Alignment.center,
          child: Text(
            '这是第$i条数据',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          color: Colors.blue,        
          // height: 400,  //设置高度没有反应
        ));
      }
      return list;
  }
  @override
  Widget build(BuildContext context) {    
    return GridView.count(
        crossAxisSpacing:20.0 ,   //水平子 Widget 之间间距
        mainAxisSpacing: 20.0,    //垂直子 Widget 之间间距
        padding: EdgeInsets.all(10),
        crossAxisCount: 2,  //一行的 Widget 数量
        childAspectRatio:0.7,  //宽度和高度的比例
        children: this._getListData(),
    );
  }
}

另外如果是通过另一个文件夹引入的集合，例如文件夹是res,要先导入文件按夹的路径，才能获取集合，代码如下

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 {  
  List _getListData() {
      var tempList=listData.map((value){
          return Container(            
            child:Column(
                children: [
                  Image.network(value['imageUrl']),
                  SizedBox(height: 12),
                  Text(
                    value['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,  //设置高度没有反应
          );
      });
      // ('xxx','xxx')
      return tempList.toList();
  }
  @override
  Widget build(BuildContext context) {    
    return GridView.count(
        crossAxisSpacing:10.0 ,   //水平子 Widget 之间间距
        mainAxisSpacing: 10.0,    //垂直子 Widget 之间间距
        padding: EdgeInsets.all(10),
        crossAxisCount: 2,  //一行的 Widget 数量
        // childAspectRatio:0.7,  //宽度和高度的比例
        children: this._getListData(),
    );
  }
}

import 'res/listData.dart';是引入路径 SizedBox(height: 12)间距12px ,和padding类似 ； decoration: BoxDecoration（）边框属性
border: Border.all（）设置边框的颜色，宽度等。

Gridview.build创建网格

 @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,
    );
  }

builder创建网格需要用到gridDelegate:SliverGridDelegateWithFixedCrossAxisCount（）属性；
用法基本和count一样 。