GridView滚动列表的顶级用法【flutter20个实例之二】

一、老套路，先看样式

文章底部源码，图一是样式，图二是我实际开发中的展示

二、讲解（后附源码）

1.这里主要是用到GridView 组件

GridView是一个可滚动的，2D数组控件。

gridDelegate参数控制子控件的排列，有2个选择：

• SliverGridDelegateWithFixedCrossAxisCount：交叉轴方向上固定数量，对于垂直方向的GridView来说交叉轴方向指的是水平方向。
• SliverGridDelegateWithMaxCrossAxisExtent：交叉轴方向上尽量大，比如水平方上有500空间，指定此值为150，那么可以放3个，剩余一些空间，此时GridView将会缩小每一个Item，放置4个。

SliverGridDelegateWithFixedCrossAxisCount有属性介绍如下：

• crossAxisCount：交叉轴方向上个数。
• mainAxisSpacing：主轴方向上2行之间的间隔。
• crossAxisSpacing：交叉轴方向上之间的间隔。
• childAspectRatio：子控件宽高比。

2.如果需要翻转滚动方向，比如从上到下，改为从下到上

需要设置属性：true表示翻转

reverse: false

3.如果需要横向滚动，设置以下属性

scrollDirection: Axis.horizontal

4.为了好像我们需要整体给gridview组件，增加一个padding

按Alt+Enter可以调出新增组件的快捷键，鼠标放在某个组件上，然后Alt+Enter可以给组件包裹一层padding

相关快捷键操作链接：Android Studio对flutter的一些快捷键

5.当然通过children的方式加载组件并不是个好方式

GridView提供了一些快速构建的方法 ，记住以下常用的两个就行

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (context, index) {
    return Container(
      height: 80,
      color: Colors.primaries[index % Colors.primaries.length],
    );
  },
  itemCount: 50,
)

GridView.count(
  crossAxisCount: 3,
  children: List.generate(50, (i) {
    return Container(
      height: 80,
      color: Colors.primaries[i % Colors.primaries.length],
    );
  }),
)

三、源码

import 'package:flutter/material.dart';

class Mytest extends StatefulWidget {
  @override
  _MytestState createState() => _MytestState();
}

class _MytestState extends State<Mytest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('songms'),
        ), //这个是顶部tab样式，如果不需要可以去掉
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: getItem(),
        ));
  }

  //列表
  Widget getItem() {
    return GridView.builder(
      //scrollDirection: Axis.horizontal,//增加上这个就会横向滚动
      reverse: false, //设置为true就会反向滚动，比如从下到上，从左到右
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, //这里代表每行显示几个
          crossAxisSpacing: 10, //两列之间的距离(竖向滚动)
          mainAxisSpacing: 4 //两行之间的距离（竖向滚动）
          ),
      itemBuilder: (context, index) {
        return _createGridViewItem(Colors.primaries[index]);
      },
      itemCount: 12,
    );
    //以下是最基础的方式
    /*return GridView(
      children: [
        _createGridViewItem(Colors.primaries[0]),
      ],
    );*/
  }

  //单个crad,这里可以自己定义一些样式
  Widget _createGridViewItem(Color color) {
    return Container(
      height: 80,
      color: color,
    );
  }
}

持续更新......