Flutter 组件之 SliverGrid

Flutter 组件之 SliverGrid

1.简介

和GridView差不到

2.属性

  • delegate:两种渲染方式SliverChildListDelegate/SliverChildBuilderDelegate
  • gridDelegate:SliverGridDelegateWithFixedCrossAxisCount、SliverGridDelegateWithMaxCrossAxisExtent

3.使用

  • SliverGridDelegateWithFixedCrossAxisCount属性
    crossAxisCount:副轴方向child的列数或行数,垂直滚动就是列数,水平滚动就是行数
    mainAxisSpacing:主轴方向间隔
    crossAxisSpacing:副轴方向间隔
    childAspectRatio:child的宽高比

  • SliverGridDelegateWithMaxCrossAxisExtent属性
    maxCrossAxisExtent:副轴方向child的最大长度,例如:值为200,设置垂直滚动,那就是水平方向上child的最大宽度就是200,如果父控件最大允许宽度是500,只能放下2.5个,那么child的宽度就会变成500/3
    mainAxisSpacing:主轴方向间隔
    crossAxisSpacing:副轴方向间隔
    childAspectRatio:child的宽高比

Flutter 组件之 SliverGrid_第1张图片

  • 第二种写法
    Flutter 组件之 SliverGrid_第2张图片

你可能感兴趣的:(Flutter,组件,flutter,前端,android,ios)