Javascript is required
Flutter-瀑布流

插件

flutter_staggered_grid_view: ^0.3.2

image-20201219115525330

基本使用

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),
  )
)