在NestedScrollView中向下滚动时如何保持SliverAppBar展开?
我想更改名为'_locked'的标志以锁定SliverAppBar的高度,但是我不知道该怎么做。
可能需要使用SliverPersistentHeader小部件吗?
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final double expanded = 200;
bool _locked = false;
@override
Widget build(BuildContext context) {
final top = MediaQuery.of(context).padding.top;
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverAppBar(
pinned: true,
floating: true,
title: Text(widget.title),
expandedHeight: expanded - top,
flexibleSpace: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(height: expanded, color: Colors.red);
},
),
),
];
},
body: ListView(
children: ListTile.divideTiles(
context: context,
tiles: List.generate(
50,
(index) => ListTile(
title: Text('Index: $index'),
))).toList(),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(_locked ? Icons.lock_open : Icons.lock_outline),
onPressed: () {
/// Switch the flag
setState(() {
_locked = !_locked;
});
},
),
);
}
}
答案 0 :(得分:0)
我相信您想将_locked
绑定到SliverAppBar
的{{3}}属性。
我链接的文档中包含一个gif示例!