[英]Flutter ListView scroll animation overlapping sibling widget
Hoping someone can help with this and it's not a bug and it's just me being silly.希望有人可以帮助解决这个问题,这不是错误,只是我很傻。
There is very strange behavior from listview when it's not taking the full length of the screen and in a column.当列表视图没有占据屏幕和列的全长时,它会出现非常奇怪的行为。
When you scroll down, the animation at max extent persists and overlaps.当您向下滚动时,最大范围的动画会持续存在并重叠。 I'm assuming this is a bug and not by design.我假设这是一个错误而不是设计。
Here's the simple code to reproduce.这是要重现的简单代码。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp(
items: List<MessageItem>.generate(
33,
(i) => MessageItem("Sender $i", "Message body $i"),
),
));
}
class MyApp extends StatelessWidget {
final List<MessageItem> items;
MyApp({Key key, @required this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
final title = 'Mixed List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
children: [
Expanded(
child: Container(),
),
Expanded(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return ListTile(
title: item.buildTitle(context),
subtitle: item.buildSubtitle(context),
);
},
),
),
],
),
),
);
}
}
/// A ListItem that contains data to display a message.
class MessageItem {
final String sender;
final String body;
MessageItem(this.sender, this.body);
Widget buildTitle(BuildContext context) => Text(sender);
Widget buildSubtitle(BuildContext context) => Text(body);
}
So final code will be.所以最终的代码将是。 I have added the scroll phisycs BouncingScrollPhysics
.我添加了滚动 phisycs BouncingScrollPhysics
。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp(
items: List<MessageItem>.generate(
33,
(i) => MessageItem("Sender $i", "Message body $i"),
),
));
}
class MyApp extends StatelessWidget {
final List<MessageItem> items;
MyApp({Key key, @required this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
final title = 'Mixed List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Column(
children: [
Expanded(
child: Container(
),
),
Expanded(
child: ListView.builder(
physics: BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
itemCount: 50,
itemBuilder: (context, index) {
return ListTile(
title: Text("${index + 1}"),
subtitle: Text("${index + 1}"),
);
},
),
),
],
),
),
);
}
}
/// A ListItem that contains data to display a message.
class MessageItem {
final String sender;
final String body;
MessageItem(this.sender, this.body);
Widget buildTitle(BuildContext context) => Text(sender);
Widget buildSubtitle(BuildContext context) => Text(body);
}
I'm not sure if this is a bug or not.我不确定这是否是一个错误。 Or if my solution is the correct way of doing it, or not.或者如果我的解决方案是正确的方法,或者不是。 But this work但这项工作
@override
Widget build(BuildContext context) {
return NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
backgroundColor: Colors.white,
toolbarHeight: 200,
pinned: true,
forceElevated: innerBoxIsScrolled,
),
),
];
},
body: Container(
child: SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (BuildContext context) {
return CustomScrollView(
key: PageStorageKey<String>("name"),
slivers: <Widget>[
SliverOverlapInjector(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context),
),
SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: SliverFixedExtentList(
itemExtent: 48.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 30,
),
),
),
],
);
},
),
)),
);
}
The reason I don't like this is that I'm putting non-bar content in an AppBar.我不喜欢这样的原因是我将非栏内容放在 AppBar 中。
If anyone has a better solution please let me know.如果有人有更好的解决方案,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.