前言
本文着眼于搭建一个瀑布流布局的简化版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()];
// 当前选择index
int currentIndex = 0;
// 当前页
var currentPage;
@override
void initState() {
// TODO: implement initState
currentPage = tabPages[currentIndex];
super.initState();
}2.5在build方法中，配置bottomNavigationBar：
@override
Widget build(BuildContext context) {
// TODO: implement build
return 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: flutter
flutter_staggered_grid_view:
cached_network_image: ^2.2.0+13.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 = [];
@override
Widget 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> {
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return 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.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
// 调用IndexPage()方法，填充组件
home: IndexPage(),
theme: new ThemeData(
primaryColor: Colors.blue
),
);
}
}
总结
经过我们一番不懈的努力，总算是完成了瀑布流布局的应用。Flutter中万物皆组件，瀑布流布局也可以自己来编写，但是会比较复杂。这里我们直接采用flutter_staggered_grid_view插件完成布局，大大提升了开发效率。本期有关Flutter的介绍到此结束了，我们下期再见！GitHub项目地址???????