前言

本文着眼于搭建一个瀑布流布局的简化版Flutter应用，Joe大叔将从应用创建、插件引入、页面布局三个方面，给朋友们展示瀑布流的布局方式。既此，我们接着往下看。文末有GitHub项目地址

一、瀑布流是什么？

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

案例如下图：

二、创建瀑布流应用

1.新建应用

1.1创建过程不再赘述，可以参照Flutter中文网按步骤操作

1.2在lib目录下，创建一个名为pages的目录，在pages里继续新建两个dart文件，分别命名为home_page.dart（首页）、mine_page.dart（我的）。

再创建一个名为Tools的目录，在Tools里新建名为full_screen_image_page.dart的文件，此为图片详情页。

在lib根目录新建一个名为index_page.dart文件，此为页面管理页。

最终目录结构如下图：

2.配置底部导航栏

2.1开始配置底部导航栏，需要在index_page.dart里进行配置

2.2引入home_page、mine_page：

import 'package:flutter/material.dart';
import 'pages/home_page.dart';
import 'pages/mine_page.dart';

2.3配置底部导航栏按钮数组：

class _IndexPageState extends State<IndexPage> {// 底部导航按钮数组final List<BottomNavigationBarItem> bottomTabs = [BottomNavigationBarItem(icon: Icon(Icons.home),label: '首页'),BottomNavigationBarItem(icon: Icon(Icons.person),label: '我的')];
}

2.4创建容器数组等变量：

// 模块容器数组final List tabPages = [HomePage(), MinePage()];// 当前选择indexint currentIndex = 0;// 当前页var currentPage;@overridevoid initState() {// TODO: implement initStatecurrentPage = tabPages[currentIndex];super.initState();}

2.5在build方法中，配置bottomNavigationBar：

@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(bottomNavigationBar: BottomNavigationBar(currentIndex: currentIndex,backgroundColor: Colors.white,type: BottomNavigationBarType.fixed,items: bottomTabs,onTap: (idx) {// 必须实现setState方法setState(() {currentIndex = idx;currentPage = tabPages[idx];});},),appBar: new AppBar(backgroundColor: Colors.white,title: Text(bottomTabs[currentIndex].label.toString(),style: TextStyle(color: Colors.black,),),centerTitle: true,elevation: .5,),body: currentPage,);}

3.引入布局插件

3.1首先定位到pubspec.yaml中，并在适当位置添加要引入的插件，瀑布流插件名为flutter_staggered_grid_view，之后运行pub get即可

dependencies:flutter:sdk: flutterflutter_staggered_grid_view:cached_network_image: ^2.2.0+1

3.2前往home_page.dart并引入文件

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:cached_network_image/cached_network_image.dart';

4.页面搭建

4.1在home_page.dart里使用瀑布流插件

4.1.1定义瀑布流子项的Widget

// 瀑布流每个子项Widget itemWidget(context, int index) {String imgPath = imgList[index];return new Material(elevation: 8.0,borderRadius: new BorderRadius.all(new Radius.circular(8.0),),child: new InkWell(child: new Hero(tag: imgPath,child: CachedNetworkImage(imageUrl: imgPath,fit: BoxFit.fitWidth,)),onTap: () {},),);}

4.1.2实现build方法，图片数组根据自己需求放入图片地址即可

class HomePage extends StatelessWidget {// 图片数组final List imgList = [];@overrideWidget build(BuildContext context) {return Scaffold(body: new StaggeredGridView.countBuilder(padding: EdgeInsets.all(8.0),crossAxisCount: 4,itemCount: imgList.length,itemBuilder: (context, i) {return itemWidget(context, i);},staggeredTileBuilder: (int index) =>new StaggeredTile.count(2, index == 0 ? 2.5 : 3),mainAxisSpacing: 8.0,crossAxisSpacing: 8.0,),);}
}

4.1.3在full_screen_image_page.dart中完善图片详情页

import 'package:flutter/material.dart';// 图片详情页class FullScreenImagePage extends StatefulWidget {final String imageUrl;final int curentIndex;const FullScreenImagePage({key, required this.imageUrl, required this.curentIndex}) : super(key: key);@override_FullScreenImagePageState createState() {return _FullScreenImagePageState();}}class _FullScreenImagePageState extends State<FullScreenImagePage> {@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overridevoid dispose() {// TODO: implement disposesuper.dispose();}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: new AppBar(title: Text('图片${widget.curentIndex+1}',style: TextStyle(color: Colors.black,),),centerTitle: true,backgroundColor: Colors.white,iconTheme: IconThemeData(color: Colors.black),),body: Container(margin: EdgeInsets.all(20.0),child: Image.network(widget.imageUrl, fit: BoxFit.fitWidth,),),);}
}

4.1.4最后在main.dart应用入口处创建IndexPage的实例

import 'package:flutter/material.dart';
// 导入index_page.dart
import 'index_page.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(debugShowCheckedModeBanner: false,// 调用IndexPage()方法，填充组件home: IndexPage(),theme: new ThemeData(primaryColor: Colors.blue),);}
}

总结

经过我们一番不懈的努力，总算是完成了瀑布流布局的应用。Flutter中万物皆组件，瀑布流布局也可以自己来编写，但是会比较复杂。这里我们直接采用flutter_staggered_grid_view插件完成布局，大大提升了开发效率。本期有关Flutter的介绍到此结束了，我们下期再见！GitHub项目地址​​​​​​​