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<OrderPage> {
  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真是越用越香哈哈哈哈哈哈哈哈哈