Flutter 使用GridView写一个根据child数量自动增加的GridList

850 阅读1分钟
class GrideMenu extends StatelessWidget {
GrideMenu({
	Key key,
    @required this.items,
    @required this.onTap,
    @required this.crossAxisCount 
   }):super(key:key);
   
	final List items;  //children的数量
	final Function onTap; //child的点击事件
	final int crossAxisCount; //每行的child个数
    
  Widget build(context) {
  	
    //对children的数量取余
    //如果不等于0就说明存在多出来的children
    //那么行数就必须加1
    final int more = items.length % crossAxisCount;
    final int minCount = items.length ~/ crossAxisCount;
    final int maxCount = more == 0 ? minCount : minCount + 1;
    //获取宽度
    final screenWidth = MediaQuery.of(context).size.width;
    //求取单个child的宽度
    final itemWidth = screenWidth /crossAxisCount;
    return Container(
      width: context.width,
      padding: EdgeInsets.all(8),
      height: maxCount * (itemWidth - 10.0),
      child: GridView.builder(
      	//不允许GridView内的children滚动
          physics: NeverScrollableScrollPhysics(),
          itemCount: items.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              //横轴元素个数
              crossAxisCount: crossAxisCount,
              //纵轴间距
              mainAxisSpacing: 5.0,
              //横轴间距
              crossAxisSpacing: 5.0,
              //子组件宽高长度比例
              childAspectRatio: 1),
          itemBuilder: (ctx, index) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                GestureDetector(
                  onTap: onTap,
                  child: Container(
                    color:Color(0xff0099ff)
                  ),
                ),
              ],
            );
          }),
    );
  }
}