如何使滚动后条子不会出现在固定条子后面？

Question

我试图在页面顶部放置一个固定的

SliverAppBar

，同时用户可以滚动 SliverList。问题的根源是

Scaffold

的主体是渐变的，而固定的

SliverAppBar

不应该有背景颜色（因此它当前是透明的）。因此，当用户滚动时，

SliverList

内容出现在

SliverAppBar

后面，这不是想要的效果。

这是问题的最小可重现代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Regular AppBar'),
      ),
      body: DecoratedBox(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.teal, Colors.red],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          ),
        ),
        child: CustomScrollView(
          slivers: [
            const SliverToBoxAdapter(
              child: Center(
                child: Text(
                  'A widget that must be before SliverAppBar',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
            const SliverAppBar(
              surfaceTintColor: Colors.transparent,
              backgroundColor: Colors.transparent,
              pinned: true,
              title: Text(
                'Sliver AppBar',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
            SliverList.builder(
              itemBuilder: (_, index) => Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(16),
                  color: Colors.white,
                ),
                padding: const EdgeInsets.all(16),
                margin:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                alignment: Alignment.center,
                child: Text('#$index item'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

滚动前的演示： 滚动后的演示：

如果脚手架的主体不必是渐变，我只需使

SliverAppBar

的背景颜色与

Scaffold

的背景颜色相同，但我不能这样做，因为硬边缘正在消失出现。

我尝试过使用

SliverOverlapAbsorber

和

SliverOverlapInjector

并将

CustomScrollView

替换为

NestedScrollView

但我想我错过了这两个第一个小部件的要点。我只是想让这些项目不要出现在

SliverAppBar

后面，仅此而已。

提前感谢您的回复！

Answer 1

我遇到了同样的问题。