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

Question

如何修改 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,
              )),
        ),

Answer 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,
            ),
          ),
        ),
      ),
    ],
  ),
),