框架集合:https://github.com/Solido/awesome-flutter
1.插件:flutter_staggered_grid_view: ^0.3.0
建议使用0.3.0以上的版本,因为低版本会出现滑动不了或者报错的情况
2.上代码
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class StaggeredGridPage extends StatefulWidget {
@override
_StaggeredGridPageState createState() => _StaggeredGridPageState();
}
class _StaggeredGridPageState extends State<StaggeredGridPage> {
ScrollController _scrollController = ScrollController();
//StaggeredGridView.countBuilder布局
Widget _countBuildItem() {
return StaggeredGridView.countBuilder(
itemCount: 8,
//元素数量
crossAxisCount: 4,
// 横轴元素数量StaggeredTile.count(1, index.isEven ? 3 : 1);横轴为1时
itemBuilder: (context, index) => new Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
)),
staggeredTileBuilder: (index) {
return StaggeredTile.count(2, index.isEven ? 2 : 1); //横轴和纵轴的数量,控制瀑布流效果
},
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
);
}
///
Widget _countItem() {
return StaggeredGridView.count(
crossAxisCount: 2,
// physics: NeverScrollableScrollPhysics(),//不可以滑动
// shrinkWrap: true,//外层有SingleChildScrollView或者CustomScrollView等可以滑动组件时使用
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
staggeredTiles: const <StaggeredTile>[
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
],
children: [1, 2, 3, 4, 5, 6]
.map((item) => Container(
child: Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$item'),
),
)),
))
.toList(),
);
}
Widget _extentItem() {
return StaggeredGridView.extent(
// physics: NeverScrollableScrollPhysics(),//不可以滑动
// shrinkWrap: true,//外层有SingleChildScrollView或者CustomScrollView等可以滑动组件时使用
maxCrossAxisExtent: 100,
//设置固定大小
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
staggeredTiles: const <StaggeredTile>[
const StaggeredTile.count(1, 1), //参数为x,y的比例
const StaggeredTile.count(2, 1),
const StaggeredTile.count(1, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
const StaggeredTile.count(2, 2),
const StaggeredTile.count(2, 1),
],
children: [1, 2, 3, 4, 5, 6]
.map((item) => Container(
child: Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$item'),
),
)),
))
.toList(),
);
}
Widget _extentBuildItem() {
return StaggeredGridView.extentBuilder(
maxCrossAxisExtent: 200,
itemCount: 8,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
itemBuilder: (context, index) {
return Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
));
},
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index.isEven ? 2 : 1);
});
}
_bodyView(int type) {
Widget tempWidget;
switch (type) {
case 1:
tempWidget = _countBuildItem();
break;
case 2:
tempWidget = _countItem();
break;
case 3:
tempWidget = _extentItem();
break;
case 4:
tempWidget = _extentBuildItem();
break;
case 5:
_countBuildItem();
break;
case 6:
_countBuildItem();
break;
}
return tempWidget;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("瀑布流布局"),
),
body: _bodyView(4),
);
}
}
3.创建StaggeredGridView布局有六种不同的方法,常见的是以上四种布局