flutter - 使用 NestedScrollView 如果正文仍然适合屏幕,我如何阻止正文在 headerSliverBuilder 下滚动
问题描述
我正在创建一个 Sliver 滚动,但我注意到即使主体足够小以适合屏幕,主体仍会在 NestedScrollView header
. 我的理想体验是 SliverAppBar Collapse 但正文中的每个项目都留在它下面并且不会滑到下面。
这是一个代码片段:
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: DefaultTabController(
length: 3,
child: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
elevation: 0,
title: const Text('HOME',),
backgroundColor: Colors.green,
pinned: true,
stretchTriggerOffset: 10,
onStretchTrigger: () async{
print('hello');
return;
},
automaticallyImplyLeading: false,
actions: const [
Padding(
padding: EdgeInsets.only(right: 30),
child: Icon(Icons.ac_unit),
)
],
expandedHeight: 120,
flexibleSpace: const FlexibleSpaceBar(
title: Text('Charity',style:
TextStyle(fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.white),),
stretchModes: [
StretchMode.fadeTitle
],
),
),
];
},
body: SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverPadding(
padding: EdgeInsets.only(left: 16, right: 16, top: 11),
sliver: SliverList(
delegate: SliverChildListDelegate(List.generate(
6,
(index) => Text('Tab One: $index'),
),
),
),
),
],
);
},
),
),
),
),
);
}
}
如果它不够小以适合页面,我怎样才能使它不会在标题下滚动?
解决方案
推荐阅读
- python - 使用 Python 在 MYSQL 数据库中创建表错误
- javascript - Socket.io 找不到服务器
- vue.js - 为什么一个 url 可以在 curl 上工作,但相同的 url 不能在浏览器上工作?
- reactjs - 在 React JS 中使用 props 导航到其他页面
- excel - 带有 ID 组的 Excel COUNTIF
- embedded - Micrium uC/FS 文件系统挂载延迟
- azure-sql-database - CTE 后删除
- java - android studio 活动在完成上一个活动之前开始
- python - 在单个图形上绘制数据集的多个段,每条线重叠
- android - 连接到隧道后无法浏览任何内容