如何在 Flutter 中的 SliverAppBar 上叠加可滚动的 Sliver？

Question

我有一个

CustomScrollView

，还有一个

SliverAppBar

和一些条子。我想在

SliverAppBar

上叠加一些图形，并让它们与列表的其余部分一起滚动。

这是我一直在使用的代码：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SliverTest(),
    );
  }
}

class SliverTest extends StatefulWidget {
  const SliverTest({super.key});

  @override
  State<SliverTest> createState() => _SliverTestState();
}

class _SliverTestState extends State<SliverTest> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              expandedHeight: 350.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  color: Colors.yellow,
                  child: const Center(child: Text('Yellow')),
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                height: 100,
                color: Colors.blueAccent,
                child: Stack(
                  children: [
                    Align(
                      alignment: const Alignment(0.0, -2.0),
                      child: Container(
                        width: 50,
                        height: 50,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.red,
                        ),
                        child: const Center(child: Text('Red')),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    height: 50,
                    color: Colors.teal[100 * ((index % 8) + 1)],
                    child: Center(child: Text('Item #$index')),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在此设置中，我希望将红色圆圈（当前已被剪切）绘制在

SliverAppBar

的黄色部分的顶部。我将红色圆圈放在一个条子内，因为我希望当用户与可滚动区域交互时它与列表的其余部分一起滚动。

有人可以提供一个简单的例子来说明如何在 Flutter 中实现这一点吗？我对使用条子的任何其他解决方案持开放态度，因为它们为我的真实应用程序的其他部分提供了巨大的便利。否则，我知道我可以在不使用碎片的情况下重新创建它。任何帮助将不胜感激。预先感谢！

Answer 1

这是根据我的理解针对您的问题的解决方案。

class SliverTest extends StatefulWidget {
  const SliverTest({super.key});

  @override
  State<SliverTest> createState() => _SliverTestState();
}

class _SliverTestState extends State<SliverTest> {
  late ScrollController _scrollController;

  @override
  void initState() {
    _scrollController = ScrollController();
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          controller: _scrollController,
          shrinkWrap: true,
          slivers: [
            SliverAppBar.large(
              pinned: true,
              floating: false,
              stretch: true,
              automaticallyImplyLeading: false,
              expandedHeight: 350.0,
              backgroundColor: Colors.purple,
              title: Center(
                child: Container(
                  width: 50,
                  height: 50,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.red,
                  ),
                  child: const Center(child: Text('Red')),
                ),
              ),
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  color: Colors.yellow,
                  child: const Center(child: Text('Yellow')),
                ),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                // height: 100,
                color: Colors.blueAccent,
                child: Stack(
                  children: [
                    SingleChildScrollView(
                      child: Column(
                        children: [
                          for (int i = 0; i < 20; i++) ...[
                            Container(
                              height: 50,
                              color: Colors.teal[100 * ((i % 8) + 1)],
                              child: Center(child: Text('Item #$i')),
                            )
                          ],
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // SliverList(
            //   delegate: SliverChildBuilderDelegate(
            //     (BuildContext context, int index) {
            //       return Container(
            //         height: 50,
            //         color: Colors.teal[100 * ((index % 8) + 1)],
            //         child: Center(child: Text('Item #$index')),
            //       );
            //     },
            //     childCount: 20,
            //   ),
            // ),
          ],
        ),
      ),
    );
  }
}