Flutter 中使用瀑布流

flutter 中使用瀑布流

一、pub.dev搜索staggered_grid_view

pub.dev/packages/fl…

二、pubspec.yaml文件新增依赖

dependencies:
flutter_staggered_grid_view: ^0.6.2

三、导入

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

四、导入到container中

child : MasonryGridView.count(
  crossAxisCount: 4, //几列
  mainAxisSpacing: 4, // 间距
  crossAxisSpacing: 4, // 纵向间距？
  itemCount: 5,元素个数
  itemBuilder: (context, index) {
    return Tile(
      index: index,
      extent: (index % 5 + 1) * 100,
    );
  },
);

child: MasonryGridView.count(
  crossAxisCount: 2,  // 几列
  mainAxisSpacing: 20, // 间距
  crossAxisSpacing:10,
  itemCount: controller.bestpList.length,
  shrinkWrap: true, // 是否收缩
  physics: const NeverScrollableScrollPhysics(), // 禁止左右滑动
  itemBuilder: (context, index) {
      return Container(
          child:Column(
            children:[
                container(
                child:
                      Text("${controller.xxxlist[index].title}",textAlign:TextAlign.start),
                ),
                container(),
                container(),
                container(),
            ]
          ),
      );
  }