专栏首页技术人生GridView滚动列表的顶级用法【flutter20个实例之二】

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,
    );
  }
}

持续更新......

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • python报错wkhtmltopdf: command not found【python】

    yum install zlib fontconfig freetype X11 libs libX11 libXext libXrender libpng*

    sinnoo
  • Linux安装npm/node

    sinnoo
  • Laravel数据库操作之DB facade

    sinnoo
  • 34款Firefox渗透测试插件

    工欲善必先利其器,firefox一直是各位渗透师必备的利器,小编这里推荐34款firefox渗透测试辅助插件,其中包含渗透测试、信息收集、代理、加密解密等功能。...

    joshua317
  • 了解 xss 和 防御 xss

    西南_张家辉
  • 干掉安全员,Robotaxi的下一站是哪里?

    紧接着,Cruise获准在加州公共道路测试全自动驾驶汽车之后,于10月16日宣布,计划在今年年底前将不配备安全员的全自动驾驶测试车派上路。

    用户2908108
  • 使用CAS的RESTFUL接口使CS系统单点登录BS系统

    Java学习123
  • BZOJ 4318: OSU!

    Description osu 是一款群众喜闻乐见的休闲软件。  我们可以把osu的规则简化与改编成以下的样子:  一共有n次操作,每次操作只有成功与失败之分...

    attack
  • B站发布毕业季大数据报告,最让年轻人头秃的原来是?

    第一代独生子女身份的 80 后被认为自私,90 后又吃不了苦,而今年夏天迎接毕业季的 95 后 Z 世代们时常被打上散漫、任性,爱享乐的标签。

    老九君
  • Intellij IDEA中安装&使用PlantUML画时序图、类图等

    转载自 https://www.jianshu.com/p/a6bd7e3048ef

    allsmallpig

扫码关注云+社区

领取腾讯云代金券