快捷導(dǎo)航

Flutter StaggeredGridView實(shí)現(xiàn)瀑布流效果

更新時(shí)間：2022年03月23日 09:04:39 作者：GalenWu

這篇文章主要為大家詳細(xì)介紹了Flutter StaggeredGridView實(shí)現(xiàn)瀑布流效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Flutter StaggeredGridView實(shí)現(xiàn)瀑布流的具體代碼，供大家參考，具體內(nèi)容如下

在根目錄pubspec.yaml文件中添加依賴(lài)

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)),
? ? ? ),
? ? );
? }
}

效果如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Android自定義View詳解
這篇文章主要為大家詳細(xì)介紹了Android自定義View，幫助大家戰(zhàn)勝Android自定義View，為今后的學(xué)習(xí)打下基礎(chǔ)，感興趣的小伙伴們可以參考一下
2016-06-06
Flutter 日期時(shí)間DatePicker控件及國(guó)際化
這篇文章主要介紹了Flutter 日期時(shí)間DatePicker控件及國(guó)際化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
Android控件CardView實(shí)現(xiàn)卡片效果
這篇文章主要為大家詳細(xì)介紹了Android控件CardView實(shí)現(xiàn)卡片效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
Android自定義WaveProgressView實(shí)現(xiàn)水波紋加載需求
這篇文章主要為大家詳細(xì)介紹了Android自定義WaveProgressView實(shí)現(xiàn)水波紋加載需求，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
Flutter使用sqflite處理數(shù)據(jù)表變更的方法詳解
了解過(guò)數(shù)據(jù)庫(kù)的同學(xué)應(yīng)該會(huì)知道，數(shù)據(jù)表結(jié)構(gòu)是可能發(fā)生改變的。所以本文為大家介紹了Flutter?使用?sqflite?處理數(shù)據(jù)表變更的版本升級(jí)處理方法，感興趣的可以了解一下
2023-04-04
android編程實(shí)現(xiàn)sd卡讀取數(shù)據(jù)庫(kù)的方法
這篇文章主要介紹了android編程實(shí)現(xiàn)sd卡讀取數(shù)據(jù)庫(kù)的方法,涉及Android權(quán)限控制及針對(duì)sd卡與數(shù)據(jù)庫(kù)的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
Android Kotlin 高階函數(shù)詳解及其在協(xié)程中的應(yīng)用小結(jié)
高階函數(shù)是 Kotlin 中的一個(gè)重要特性,它能夠?qū)⒑瘮?shù)作為一等公民（First-Class Citizen）,使得代碼更加簡(jiǎn)潔、靈活和可讀,本文給大家介紹Android Kotlin 高階函數(shù)詳解及其在協(xié)程中的應(yīng)用,感興趣的朋友一起看看吧
2025-03-03
Android實(shí)現(xiàn)帶有邊框的ListView和item的方法
這篇文章主要介紹了Android實(shí)現(xiàn)帶有邊框的ListView和item的方法,結(jié)合實(shí)例形式分析了ListView和item四周添加邊框的實(shí)現(xiàn)步驟與相關(guān)技巧,需要的朋友可以參考下
2016-07-07
詳解Android Studio3.5及使用AndroidX的一些坑
這篇文章主要介紹了詳解Android Studio3.5及使用AndroidX的一些坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
Android開(kāi)發(fā)筆記之:Splash的實(shí)現(xiàn)詳解
本篇文章是對(duì)Android中Splash的實(shí)現(xiàn)進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-05-05