flutter|flutter实现瀑布流布局 android|ios|flutter

【flutter|flutter实现瀑布流布局】注意，本文基于flutter插件：flutter_staggered_grid_view 实现flutter瀑布流布局。官方文档传送门
使用插件的原因很简单：遇到这个需求，本想着flutter组件那么多而且强大，应该会有瀑布流组件吧？结果找来找去一无所获，所以只能借助插件实现了。然后，我找到一个猴赛雷的插件：flutter_staggered_grid_view
首先看插件的使用情况：

文章图片

数据说明，这个插件很靠谱，值得一撸！！！
1、安装

flutter_staggered_grid_view: ^0.6.1

2、引入

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

3、使用

MasonryGridView.count( // 展示几列 crossAxisCount: 3, // 元素总个数 itemCount: _waterFallList.length, // 单个子元素 itemBuilder: (BuildContext context, int index) => waterCard(_waterFallList[index]), // 纵向元素间距 mainAxisSpacing: 10, // 横向元素间距 crossAxisSpacing: 10, //本身不滚动，让外面的singlescrollview来滚动 physics:const NeverScrollableScrollPhysics(), shrinkWrap: true, //收缩，让元素宽度自适应 ),

完整代码：

import 'dart:math'; import 'package:flutter/material.dart'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart'; class OrderPage extends StatefulWidget { @override _OrderPageState createState() => _OrderPageState(); }class _OrderPageState extends State { List _waterFallList = []; @override void initState() { // TODO: implement initState super.initState(); var randomNum = new Random(); for(var i=0; i<40; i++){ _waterFallList.add(50+150*randomNum.nextDouble()); } print(_waterFallList); } @override Widget build(BuildContext context) { return SingleChildScrollView( child: Container( padding: EdgeInsets.all(10), child: MasonryGridView.count( // 展示几列 crossAxisCount: 3, // 元素总个数 itemCount: _waterFallList.length, // 单个子元素 itemBuilder: (BuildContext context, int index) => waterCard(_waterFallList[index]), // 纵向元素间距 mainAxisSpacing: 10, // 横向元素间距 crossAxisSpacing: 10, //本身不滚动，让外面的singlescrollview来滚动 physics:const NeverScrollableScrollPhysics(), shrinkWrap: true, //收缩，让元素宽度自适应 ), ), ); } Widget waterCard(double item){ return Container( height: item, decoration: BoxDecoration( border:Border.all(color:Colors.yellow,width:1), borderRadius: BorderRadius.circular(10) ), child: Center( child: Text(item.toStringAsFixed(0)), ), ); } }

效果图展示：

总结：这里只是一个简单的demo，感兴趣的可以去官网（传送门）细看哈。实现效果来说还是非常不错的，完美~。flutter真是越用越香哈哈哈哈哈哈哈哈哈