flutter 宫格组件GridView

迈不过友情╰ 2021-07-25 01:34 418阅读 0赞

方式一:
    
    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');
          }
          );
      }
    }