滚动时在 Flutter SliverAppBar 中隐藏标题答案

【问题标题】：Hide title in Flutter SliverAppBar on scroll滚动时在 Flutter SliverAppBar 中隐藏标题
【发布时间】：2020-02-17 01:16:48
【问题描述】：

我有一个带有条子的 CustomScrollView 正在工作，但我没有找到完全隐藏 SliverAppBar 顶部的方法（即，在滚动时，我想隐藏图像和标题，但显示底部）：

编辑：如图所示，我想保持 SliverAppBar 的底部滚动。设置“pinned: false”会隐藏滚动，所以对我不起作用。

甚至在我添加填充之前，我希望我的标题在折叠时隐藏，如下所示：

现在它被截断了，我真的很想隐藏它。

我看过一些帖子，您可以在 NestedScrollView 中隐藏标题（例如，上面的 gif），但如果可能，我想保留我的 CustomScrollView？

这是我的代码：

class QuestionsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final questionsMgr = Provider.of<Questions>(context);
    final List<Question> questions = questionsMgr.questions;

    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(0),
            child: ChangeNotifierProvider.value(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    ScoreText(),
                    InstructionsText(),
                  ],
                ),
              ),
            ),
          ),
          backgroundColor: questionsMgr.getScoreColor(),
          floating: false,
          expandedHeight: 225,
          pinned: true,
          title: Text(
            "Checklist",
            textAlign: TextAlign.center,
          ),
          forceElevated: true,
          flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            background: Image.asset(
              "assets/images/PalFM_blue.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverList(

【问题讨论】：

标签： flutter flutter-sliver

【解决方案1】：

SliverAppBar(
      pinned: true,
      floating: false,          
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar(

将 SliverAppBar 的底部属性设置为 PreferredSize 小部件。将此底部小部件的preferredSize 属性设置为0 (Size.fromHeight(0))，这样sliver app bar 的高度将成为sliver 折叠时app bar 的高度。

【讨论】：

【解决方案2】：

如果您希望 SliverAppBar 折叠，但 bottom 仍然可见，那么您可以这样做：

要使SliverAppBar 扩展/收缩其内容并防止其消失：

pinned: true

应用栏仍然可以随着用户滚动而扩展和收缩，但它将保持可见而不是被滚动出视图。 (pinned)

让SliverAppBar 的内容在滚动时出现/消失：

floating: true

应用栏是否应在用户滚动后立即可见走向应用栏。 (floating)

那么bottom 小部件的 PreferredSize 不应该是0，而是bottom 小部件的实际高度。

preferredSize: const Size.fromHeight(60),

【讨论】：

是的，但这也隐藏了 SliverAppBar 的“底部”。如我的图片和 gif 所示，我想保留它。我会更新我的 OP。
感谢您的想法，但“浮动”仅控制 AppBar 何时收缩，但它永远不会收缩小于我的标题切碎的图像，无论它是真是假。感谢 fromHeight 的建议。停止标题被截断。（显然对隐藏标题 com 没有帮助。）
您是否将这些更改应用于您的问题代码？因为它对我有用。
对不起。我说错了。 floating=true/pinned=true 几乎有效。问题是只有在到达列表顶部时，我才需要扩展 AppBar 的浮动 = false 行为。 floating=true 可以将 AppBar 扩展到列表中对我不起作用的任何位置。
我遇到了类似的情况，@buttonsrtoys 你找到解决方案了吗？