Flutter-瀑布流
Flutter
插件
flutter_staggered_grid_view: ^0.3.2
基本使用
import 'package:flutter/material.dart';
// grid view
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class AppPage extends StatefulWidget {
@override
_AppPageState createState() => _AppPageState();
}
class _AppPageState extends State<AppPage> {
ScrollController _scrollController;
List<String> imgs = [
'assets/1.jpg',
'assets/2.jpg',
'assets/3.jpg',
'assets/4.jpg',
'assets/5.jpg',
'assets/6.jpg',
'assets/7.jpg',
'assets/8.jpg',
'assets/9.jpg',
'assets/10.jpg',
'assets/11.jpg',
'assets/12.jpg',
'assets/13.jpg',
'assets/14.jpg',
'assets/15.jpg',
'assets/16.jpg',
'assets/17.jpg',
'assets/18.jpg',
'assets/19.jpg',
'assets/20.jpg',
];
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.yellow,
title: Text('壁纸吧', style: TextStyle(color: Colors.black, fontSize: 16, fontWeight: FontWeight.w500)),
),
body: Stack(
children: [
StaggeredGridView.countBuilder(
itemCount: imgs.length, // 数量
primary: false,
controller: _scrollController,
crossAxisCount: 4,
itemBuilder: (BuildContext context, int index) => new Container(
child: Image.asset(imgs[index], fit: BoxFit.cover),
),
staggeredTileBuilder: (index) => StaggeredTile.fit(2),
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0,
),
],
)
);
}
}
下拉刷新
RefreshIndicator(
onRefresh: () async {
await Future.delayed(Duration(seconds: 5));
},
child: StaggeredGridView.countBuilder(
shrinkWrap: true,
controller: _scrollController,
crossAxisCount: 4,
crossAxisSpacing: 4,
mainAxisSpacing: 10,
itemCount: _count,
itemBuilder: (context, index) {
return Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
));
},
staggeredTileBuilder: (index) => StaggeredTile.fit(2),
)
)