将 SliverList 包装在容器中

Question

小样

嗨，这是我试图通过 flutter list list-expanded实现的目标

当用户向下滑动列表时，标题保持固定，而图像滑开。我试图用一些条子来达到这种效果。

问题

就我而言，我不能使用这样的东西，因为我列出的内容包装在自定义容器中，如下所示：

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          flexibleSpace: SvgPicture.asset('assets/icons/school_old.svg'),
          backgroundColor: Colors.black,
        ),
        SliverList(
        ....
        );
      ],
    );
  }

怎样才能达到想要的效果呢？

我尝试使用 aSliverToBoxAdapter但这似乎不适用于我的情况

  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        backgroundColor: Colors.red,
        flexibleSpace: Center(
          child: Text('hello world'),
        ),
      ),
      SliverToBoxAdapter(
        child: RoundedContainer(
            color: Colors.grey[900],
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: RoundedContainer(
                    color: Colors.white,
                  ),
                );
              },
            )),
      ),
    ],
  ),

我哪里错了？

Answer 1

我相信这可以通过使用SliverAppBar()和SliverList()来实现。实际上文档中有很多示例。这是示例之一：

import 'package:flutter/material.dart';

void main() => runApp(const AppBarApp());

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

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

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

  @override
  State<SliverAppBarExample> createState() => _SliverAppBarExampleState();
}

class _SliverAppBarExampleState extends State<SliverAppBarExample> {
  bool _pinned = true;
  bool _snap = false;
  bool _floating = false;

// [SliverAppBar]s are typically used in [CustomScrollView.slivers], which in
// turn can be placed in a [Scaffold.body].
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: _pinned,
            snap: _snap,
            floating: _floating,
            expandedHeight: 160.0,
            flexibleSpace: const FlexibleSpaceBar(
              title: Text('SliverAppBar'),
              background: FlutterLogo(),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                  color: index.isOdd ? Colors.white : Colors.black12,
                  height: 100.0,
                  child: Center(
                    child: Text('$index', textScaleFactor: 5),
                  ),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

输出：