Flutter StaggeredGridView實(shí)現(xiàn)瀑布流效果
本文實(shí)例為大家分享了Flutter StaggeredGridView實(shí)現(xiàn)瀑布流的具體代碼,供大家參考,具體內(nèi)容如下
在根目錄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)), ? ? ? ), ? ? ); ? } }
效果如下:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Android中通過Intent類實(shí)現(xiàn)組件間調(diào)用的方法
Intent能夠?qū)崿F(xiàn)應(yīng)用間的數(shù)據(jù)交互與通訊,將實(shí)現(xiàn)者和調(diào)用者解耦,接下來就來詳解Android中通過Intent類實(shí)現(xiàn)組件間調(diào)用的方法,需要的朋友可以參考下2016-05-05viewpager實(shí)現(xiàn)自動循環(huán)輪播圖
這篇文章主要為大家詳細(xì)介紹了viewpager實(shí)現(xiàn)自動循環(huán)輪播圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-01-01解決flutter 錯誤: 程序包androidx.lifecycle不存在問題
這篇文章主要介紹了解決flutter 錯誤: 程序包androidx.lifecycle不存在問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09Android 改變圖標(biāo)原有顏色和搜索框的實(shí)例代碼
讓Android也能有iOS那么方便的圖片色調(diào)轉(zhuǎn)換,就像同一個圖標(biāo),但是有多個地方使用,并且顏色不一樣,就可以用這個方法了。 本文實(shí)現(xiàn)TextView圖片和文字居中,鍵盤搜索功能,具體實(shí)現(xiàn)代碼大家跟隨腳本之家小編看看吧2017-09-09Android實(shí)現(xiàn)手指觸控圖片縮放功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)手指觸控圖片縮放功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12分析Android App中內(nèi)置換膚功能的實(shí)現(xiàn)方式
這篇文章主要介紹了Android App中內(nèi)置換膚功能的實(shí)現(xiàn)方式,文中舉了一個類似QQ空間中換膚方式的例子作為說明,需要的朋友可以參考下2016-02-02Android訪問php取回json數(shù)據(jù)實(shí)例
Android訪問php取回json數(shù)據(jù),實(shí)現(xiàn)代碼如下,遇到訪問網(wǎng)絡(luò)的權(quán)限不足在AndroidManifest.xml中,需要進(jìn)行如下配置2013-06-06Android ImageView 固定寬高比例的實(shí)現(xiàn)方法
這篇文章主要介紹了Android ImageView 固定寬高比例的實(shí)現(xiàn)方法的相關(guān)資料,,方法一:設(shè)置 adjustViewBounds="true",方法二:使用 Universal-Image-Loader 圖片緩存類,需要注意的是方法二和方法一同時使用導(dǎo)致設(shè)置無效,需要的朋友可以參考下2017-07-07