如何在Flutter的滚动视图中将容器或其他任何小部件固定在appbar下方

Question

[我希望在滚动屏幕时将小部件放置在应用程序下方。该屏幕包含一个浮动的应用栏，该栏具有灵活的空间（sliverappbar），在其下方是一个容器，可显示任何容器或选项卡视图。链接中的视频是我想要的效果的示例。

Answer 1

我有一个解决您特定问题的想法，最近实现了与您想要的东西非常相似或相同的东西，但是我找不到您所讨论的要实现效果的视频链接。 。您可以编辑该链接并将其上传到视频，以便我查看以使我能够为您的问题提供精确的解决方案吗？

Answer 2

[好，我想我现在已经了解你了。您需要实现一个CustomScrollView

CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                    // Your appbar goes here
                    ),
                SliverPersistentHeader(
                  pinned: true,
                  delegate: PersistentHeader(
                    widget: Row(
                      // Format this to meet your need
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text('Hello World'),
                        Text('Hello World'),
                        Text('Hello World'),
                      ],
                    ),
                  ),
                ),
              ],
            ),

为Persistent标头创建一个新类，该类将扩展SliverPersistentHeaderDelegate，如下所示：

class PersistentHeader extends SliverPersistentHeaderDelegate {
  final Widget widget;

  PersistentHeader({this.widget});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      width: double.infinity,
      height: 56.0,
      child: Card(
        margin: EdgeInsets.all(0),
        color: Colors.white,
        elevation: 7.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(10.0),
            bottomRight: Radius.circular(10.0),
          ),
        ),
        child: Center(child: widget),
      ),
    );
  }

  @override
  double get maxExtent => 56.0;

  @override
  double get minExtent => 56.0;

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

让我知道是否遇到其他问题。