// FlexibleSpaceBar
class FlexibleSpaceBarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
// 展开高度
expandedHeight: 250.0,
// 是否随着滑动隐藏标题
floating: true,
// 是否固定在顶部
pinned: true,
// 可折叠的应用栏目
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'可折叠的标题',
style: TextStyle(color: Colors.white),
),
background: Image.network(
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2288748976,1582581638&fm=26&gp=0.jpg',
fit: BoxFit.cover,
),
),
)
];
},
body: Center(
child: Text('向上提拉,查看效果'),
));
}
}
2.另一种实现方法
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
List _tabs = ['1111', '2222', '333'];
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "app",
home: Scaffold(
// appBar: AppBar(),
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
// pinned: true, // appbar是否固定在顶部
floating: true, // 下滑时top立马跟随
// snap: true,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('复仇者联盟'),
background: Image.network(
'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
fit: BoxFit.fitHeight,
),
),
),
SliverFixedExtentList(
itemExtent: 80.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Card(
child: Container(
alignment: Alignment.center,
color: Colors.primaries[(index % 18)],
child: Text('$index'),
),
);
},
),
),
],
),
),
);
}
}