如何在颤动的滚动视图中将容器或任何其他小部件固定在应用栏下方 [英] How to pin a container or any other widget below appbar in scroll view in flutter

问题描述

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

I want a widget to be place below the app while scrolling the screen . The screen contains a floating app bar with flexible space ( sliverappbar) and below it one conatiner which have any container or tab view . The video in the link is the example of the effect i wanted.

推荐答案

好吧，我想我现在明白你了.您需要实现一个 CustomScrollView

Alright, I think I understand you now. You'll need to implement a 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，如下所示:

Create a new class for the Persistent header, which extends a SliverPersistentHeaderDelegate as shown:

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

如果您遇到任何其他问题，请告诉我.

Let me know if you encounter any other issue.

这篇关于如何在颤动的滚动视图中将容器或任何其他小部件固定在应用栏下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！