Flutter-GridView

最新推荐文章于 2024-10-09 18:05:27 发布

ClearLiang

最新推荐文章于 2024-10-09 18:05:27 发布

阅读量435

点赞数

分类专栏： Flutter 文章标签： Flutter

本文链接：https://blog.csdn.net/qq_33488315/article/details/90794041

版权

Flutter 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Flutter组件之GridView

##创建方式一：

GridView.count(crossAxisCount);
GridView.custom(gridDelegate, childrenDelegate);
GridView.builder(gridDelegate, itemBuilder);
GridView.extent(maxCrossAxisExtent);

GridView.count()

必选

1. children 		=> List<Widget>	组件数组    
2. crossAxisCount	=> int			列数

可选

1. crossAxisSpacing 	=> double				左右间隔（列间距）默认0.0
2. mainAxisSpacing 		=> double				上下间隔（行间距）默认0.0
3. padding				=> EdgeInsetsGeometry	内间距
4. scrollDirection		=> Axis					滚动方向，默认垂直
5. childAspectRatio		=> double				宽高比，默认1.0

例子

class MyGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: const EdgeInsets.all(5.0),
      crossAxisSpacing: 5.0,
      mainAxisSpacing: 5.0,
      crossAxisCount: 3,
      childAspectRatio: 4/3,
      children: <Widget>[
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
      ],
    );
  }
}

##创建方式二：

new GridView(gridDelegate,children)

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount

GridView必选

1. children 		=> List<Widget>			组件数组    
2. gridDelegate		=> SliverGridDelegate	表格委托

GridView可选

1. padding				=> EdgeInsetsGeometry	内间距
2. scrollDirection		=> Axis					滚动方向，默认垂直

SliverGridDelegateWithFixedCrossAxisCount

1. crossAxisCount: 3,    //列数
2. mainAxisSpacing: 2.0, //上下间隔（行间距）
3. crossAxisSpacing: 2.0,//左右间隔（列间距）
4. childAspectRatio: 1.5,//宽高比（宽比高）

例子

class MyGridView1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,    
        mainAxisSpacing: 2.0, 
        crossAxisSpacing: 2.0,
        childAspectRatio: 1.5,
      ),
      padding: EdgeInsets.fromLTRB(3.0,10.0,3.0,0.0),
      children: <Widget>[
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
        new Image.network(imgUrl,fit: BoxFit.cover,),
      ],
    );
  }
}