如何在Flutter中的ScrollView中将容器或任何其他小部件固定在AppBar下方？

Question

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

- ankit jain

Answer 1

好的，我现在明白了。您需要实现一个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 header”，该类继承了“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: 5.0,
        child: Center(child: widget),
      ),
    );
  }

  @override
  double get maxExtent => 56.0;

  @override
  double get minExtent => 56.0;

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

如果你遇到任何其他问题，请告诉我。

- Chichebe

---

谢谢，这很好。有什么办法可以防止它移到状态栏后面吗？ - Chris

你已经解决这个问题了吗？@Chris - Chichebe

最终我放弃了这个。无法让它按照我的意愿执行。 - Chris

太棒了！非常感谢！ - undefined

Answer 2

我有一个解决你特定问题的想法，最近实现了与你所需相似或相同的东西，但我找不到你提到的视频链接来展示你想要实现的效果。你能否编辑并上传视频链接，以便我可以查看，从而为你的问题提供精确的解决方案？

- Chichebe

---

请查看以下视频，您可以在AppBar之下看到固定在ListView上方的小部件。 - ankit jain