如何修改 Sliverappbar 以便在向上滚动时可以看到带有 FlexibleSpaceBar 的背景图像？

Posted 2023-02-23

【中文标题】如何修改 Sliverappbar 以便在向上滚动时可以看到带有 FlexibleSpaceBar 的背景图像？

【英文标题】：How to make modify Sliverappbar so I can see the background image with FlexibleSpaceBar when I scroll up?

【发布时间】：2021-05-03 19:57:22

【问题描述】：

如何修改 Sliverappbar 以便在我向上滚动时可以看到带有 FlexibleSpaceBar 的背景图片？

SliverAppBar(
          expandedHeight: 200.0,
          floating: false,
          pinned: true,
          flexibleSpace: FlexibleSpaceBar(
              centerTitle: true,
              title: Text("Collapsing Toolbar",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16.0,
                  )),
              background: Image.network(
                "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                fit: BoxFit.cover,
              )),
        ),

【参考方案1】：

恐怕这是 FlexibleSpaceBar 的标准行为。您可以更改颜色，但不能使其透明。

我发现的一种解决方法是使用 Stack 而不是 FlexibleSpaceBar：

SliverAppBar(
  expandedHeight: 200.0,
  floating: true,
  pinned: true,
  snap: true,
  flexibleSpace: Stack(
    children: <Widget>[
      Positioned.fill(
        child: Image.network(
          "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
          fit: BoxFit.cover,
        ),
      ),
      Positioned.fill(
        child: Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Text(
              "Collapsing Toolbar",
              style: TextStyle(
                color: Colors.white,
                fontSize: 24.0,
              ),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    ],
  ),
),

【讨论】：

您好蒂埃里，感谢您抽出宝贵时间。是的，它非常接近，但如果文本或其他图像太长，它会在顶部的后箭头上展开。如何限制文本“折叠工具栏”或图像的长度？

不确定我是否理解。我们在说什么后退箭头？可以提供截图吗？你想限制文本的长度吗？还是调整字体大小？

在欢迎页面之后，我有一个按钮，可以将其路由到另一个带有我们正在讨论的 sliverappbar 的页面，默认情况下它会生成一个后退箭头来弹出现有路由。但如果我有很长的文字或图片，它会出现在弹出路线的后退箭头后面。