如何设置包含SilverAppBar和SilverList的CustomScrollView的背景颜色- in flutter？

8aqjt8rx 于 2023-10-22 发布在 Flutter

关注(0)|答案(1)|浏览(149)

我想去掉白色部分，让它和背景图像一起透明。我将SilverList背景的颜色改为红色，以使问题更加明显。也许我做错了什么，我是Flutter的新手，仍然不太明白，想知道我做错了什么。

这是我的widget实现：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Colors.transparent,
            expandedHeight: 275.0,
            floating: false,
            pinned: true,
            elevation: 0,
            flexibleSpace: FlexibleSpaceBar(
              background: Container(
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/background_image.jpeg"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              stretchModes: [
                StretchMode.zoomBackground,
                StretchMode.blurBackground,
              ],
            ),
            stretch: true,
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(
                  margin: EdgeInsets.only(top: 10.0),
                  width: 0,
                  padding: EdgeInsets.all(30.0),
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(48),
                        topRight: Radius.circular(48)),
                  ),
                  child: Column(
                    children: [
                      _buildContainer1(),
                      _buildContainerWithImageAndButton(
                          "assets/barber1.png", "About Us", 241),
                      SizedBox(height: 50),
                      _buildContainerWithImageAndButton(
                          "assets/barber2.png", "Contact", 263),
                      _buildContainer4(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

我试着遵循一些指南并向GPTchat寻求帮助，因为有时我确实忘记了一些东西，但不幸的是我无法找到解决方案，我试图将背景颜色改为透明，但它不起作用。

flutter

来源：https://stackoverflow.com/questions/77283529/how-can-i-set-a-background-color-of-a-customscrollview-that-contains-silverappba

1条答案

按热度按时间

mxg2im7a1#

我建议把你的背景图片放在一个Stack小部件里，而不是放在你的SliverAppBar里，因为CustomScrollView会把你的小部件并排放置（就像一个列）。

代码示例

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: Image.asset(
              'assets/background_image.jpeg',
              alignment: Alignment.topCenter,
            ),
          ),
          CustomScrollView(
            physics: const BouncingScrollPhysics(),
            slivers: <Widget>[
              const SliverAppBar(
                backgroundColor: Colors.transparent,
                expandedHeight: 275.0,
                floating: false,
                pinned: true,
                elevation: 0,
                flexibleSpace: FlexibleSpaceBar(
                  stretchModes: [
                    StretchMode.zoomBackground,
                    StretchMode.blurBackground,
                  ],
                ),
                stretch: true,
              ),
              SliverList(
                delegate: SliverChildListDelegate(
                  [
                    Container(
                      margin: const EdgeInsets.only(top: 10.0),
                      width: 0,
                      clipBehavior: Clip.antiAlias,
                      padding: const EdgeInsets.all(30.0),
                      decoration: const BoxDecoration(
                        color: Colors.red,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(48),
                            topRight: Radius.circular(48)),
                      ),
                      // Putting a placeholder here as you didn't provide
                      // _buildContainer & _buildContainerWithImageAndButton
                      child: const Placeholder(fallbackHeight: 5000),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Try the full example on DartPad