方法一
import 'package:flutter/material.dart';
class MessageScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
//因为本路由没有使用Scaffold,为了让子级Widget(如Text)使用
//Material Design 默认的样式风格,我们使用Material作为本路由的根。
return Material(
child: CustomScrollView(
slivers: <Widget>[
//AppBar,包含一个导航栏
SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
titlePadding: EdgeInsets.fromLTRB(20, 40, 110, 10),
centerTitle: false,
title: const Text('Demo'),
background: Image.asset(
"./images/sliverAppBar_bg.png", fit: BoxFit.cover,),
),
),
SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: new SliverGrid( //Grid
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, //Grid按两列显示
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
//创建子widget
return new Container(
alignment: Alignment.center,
color: Colors.cyan[100 * (index % 9)],
child: new Text('grid item $index'),
);
},
childCount: 20,
),
),
),
//List
new SliverFixedExtentList(
itemExtent: 50.0,
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
//创建列表项
return new Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: new Text('list item $index'),
);
},
childCount: 50 //50个列表项
),
),
],
),
);
}
}
方法二
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: _sliverBuilder,
body: Center(
child: Text('hahaha'),
)),
);
}
}
List<Widget> _sliverBuilder(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
centerTitle: true, //标题居中
expandedHeight: 200.0, //展开高度200
backgroundColor: Colors.tealAccent,
floating: false, //不随着滑动隐藏标题
pinned: false, //不固定在顶部
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
background: Image.asset(
"assets/pic.jpg",
fit: BoxFit.cover,
),
),
)
];
}
关于sliverAppBar中pinned、floating、snap三个属性搭配使用产生的效果,请移步到这里