在Flutter SliverAppBar滚动时隐藏标题

Question

我有一个带有sliver的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(

- buttonsrtoys

Answer 1

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

将SliverAppBar的bottom属性设置为PreferredSize组件。将此底部小部件的preferredSize属性设置为0（Size.fromHeight（0）），以便当滑块折叠时，银色应用栏的高度将成为应用栏的高度。

- Chijioke Okwunakwe

Answer 2

如果您希望SliverAppBar折叠，但是bottom保持可见，则可以这样做：

---

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

pinned: true

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

---

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

floating: true

当用户向应用栏滚动时，应用栏是否应立即变为可见状态。(floating)

---

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

preferredSize: const Size.fromHeight(60),

- Pablo Barrera

---

是的，但这也隐藏了SliverAppBar的“底部”。如我的图片和gif所示，我想保留它。我会更新我的原帖。 - buttonsrtoys

感谢您的建议，但“floating”只控制AppBar何时收缩，但无论其是真还是假，它都不会收缩到比我的图像更小，而标题被截断。感谢您提供fromHeight建议。停止了标题被截断的情况。（显然对于隐藏标题组件没有帮助。） - buttonsrtoys

你是否将这些更改应用到了你问题的代码中？因为它对我来说是有效的。 - Pablo Barrera

抱歉，我说错了。floating=true/pinned=true 差不多可以实现。问题是，当列表顶部被触及时，我需要AppBar的展开行为为floating=false。而floating=true会在列表中的任何位置展开AppBar，这对我来说不起作用。 - buttonsrtoys

我遇到了类似的问题，@buttonsrtoys，你找到解决方案了吗？ - TheAnimatrix

还没有，但我一直打算尝试最近传来的Chijioke的建议。你试过了吗？ - buttonsrtoys