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自定义View详解

    Android自定义View详解

    这篇文章主要为大家详细介绍了Android自定义View,帮助大家战胜Android自定义View,为今后的学习打下基础,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • Flutter 日期时间DatePicker控件及国际化

    Flutter 日期时间DatePicker控件及国际化

    这篇文章主要介绍了Flutter 日期时间DatePicker控件及国际化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • Android控件CardView实现卡片效果

    Android控件CardView实现卡片效果

    这篇文章主要为大家详细介绍了Android控件CardView实现卡片效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Android自定义WaveProgressView实现水波纹加载需求

    Android自定义WaveProgressView实现水波纹加载需求

    这篇文章主要为大家详细介绍了Android自定义WaveProgressView实现水波纹加载需求,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • Flutter使用sqflite处理数据表变更的方法详解

    Flutter使用sqflite处理数据表变更的方法详解

    了解过数据库的同学应该会知道,数据表结构是可能发生改变的。所以本文为大家介绍了Flutter 使用 sqflite 处理数据表变更的版本升级处理方法,感兴趣的可以了解一下
    2023-04-04
  • android编程实现sd卡读取数据库的方法

    android编程实现sd卡读取数据库的方法

    这篇文章主要介绍了android编程实现sd卡读取数据库的方法,涉及Android权限控制及针对sd卡与数据库的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • Android Kotlin 高阶函数详解及其在协程中的应用小结

    Android Kotlin 高阶函数详解及其在协程中的应用小结

    高阶函数是 Kotlin 中的一个重要特性,它能够将函数作为一等公民(First-Class Citizen),使得代码更加简洁、灵活和可读,本文给大家介绍Android Kotlin 高阶函数详解及其在协程中的应用,感兴趣的朋友一起看看吧
    2025-03-03
  • Android实现带有边框的ListView和item的方法

    Android实现带有边框的ListView和item的方法

    这篇文章主要介绍了Android实现带有边框的ListView和item的方法,结合实例形式分析了ListView和item四周添加边框的实现步骤与相关技巧,需要的朋友可以参考下
    2016-07-07
  • 详解Android Studio3.5及使用AndroidX的一些坑

    详解Android Studio3.5及使用AndroidX的一些坑

    这篇文章主要介绍了详解Android Studio3.5及使用AndroidX的一些坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Android开发笔记之:Splash的实现详解

    Android开发笔记之:Splash的实现详解

    本篇文章是对Android中Splash的实现进行了详细的分析介绍,需要的朋友参考下
    2013-05-05

最新评论