我们可以在没有 Slivers 的情况下滚动时缩小小部件吗？

Question

我必须创建这个疯狂的布局，顶部有 3 个小部件，当用户向下滚动页面时，它们应该收缩/缩回。但由于元素是动态的，而且我在此处的主体上有 2 个选项卡，因此它不适用于 Sliver。除了 Slivers 之外，还有其他方法可以缩小/缩回这 3 个小部件吗？

理想情况下，“选择日期”行和选项卡应该缩小，而“过滤器按钮”行应该在用户滚动时仍然可见。

Answer 1

如果您需要这样的东西，请按照以下步骤操作。

版块和新闻故事小部件。

class Section extends State {
  @override
  Widget build(BuildContext context) {
    return MultiSliver(
      pushPinnedChildren: true,
      children: <Widget>[
        SliverPersistentHeader(
          pinned: true,
          ...
        ),
        if (!infinite)
          SliverAnimatedPaintExtent(
            child: SliverList(...),
          )
        else
          SliverList(...),
      ],
    );
  }
}

class NewsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        Section(infinite: false),
        Section(infinite: true),
      ],
    );
  }
}

列出 Sliver 实现。

class NewsPage extends StatelessWidget {
  const NewsPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          Strings.of(context).pages.news.title,
        ),
      ),
      body: View<NewsModel>(
        onModelReady: (model) => model.load(),
        builder: (context, model, _) {
          return Scrollbar(
            child: CustomScrollView(
              slivers: [
                CupertinoSliverRefreshControl(
                  onRefresh: () => model.load(),
                ),
                NewsSection(
                  model: model.topStories,
                  infinite: false,
                ),
                NewsSection(
                  model: model.newStories,
                  infinite: true,
                ),
                SliverToBoxAdapter(
                  child: SizedBox(height: MediaQuery.of(context).viewPadding.bottom),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

Complete Implementation can be found here.