如何将卡片包裹在 SliverList 周围？答案

【问题标题】：How do wrap a Card around SliverList?如何将卡片包裹在 SliverList 周围？
【发布时间】：2020-10-18 22:23:23
【问题描述】：

我有一个 Sliver 列表，我想将它封装在一张卡片中。这是我的银名单代码：

  Widget hello() {
    return SliverPadding(
      padding: const EdgeInsets.only(
        top: 0.0,
        bottom: 100.0,
      ),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.only(
                top: 4,
                bottom: 4,
                left: 8,
                right: 8,
              ),
              child: Column(
                children: <Widget>[
                  Container(
                    color: Color(0xff9a9a9a),
                    height: 0.5,
                  ),
                  SizedBox(
                    height: 4,
                  ),
                  ListTile(
                    leading: ClipRRect(
                      borderRadius: BorderRadius.circular(12.0),
                      child: Container(
                        child: Image.network('http://cdn.akc.org/content/hero/cute_puppies_hero.jpg'),
                      ),
                    ),
                    title: Row(
                      children: <Widget>[
                        Text('Hello',
                        ),
                      ],
                    ),
                    subtitle: Text(
                      'This is a puppy',
                  ),
                  SizedBox(
                    height: 4,
                  ),
                ],
              ),
            );
          },
          childCount: 8,
        ),
      ),
    );
  }

我是这样称呼它的：

  Widget build(BuildContext context) {
    return Scaffold(
 backgroundColor: Color.fromRGBO(247, 248, 251, 1),
      body: Container(
        child: Stack(
          children: <Widget>[
            CustomScrollView(
                slivers: <Widget>[
                  hello(),
                 ..other widgets are called here..
                ],
              ),  
          ],
        ),
      ),
    );
  }

这就是我想要在卡片中显示的 SliverList 实现的目标：

当我尝试用 Card 包装 SliverList 时，我收到 RenderFlex 错误，并且它不接受 Card 作为孩子。

【问题讨论】：

你想把整个列表放在一张卡片里吗？
是的，我想将整个列表包装在一张卡片中
您可以用卡片包裹CustomScrollView。但是如果你使用CustomScrollView，你不能直接包装SliverList。
但我还需要在我的 CustomScrollView 中调用其他小部件。这些小部件不需要成为我卡片的一部分。
该小部件会随着列表滚动吗？那么他们会在CustomScrollView 的末尾吗？

标签： flutter user-interface dart

【解决方案1】：

对于那些仍在寻找答案的人：您可以使用来自精彩包sliver_tools 的 SliverStack 小部件：

import 'package:flutter/material.dart';
import 'package:sliver_tools/sliver_tools.dart';

CustomScrollView(
  slivers: [
    SliverStack(
      insetOnOverlap: false,
      children: [
        SliverPositioned.fill(child: Card()),
        SliverList(...),
      ],
    ),
  ],
);

【讨论】：