[英]Flutter CustomScrollView slivers stacking
I am trying to create a scrollView using CustomScrollView .我正在尝试使用CustomScrollView创建一个 scrollView 。 The effect that I need, is very similar to this one .我需要的效果,是非常相似的这一个。
I need the SliverList to be stacked above the SliverAppbar , without the list taking the whole screen and hiding the SliverAppbar.我需要将SliverList堆叠在SliverAppbar 上方,而不是让列表占据整个屏幕并隐藏 SliverAppbar。 The reason I want to do this, is that i need to attach a persistent Positioned widget on top of that list, and it won't appear unless the list is stacked above the SliverAppbar.我想这样做的原因是我需要在该列表的顶部附加一个持久的 Positioned 小部件,除非该列表堆叠在 SliverAppbar 上方,否则它不会出现。
Step one: Use ListView inside SliverAppBar widget.第一步:在 SliverAppBar 小部件中使用 ListView。 To make css overflow:hidden effect.使css溢出:隐藏效果。
Step two: Add controller to NestedScrollView and move the button on scrolling in a stack.第二步:将控制器添加到 NestedScrollView 并在堆栈中滚动滚动按钮。 Plus calculate where you want to stop button moving.加上计算你想要停止按钮移动的位置。
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
ScrollController scrollController;
final double expandedHight = 150.0;
@override
void initState() {
super.initState();
scrollController = new ScrollController();
scrollController.addListener(() => setState(() {}));
}
@override
void dispose() {
scrollController.dispose();
super.dispose();
}
double get top {
double res = expandedHight;
if (scrollController.hasClients) {
double offset = scrollController.offset;
if (offset < (res - kToolbarHeight)) {
res -= offset;
} else {
res = kToolbarHeight;
}
}
return res;
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Stack(
children: [
NestedScrollView(
controller: scrollController,
headerSliverBuilder: (context, value) {
return [
SliverAppBar(
pinned: true,
expandedHeight: expandedHight,
flexibleSpace: ListView(
physics: const NeverScrollableScrollPhysics(),
children: [
AppBar(
title: Text('AfroJack'),
elevation: 0.0,
),
Container(
color: Colors.blue,
height: 100,
alignment: Alignment.center,
child: RaisedButton(
child: Text('folow'),
onPressed: () => print('folow pressed'),
),
),
],
),
),
];
},
body: ListView.builder(
physics: const NeverScrollableScrollPhysics(),
itemCount: 80,
itemBuilder: (BuildContext context, int index) {
return Text(
'text_string'.toUpperCase(),
style: TextStyle(
color: Colors.white,
),
);
},
),
),
Positioned(
top: top,
width: MediaQuery.of(context).size.width,
child: Align(
child: RaisedButton(
onPressed: () => print('shuffle pressed'),
child: Text('Suffle'),
),
),
),
],
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.