我如何将卡片放入Sliver应用栏 [英] How can i put a card into a sliver app bar

问题描述

我做了一个sliverappbar，我想在该sliverappbar上放一张卡片。我如何将卡放在sliverappbar上，而这张卡却随着sliverappbar折叠？

i make a sliverappbar, and i want to put a card over this sliverappbar. How can i put a card over the sliverappbar and this card collapse with the sliverappbar?

该卡应在appbar中停留一半，在身体中停留一半

The card should stay half in appbar and half in the '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 小部件，检查我的示例：

You can do it using SliverPersistentHeaderDelegate and Stack widget, check my sample :

    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;
      }
    }

结果：

这篇关于我如何将卡片放入Sliver应用栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！