Flutter中GridView组件的常用参数

当数据量很大的时候用矩阵方式排列比较清晰,此时我们可以用网格列表组件GridView实现布局

GridView创建网格列表有多种方式,下面我们主要介绍两种

1.可以通过GridView.count实现网格布局

2.通过GridView.builder实现网格布局

常用属性:

属性名称	类型	说明
scrollDirection	Axis	滚动方法
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
crossAxisSpacing	double	水平子Wdiget之间间距
mainAxisSpacing	double	垂直子Widget之间间距
crossAxisCount	int	一行的Widget数量
childAspectRatio	double	子Widget宽高比例
children		<Widget>[]
gridDelegate	SliverGridDelegateWithFix edCrossAxisCount（常用） SliverGridDelegateWithMax CrossAxisExtent	控制布局主要用在GridView.builder里面

GridView.count实现网格布局

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: LayoutContent(), 
            )
        );  
    } 
} 
class LayoutContent extends StatelessWidget { 
    List _getListData() { 
        var tempList=listData.map((value){ 
            return Container( 
                child: Column( 
                    children<Widget>: 
                        [ 
                            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(230, 230, 230, 0.9),
                     width: 1.0 
                     )
                 ), 
              ); 
            }
        ); 
        // ('124124','124214') 
        return tempList.toList(); 
    } 
    @override 
    Widget build(BuildContext context) { 
        // TODO: implement build 
        return GridView.count( 
            padding: EdgeInsets.all(20), 
            crossAxisCount: 2, 
            crossAxisSpacing: 20, 
            mainAxisSpacing: 20, 
            // childAspectRatio:0.7, 
            children: this._getListData(), 
        ); 
    } 
}

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: LayoutContent(), 
        )
    ); 
    } 
} 
class LayoutContent extends StatelessWidget { 
    Widget _getListData(context,index) { 
    return Container( 
        child: Column( 
            children: [ 
                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(230, 230, 230, 0.9), 
            width: 1.0 ) 
        ), 
    ); 
} 
@override 
Widget build(BuildContext context) { 
    // TODO: implement build 
    return GridView.builder( 
        itemCount: listData.length, 
        gridDelegate:SliverGridDelegateWithFixedCrossAxisCount( 
            //横轴元素个数 
            crossAxisCount: 2, 
            //纵轴间距 
            mainAxisSpacing: 20.0, 
            //横轴间距 
            crossAxisSpacing: 10.0, 
            //子组件宽高长度比例 
            childAspectRatio: 1.0 
        ), 
        itemBuilder: this._getListData, 
    ); 
} 
}