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

