短视频app开发,Flutter StaggeredGridView的瀑布流效果

短视频app开发,Flutter StaggeredGridView的瀑布流效果实现的相关代码

 

1
dependencies:<br>      flutter_staggered_grid_view: 0.4.0<br>import 'dart:math';<br>import 'package:flutter/cupertino.dart';<br>import 'package:flutter/material.dart';<br>import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';<br>void main(List<String> args) {<br>  runApp(app());<br>}<br>class app extends StatelessWidget {<br>  const app({Key key}) : super(key: key);<br>  @override<br>  Widget build(BuildContext context) {<br>    return MaterialApp(<br>      home: homebody(),<br>    );<br>  }<br>}<br>class homebody extends StatelessWidget {<br>  @override<br>  Widget build(BuildContext context) {<br>    return Scaffold(<br>      appBar: AppBar(<br>        title: const Text('StaggeredGridView'),<br>      ),<br>      body: Padding(<br>        padding: const EdgeInsets.all(4),<br>        child: StaggeredGridView.countBuilder(<br>            shrinkWrap: true,<br>            crossAxisCount: 4,<br>            crossAxisSpacing: 4,<br>            mainAxisSpacing: 4,<br>            itemCount: 100,<br>            itemBuilder: (context, index) {<br>              return Container(<br>                height:100+200*Random().nextDouble(),<br>                  color: Colors.green,<br>                  child: new Center(<br>                    child: new CircleAvatar(<br>                      backgroundColor: Colors.white,<br>                      child: new Text('$index'),<br>                    ),<br>                  ));<br>            },<br>            staggeredTileBuilder: (index) => StaggeredTile.fit(1)),<br>      ),<br>    );<br>  }<br>}

以上就是短视频app开发,Flutter StaggeredGridView的瀑布流效果实现的相关代码, 更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(174)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示