android - 鼠标滚动在 SliverAppbar() 或 SliverAppbar() 上不起作用 Flutter Web 浮动不起作用
问题描述
当我在CustomScrollView()中使用SliverAppBar()时,SliverAppBar()浮动:true不能通过鼠标滚动工作
CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating:true,
expandedHeight: 150.0,
flexibleSpace: const FlexibleSpaceBar(
title: Text('Available seats'),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_circle),
tooltip: 'Add new entry',
onPressed: () { /* ... */ },
),
]
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return ListTile(
title: Text('List Tile $index'),
);
}, childCount: 100),
),
],
),
解决方案
我已经解决了这个问题
创建一个类并根据需要命名。
class SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
SliverAppBarDelegate({
@required this.minHeight,
@required this.maxHeight,
@required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
@override
double get minExtent => minHeight;
@override
double get maxExtent => math.max(maxHeight, minHeight);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return SizedBox.expand(child: child);
}
@override
bool shouldRebuild(SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
现在将您的课程用作SliverAppBar()
CustomScrollView(
slivers: <Widget>[
// SliverAppBar(
// floating: true,
// snap: true,
// titleSpacing: 0.0,
// title: Container(
// color: Colors.blue,
// ),
// elevation: 0,
// backgroundColor: Theme.of(context).scaffoldBackgroundColor,
// ),
SliverPersistentHeader(
floating: true,
delegate: SliverAppBarDelegate(
minHeight: 60,
maxHeight: 60,
child: Container(
color: Colors.red,
child: Center(
child: Text(
'I want this to appear only after some scroll offset occured'),
),
),
),
),
SliverPersistentHeader(
pinned: true,
delegate: SliverAppBarDelegate(
minHeight: 60.0,
maxHeight: 60.0,
child: Container(
color: Theme.of(context).scaffoldBackgroundColor,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
child: Text('Some large text',
style: TextStyle(fontSize: 20)),
),
Divider(),
],
),
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return ListTile(
title: Text('List Tile $index'),
);
}, childCount: 100),
),
],
),
或者您可以查看DartPad示例
推荐阅读
- c - 双值返回 0 的操作。不明白为什么
- node.js - 'lite-server' 不是内部或外部命令、可运行程序或批处理文件
- amazon-web-services - 解析 HTTPS 别名路由
- python - 读取 UI 文件并连接按钮、文本等元素
- tensorflow - 有没有办法结合 2 个预训练的 tensorflow 模型?
- python - [Tkinter]将键盘键绑定到单选按钮
- spring-boot - Jackson Object Mapper 将 JsonArray 转换为 JsonString
- android - Dalvik 和 ART 中的类加载器子系统
- python - 连接数据帧中的两个系列后出现 Keyerror
- python - 对于第一个df中值的所有实例,如何用另一个数据框的值替换pandas行?