flutter 宫格组件GridView

方式一:

GridView.count(
  shrinkWrap: true,  尽可能满足自身大小而非父容器
  crossAxisCount: 3,  列数
  crossAxisSpacing: 20.0, 设置左右组件距离
  mainAxisSpacing:20.0,  设置上下组件距离
  padding: EdgeInsets.all(10),
  childAspectRatio: 0.7,   通过比例设置子组件高度,越小越高，在宫格里子组件设置高度无效
  children:this._get(),  类型为widget的数组,List<Widget>

);

方式二:

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 
  
      crossAxisCount: 3,    列数
	  mainAxisSpacing : 0.0, 设置左右组件距离
	  crossAxisSpacing : 0.0, 设置上下组件距离
	  childAspectRatio : 1.0,  通过比例设置子组件高度,越小越高，在宫格里子组件设置高度无效
  ),
  itemCount:10,    内容数量
  itemBuilder:(item,index){
    return  组件
  }
);

代码示例:

import 'package:flutter/material.dart';

void main(){
  runApp(App());
}

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

class Home extends StatelessWidget{

List<Widget> _get()
{
  List<Widget> list=new List();
  for(int i=0;i<10;i++)
  {
    list.add(Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,));
  }

  return list;
}

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      crossAxisCount: 3, //列数
      crossAxisSpacing: 20.0,//设置左右组件距离
      mainAxisSpacing:20.0, //设置上下组件距离
      padding: EdgeInsets.all(10),
      childAspectRatio: 0.7, //通过比例设置子组件高度,越小越高，在宫格里子组件设置高度无效
      children:this._get(),

    );
  }
}


class Home2 extends StatelessWidget{
List<Widget> _get()
{
  List<Widget> list=new List();
  for(int i=0;i<10;i++)
  {
    list.add(Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,));
  }

  return list;
}

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //配置.count形势下的参数
          crossAxisCount: 3,
      ),
      itemCount:10,  
      itemBuilder:(item,index){
        return Text('hh');
      }
      );
  }
}