Flutter StaggeredGridView实现瀑布流效果

 更新时间:2022年03月23日 09:04:39   作者:GalenWu  
这篇文章主要为大家详细介绍了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)),
      ),
    );
  }
}

效果如下:

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

相关文章

  • 详解Android中通过Intent类实现组件间调用的方法

    详解Android中通过Intent类实现组件间调用的方法

    Intent能够实现应用间的数据交互与通讯,将实现者和调用者解耦,接下来就来详解Android中通过Intent类实现组件间调用的方法,需要的朋友可以参考下
    2016-05-05
  • viewpager实现自动循环轮播图

    viewpager实现自动循环轮播图

    这篇文章主要为大家详细介绍了viewpager实现自动循环轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • Android嵌套滚动的传统方法与思路

    Android嵌套滚动的传统方法与思路

    Android嵌套滚动是在开发中经常遇到的一个需求,这篇文章主要介绍了Android嵌套滚动的传统方法与思路的相关资料,对各位Android开发者们具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 解决flutter 错误: 程序包androidx.lifecycle不存在问题

    解决flutter 错误: 程序包androidx.lifecycle不存在问题

    这篇文章主要介绍了解决flutter 错误: 程序包androidx.lifecycle不存在问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • Android 改变图标原有颜色和搜索框的实例代码

    Android 改变图标原有颜色和搜索框的实例代码

    让Android也能有iOS那么方便的图片色调转换,就像同一个图标,但是有多个地方使用,并且颜色不一样,就可以用这个方法了。 本文实现TextView图片和文字居中,键盘搜索功能,具体实现代码大家跟随脚本之家小编看看吧
    2017-09-09
  • Android实现手指触控图片缩放功能

    Android实现手指触控图片缩放功能

    这篇文章主要为大家详细介绍了Android实现手指触控图片缩放功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • 分析Android App中内置换肤功能的实现方式

    分析Android App中内置换肤功能的实现方式

    这篇文章主要介绍了Android App中内置换肤功能的实现方式,文中举了一个类似QQ空间中换肤方式的例子作为说明,需要的朋友可以参考下
    2016-02-02
  • Android访问php取回json数据实例

    Android访问php取回json数据实例

    Android访问php取回json数据,实现代码如下,遇到访问网络的权限不足在AndroidManifest.xml中,需要进行如下配置
    2013-06-06
  • Android NavigationBar问题处理的方法

    Android NavigationBar问题处理的方法

    本篇文章主要介绍了Android NavigationBar问题处理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • Android ImageView 固定宽高比例的实现方法

    Android ImageView 固定宽高比例的实现方法

    这篇文章主要介绍了Android ImageView 固定宽高比例的实现方法的相关资料,,方法一:设置 adjustViewBounds="true",方法二:使用 Universal-Image-Loader 图片缓存类,需要注意的是方法二和方法一同时使用导致设置无效,需要的朋友可以参考下
    2017-07-07

最新评论