Flutter StaggeredGridView实现瀑布流效果

本文实例为大家分享了Flutter StaggeredGridView实现瀑布流的具体代码，供大家参考，具体内容如下

在根目录pubspec.yaml文件中添加依赖

dependencies:
      flutter_staggered_grid_view: 0.4.0
import 'dart:math';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main(List<String> args) {
  runApp(app());
}

class app extends StatelessWidget {
  const app({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: homebody(),
    );
  }
}

class homebody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('StaggeredGridView'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(4),
        child: StaggeredGridView.countBuilder(
            shrinkWrap: true,
            crossAxisCount: 4,
            crossAxisSpacing: 4,
            mainAxisSpacing: 4,
            itemCount: 100,
            itemBuilder: (context, index) {
              return Container(
                height:100+200*Random().nextDouble(),
                  color: Colors.green,
                  child: new Center(
                    child: new CircleAvatar(
                      backgroundColor: Colors.white,
                      child: new Text('$index'),
                    ),
                  ));
            },
            staggeredTileBuilder: (index) => StaggeredTile.fit(1)),
      ),
    );
  }
}

效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Flutter瀑布流仿写原生的复用机制详解

    Flutter瀑布流仿写原生的复用机制详解

    目录 废话开篇: 先看复用效果 复用状态打印 问题一.实现思路是什么? 问题二.UI布局代码分析. 总结 废话开篇: iOS与android在实现列表界面的时候是有重用机制的,目的就是减少内存开销,用时间换空间.个人感觉flutter并没有特别强调复用,关于listView.builder 的"复用"个人感觉应该是销毁跟重建的过程,所以这里用flutter实现了简单的复用机制.代码拙劣,大神勿喷,共同进步 先看复用效果 复用状态打印 右侧是简单实现瀑布流界面,里面显示的是一共有39个W

  • 详解Flutter混排瀑布流解决方案

    详解Flutter混排瀑布流解决方案

    背景 流式布局,这是一种当前无论是前端,还是Native都比较流行的一种页面布局.特别是对于商品这样的Feeds流,无论是淘宝,京东,美团,还是闲鱼.都基本上以多列瀑布流进行呈现,容器列数固定,然后每个卡片高度不一,形成参差不齐的多栏布局. 对于Native来说,无论是iOS还是Android,CollectionView和RecyclerView都能满足我们的绝大部分场景了.不过目前闲鱼很多业务场景都是在Flutter上进行实现的,当时Flutter官方只提供了ListView和GridVie

  • Android Flutter自适应瀑布流案例详解

    Android Flutter自适应瀑布流案例详解

    目录 Flutter自适应瀑布流 根据效果图可以分为四步: 1.图片自适应: 2.自适应标签: 3.上拉刷新和下拉加载 4.底部的点赞按钮 Flutter自适应瀑布流 前言:在电商app经常会看到首页商品推荐的瀑布流,或者类似短视频app首页也是瀑布流,这些都是需要自适应的,才能给用户带来好的体验 (具体代码请联系我,当天会回复) 话不多说先上效果图: 根据效果图可以分为四步: 图片自适应 自适应标签 上拉刷新和下拉加载 底部的点赞按钮可以去掉或者自己修改样式,我这里使用的like_button

  • Flutter StaggeredGridView实现瀑布流效果

    Flutter StaggeredGridView实现瀑布流效果

    本文实例为大家分享了Flutter StaggeredGridView实现瀑布流的具体代码,供大家参考,具体内容如下 在根目录pubspec.yaml文件中添加依赖 dependencies:       flutter_staggered_grid_view: 0.4.0 import 'dart:math'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'pac

  • 使用JS实现图片展示瀑布流效果(简单实例)

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • jquery实现瀑布流效果 jquery下拉加载新数据

    jquery实现瀑布流效果 jquery下拉加载新数据

    瀑布流效果在很多网站还是有的,这种错落有致的排布看着还是很不错的呢.今天我就来记录一下关于用jquery实现瀑布流效果的代码: 一.页面基本排版 1. items盒子主要用来存放我们需要摆放的数据item: 2. tips是页面加载数据的时候用来提示用户的文本: <div class="wrapper"> <div class="items"> <div class="item"></div> &l

  • 基于JavaScript实现瀑布流效果

    本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下 前端内容: 使用JavaScript和四个div,将照片放入四个div中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container { width: 1000px

  • JavaScript实现图片自动加载的瀑布流效果

    JavaScript实现图片自动加载的瀑布流效果

    先给大家展示下效果图: 向下滑动网页的时候能够自动加载图片并显示. 盛放图片的盒子模型如下: <div class="box"> <div class="box_img"> <img src="Img/8.jpg"> </div> </div> 设置img-width为150px,然后box_img添加内边距和阴影效果,box的外边距为0,添加内边距.盒子的宽度是由img-width和边

  • PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】

    导读: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像花瓣网.蘑菇街.美丽说等. 不废话,直接上代码,整段代码分为前后两段代码,具体代码如下所示. 前台: <?php <br>$category=$this->getMyVal('category',$_GET);<br>

  • Android RecyclerView详解之实现 ListView GridView瀑布流效果

    Android RecyclerView详解之实现 ListView GridView瀑布流效果

     什么是RecyclerView RecyclerView 是Google推出的最新的 替代ListView.GridView的组件,RecyclerView是用来显示大量数据的容器,并通过有限数量的子View,来提高滚动时的性能. 与ListView不同,RecyclerView 不再负责布局,而是专注于布局复用.布局主要通过 LayoutManager来管理,目前提供了3种常用的布局管理: LinearLayoutManager 线性布局管理器 (ListView效果) GridLayout

  • 使用JS实现图片展示瀑布流效果的实例代码

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • jquery实现瀑布流效果分享

    使用jquery实现瀑布流效果,大家参考使用吧,运行后可以看到效果,代码中的JQ引入一定要换成自己的才好 复制代码 代码如下: <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>AJAX</title> <link rel="stylesheet" href="boot

随机推荐