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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android自定義WaveProgressView實現(xiàn)水波紋加載需求
這篇文章主要為大家詳細介紹了Android自定義WaveProgressView實現(xiàn)水波紋加載需求,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-09-09
Flutter使用sqflite處理數(shù)據(jù)表變更的方法詳解
了解過數(shù)據(jù)庫的同學應該會知道,數(shù)據(jù)表結(jié)構是可能發(fā)生改變的。所以本文為大家介紹了Flutter?使用?sqflite?處理數(shù)據(jù)表變更的版本升級處理方法,感興趣的可以了解一下2023-04-04
android編程實現(xiàn)sd卡讀取數(shù)據(jù)庫的方法
這篇文章主要介紹了android編程實現(xiàn)sd卡讀取數(shù)據(jù)庫的方法,涉及Android權限控制及針對sd卡與數(shù)據(jù)庫的相關操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
Android Kotlin 高階函數(shù)詳解及其在協(xié)程中的應用小結(jié)
高階函數(shù)是 Kotlin 中的一個重要特性,它能夠?qū)⒑瘮?shù)作為一等公民(First-Class Citizen),使得代碼更加簡潔、靈活和可讀,本文給大家介紹Android Kotlin 高階函數(shù)詳解及其在協(xié)程中的應用,感興趣的朋友一起看看吧2025-03-03
Android實現(xiàn)帶有邊框的ListView和item的方法
這篇文章主要介紹了Android實現(xiàn)帶有邊框的ListView和item的方法,結(jié)合實例形式分析了ListView和item四周添加邊框的實現(xiàn)步驟與相關技巧,需要的朋友可以參考下2016-07-07
詳解Android Studio3.5及使用AndroidX的一些坑
這篇文章主要介紹了詳解Android Studio3.5及使用AndroidX的一些坑,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
Android開發(fā)筆記之:Splash的實現(xiàn)詳解
本篇文章是對Android中Splash的實現(xiàn)進行了詳細的分析介紹,需要的朋友參考下2013-05-05

