如何将 Card 小部件放入 SliverAppBar 中？

Question

我是 Flutter 的初学者。我正在尝试制作像 this 这样的小部件。不幸的是，我仍然在努力实施它们。我试过在容器中使用灵活的 space 条和一些对齐方式。但它并没有如我所愿。有什么办法可以将该卡放在 SliverAppBar 上吗？这是我的代码。

Header.dart

  Widget build(BuildContext context) {
    return SliverAppBar(
      expandedHeight: 25.h,
      backgroundColor: celticBlue,
      actions: [
        IconButton(
          icon: const Icon(Icons.more_vert),
          onPressed: () {},
        ),
      ],
      title: Text('Quran', style: whiteHeading16),
      centerTitle: true,
      shadowColor: danube,
      pinned: true,
      elevation: 1,
      shape: const ContinuousRectangleBorder(
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.elliptical(100, 50),
          bottomRight: Radius.elliptical(50, 100),
        ),
      ),
      flexibleSpace: Padding(
        padding: const EdgeInsets.all(25),
        child: Container(
          color: Colors.redAccent,
          alignment: Alignment.bottomCenter,
          height: 15.h,
        ),
      ),
    );
  }

这里是the result

Answer 1

您可以使用 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;
  }
}

结果您可以根据自己的意愿编辑此代码，然后查看

如何将 Card 小部件放入 SliverAppBar 中？

How to put a Card widget inside a SliverAppBar?

flutter

flutter-appbar

flutter-widget

sliverappbar

flutter-sliverappbar