【发布时间】:2023-04-05 16:28:02
【问题描述】:
在使用 slivers 和 sliver appbar 时出现滚动问题。当不需要像视频中那样滚动时,如何防止滚动视图滚动。如果有足够的项目滚动它应该滚动(完美)
我关注了这篇中等帖子。你可以看到他也有同样的问题。 https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe
class HomeScreen extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsScrolled) => [
SliverAppBar(
brightness: Brightness.dark,
backgroundColor: Colors.amber.withOpacity(0.5),
expandedHeight: 166,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
background: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 80,
width: 80,
child: Placeholder(),
),
Row(
children: [
Text(
'sdalkf',
),
],
),
],
),
),
),
),
SliverPersistentHeader(
delegate: SliverAppBarDelegate(
MediaQuery.of(context).padding.top,
Container(
color: Colors.amber.withOpacity(0.5),
child: SafeArea(
bottom: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('sdfaklladsjfkladslkf\nsadjflkasjklfs\nsdkjlfjlkadslfjk'),
],
),
),
),
),
pinned: true,
),
],
body: GridView.builder(
itemCount: 3,
padding: EdgeInsets.zero,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 0.68),
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Container(
color: Colors.black54,
),
),
),
),
);
}
}
class SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
final Widget child;
final double topSafeArea;
_SliverAppBarDelegate(this.topSafeArea, this.child);
@override
double get minExtent => 105 + topSafeArea;
@override
double get maxExtent => 105 + topSafeArea;
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
child: child,
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return false;
}
}
相关:
Flutter SliverAppBar with Tabs overlays content
以上链接不是解决方案,而是临时修复
【问题讨论】:
标签: flutter flutter-layout flutter-sliver