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),
      ],
    );
  }
}

列出银条实施情况。

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.

滚动时是否可以减少窗口小部件的数量？

1 个答案: