带有透明背景的银色应用栏

Question

我在下面提供视频。在这里，当列表位于最顶部位置时。我希望该内容（这里是山羊的图片）位于应用程序栏后面。仅当向下或向上滚动时才会发生这种情况。但不在最高位置。我到处寻找。但没有结果。

    return Scaffold(
  backgroundColor: commonBlack,
  body: NestedScrollView(
    headerSliverBuilder: (context, innerBoxIsScrolled) {
    return [
     SliverAppBar(
       excludeHeaderSemantics: true,
       elevation: 0,
       floating: true,
       snap: true,
       backgroundColor: Colors.transparent,
       toolbarHeight: 90,
       title: Column(.....)
    ];
  }, body: ListView(
    children: [
      Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Image.asset('assets/images/profile_image.png'),
          Image.asset('assets/images/profile_image.png'),
          Image.asset('assets/images/profile_image.png'),
        ],
      ),
    ],
  ),),
);

Youtube 链接 ....抱歉，我无法在这里上传。

Answer 1

尝试下面的代码希望对您有所帮助。参考

SliverAppBar

return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            snap: false,
            floating: true,
            expandedHeight: 160.0,
            backgroundColor: Colors.transparent,
            flexibleSpace: const FlexibleSpaceBar(
              title: Text(
                'SliverAppBar',
              ),
              background: FlutterLogo(),
            ),
          ),
          const SliverToBoxAdapter(
            child: SizedBox(
              height: 20,
              child: Center(
                child: Text('Scroll to see the SliverAppBar in effect.'),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Column(
                  children: [
                    Image.network(
                        'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png'),
                  ],
                );
              },
              childCount: 5,
            ),
          ),
        ],
      ),
    );

结果屏幕->

Answer 2

尝试给

surfaceTintColor

一个透明的颜色，像这样：

SliverAppBar(
  pinned: true,
  surfaceTintColor: Colors.transparent, // <- Here
    // ...
),