欢迎来到代码驿站!

Android代码

当前位置:首页 > 移动开发 > Android代码

Flutter StaggeredGridView实现瀑布流效果

时间:2022-09-22 10:40:02|栏目:Android代码|点击:

本文实例为大家分享了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 ExpandableListView使用方法案例详解

栏    目:Android代码

下一篇:详解android.mk中引用第三方库的方法

本文标题:Flutter StaggeredGridView实现瀑布流效果

本文地址:http://www.codeinn.net/misctech/214333.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有