我制作了一个 sliverappbar，我想在这个 sliverappbar 上放一张卡片。如何在 sliverappbar 上放一张卡片，然后这张卡片与 sliverappbar 一起折叠？

卡片应该一半在appbar，一半在'body'

CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 100.0,
          floating: true,
          snap: true,
          backgroundColor: Colors.green,
          elevation: 0.0,
          flexibleSpace: FlexibleSpaceBar(
            title: const Text(
              "test",
              style: TextStyle(color: Colors.white, fontSize: 20.0),
            ),
            centerTitle: true,
            background: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Stack(
                  children: <Widget>[
                    Container(
                      height: 60.0,
                      color: Colors.black,
                    )
                  ],
                )
              ],
            )
          ),
        SliverFillRemaining(
          child: new Text("data"),
        )
      ],
    ),

最佳答案

您可以使用 SliverPersistentHeaderDelegate 和 Stack 小部件来做到这一点，请查看我的示例:

    class PlayingSliversState extends State<PlayingSlivers> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: CustomScrollView(
              slivers: <Widget>[
                SliverPersistentHeader(
                  pinned: true,
                  floating: true,
                  delegate: CustomSliverDelegate(
                    expandedHeight: 120,
                  ),
                ),
                SliverFillRemaining(
                  child: Center(
                    child: Text("data"),
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }

    class CustomSliverDelegate extends SliverPersistentHeaderDelegate {
      final double expandedHeight;
      final bool hideTitleWhenExpanded;

      CustomSliverDelegate({
        @required this.expandedHeight,
        this.hideTitleWhenExpanded = true,
      });

      @override
      Widget build(
          BuildContext context, double shrinkOffset, bool overlapsContent) {
        final appBarSize = expandedHeight - shrinkOffset;
        final cardTopPosition = expandedHeight / 2 - shrinkOffset;
        final proportion = 2 - (expandedHeight / appBarSize);
        final percent = proportion < 0 || proportion > 1 ? 0.0 : proportion;
        return SizedBox(
          height: expandedHeight + expandedHeight / 2,
          child: Stack(
            children: [
              SizedBox(
                height: appBarSize < kToolbarHeight ? kToolbarHeight : appBarSize,
                child: AppBar(
                  backgroundColor: Colors.green,
                  leading: IconButton(
                    icon: Icon(Icons.menu),
                    onPressed: () {},
                  ),
                  elevation: 0.0,
                  title: Opacity(
                      opacity: hideTitleWhenExpanded ? 1.0 - percent : 1.0,
                      child: Text("Test")),
                ),
              ),
              Positioned(
                left: 0.0,
                right: 0.0,
                top: cardTopPosition > 0 ? cardTopPosition : 0,
                bottom: 0.0,
                child: Opacity(
                  opacity: percent,
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 30 * percent),
                    child: Card(
                      elevation: 20.0,
                      child: Center(
                        child: Text("Header"),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      }

      @override
      double get maxExtent => expandedHeight + expandedHeight / 2;

      @override
      double get minExtent => kToolbarHeight;

      @override
      bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
        return true;
      }
    }

结果:

关于dart - 如何将卡片放入 sliver 应用栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55769270/