Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Flutter StaggeredGridView瀑布流效果

Flutter StaggeredGridView实现瀑布流效果

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

效果如下:

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

您可能感兴趣的文章:
阅读全文