Flutter 颤振列表视图滚动动画重叠同级小部件

希望有人能帮上忙，这不是一个错误，只是我太傻了

当listview没有占据整个屏幕和一列时，它会有一种非常奇怪的行为

向下滚动时，“最大范围”的动画将持续并重叠。我假设这是一个bug，而不是设计的

下面是要复制的简单代码

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);
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp(
项目：List.generate(
33,
（i） =>MessageItem（“发件人$i”，“邮件正文$i”），
),
));
}
类MyApp扩展了无状态小部件{
最后清单项目；
MyApp（{Key-Key，@required this.items}）：超级（Key:Key）；
@凌驾
小部件构建（构建上下文）{
最终标题=‘混合名单’；
返回材料PP(
标题:标题,，
家：脚手架(
appBar:appBar(
标题：文本（标题），
),
正文：专栏(
儿童：[
扩大(
子级：容器（），
),
扩大(
子项：ListView.builder(
itemCount:items.length，
itemBuilder：（上下文，索引）{
最终项目=项目[索引]；
返回列表块(
标题：item.buildTitle（上下文），
副标题：item.buildSubtitle（上下文），
);
},
),
),
],
),
),
);
}
}
///包含用于显示消息的数据的列表项。
类消息项{
最终字符串发送器；
最终管柱体；
MessageItem（this.sender，this.body）；
小部件buildTitle（BuildContext上下文）=>文本（发送方）；
小部件buildSubtitle（BuildContext上下文）=>文本（body）；
}

---

我不确定这是否是一个bug。或者我的解决方案是否正确。但是这项工作

  @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,
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      )),
    );
  }

@凌驾
小部件构建（构建上下文）{
返回嵌套滚动视图(
headerSliverBuilder：（BuildContext上下文，boolInnerBoxIsCrolled）{
返回[
银光吸收器(
句柄：NestedScrollView.SliverOverlapsAberHandleFor（上下文），
银条：银条(
背景颜色：Colors.white，
身高：200，
对,，
强制提升：内包装箱为羊角形，
),
),
];
},
主体：容器(
儿童：安全区(
上图：错，
底部：错误，
孩子：建筑工人(
生成器：（BuildContext上下文）{
返回自定义滚动视图(
密钥：PageStorageKey（“名称”），
条子：[
滑动式喷油器(
处理：
NestedScrollView.SliverOverlapsAberHandleFor（上下文），
),
填缝料(
填充：常数边集全部（8.0），
条子：条子固定扩展列表(
项目范围：48.0，
代表：SliverChildBuilderDelegate(
（BuildContext上下文，int索引）{
返回列表块(
标题：文本（“项$index”），
);
},
儿童人数：30，
),
),
),
],
);
},
),
)),
);
}

我不喜欢这一点的原因是我把非酒吧内容放在AppBar中

---

如果有人有更好的解决方案，请告诉我。

因此最终代码将是。我已经添加了滚动Physycs

弹跳CrollPhysics

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);
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp(
项目：List.generate(
33,
（i） =>MessageItem（“发件人$i”，“邮件正文$i”），
),
));
}
类MyApp扩展了无状态小部件{
最后清单项目；
MyApp（{Key-Key，@required this.items}）：超级（Key:Key）；
@凌驾
小部件构建（构建上下文）{
最终标题=‘混合名单’；
返回材料PP(
标题:标题,，
家：脚手架(
appBar:appBar(
标题：文本（标题），
),
正文：专栏(
儿童：[
扩大(
子：容器(
),
),
扩大(
子项：ListView.builder(
物理学：弹跳克罗尔物理学(
父项：AlwaysScrollableScrollPhysics（）），
物品计数：50，
itemBuilder：（上下文，索引）{
返回列表块(
标题：文本（“${index+1}”），
副标题：文本（“${index+1}”），
);
},
),
),
],
),
),
);
}
}
///包含用于显示消息的数据的列表项。
类消息项{
最终字符串发送器；
最终管柱体；
MessageItem（this.sender，this.body）；
小部件buildTitle（BuildContext上下文）=>文本（发送方）；
小部件buildSubtitle（BuildContext上下文）=>文本（body）；
}

Ps.更好。将appbar高度设置为0。把它放在一个专栏里！谢谢你的回复。但我要那个集装箱在那里。我的问题是重叠到上部容器中。正如您在gif中所看到的，蓝色的水滴携带到上面的容器中。我想在顶部固定内容，在下半部分滚动内容，放置一些固定高度的容器，如果你设置为展开，它会像gif一样固定容器高度，这就是它所做的。我再次使用嵌套滚动视图解决了这个问题。这是一个非常复杂的解决方案，应该是直截了当的。你可以阻止整个溢出