题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。
Flutter是谷歌推出的最新的移动开发框架。
Flutter NestedScrollView 滑动组件是用来处理复杂情况下的滑动应用场景,如向上滑动视图时,要折叠隐藏一部分内容,这时候就需要使用到 NestedScrollView 与 SliverAppBar 的结合使用。
CustomScrollView 用来处理更为复杂的布局结合 SliverAppBar,SliverList和SliverGrid SliverPadding SliverToBoxAdapter SliverPersistentHeader, SliverFillRemaining,SliverFillViewport等来使用
在本节中是使用 CustomScrollView 结合 SliverAppBar 与
SliverList实现的一个向上滑动折叠头部图片的经典布局效果
本 Demo 实现的最终效果如下:
一般页面的主体使用 Scaffold ,所以在这里也是使用了 Scaffold 来架构页面,如下代码清单1-1所示:
///代码清单 1-1
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class CustomScrollDemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ScrollHomePageState();
}
}
class _ScrollHomePageState extends State{
///图片地址
String imageUrl =
"http://file02.16sucai.com/d/file/2015/0408/779334da99e40adb587d0ba715eca102.jpg";
@override
Widget build(BuildContext context) {
///页面主体脚手架
return Scaffold(
/// 处理滑动
body: CustomScrollView(
slivers: <Widget>[
///顶部的标题图片部分
buildSliverAppBar(),
///底部的列表部分
buildSliverList()
],
));
}
}
... ...
}
在这里使用了CustomScrollView结合了SliverAppBar 与 SliverList 实现的整体效果,其中 buildSliverAppBar 方法是用来构建 SliverAppBar的,如下代码清单 1-2所示:
///代码清单1-2
SliverAppBar buildSliverAppBar() {
return SliverAppBar(
backgroundColor: Colors.pink,
pinned: true,
snap: false,
floating: true,
leading: Icon(Icons.home),
actions: <Widget>[Icon(Icons.menu)],
title: Text("这里是标题"),
expandedHeight: 180,
flexibleSpace: FlexibleSpaceBar(
background: Row(
children: <Widget>[
Expanded(
child: Image.network(
imageUrl,
fit: BoxFit.cover,
),
)
],
),
),
);
}
buildSliverList方法是用来构建 列表组件 SliverList,如下代码清单 1-3 所示:
///代码清单1-3
SliverList buildSliverList() {
return SliverList(
///懒加载代理
delegate: SliverChildBuilderDelegate((BuildContext context, num index) {
///子Item的布局
return Container(
height: 44,
margin: EdgeInsets.only(bottom: 10),
child: Text("item- $index"),
);
}, childCount: 100),//子Item的个数
);
}
完毕
当然 以小编的性格,是必须有源码的:本文章的全部代码在这里