如何在silverList中进行滚动？

Question

我正在尝试制作银色应用栏，但遇到了问题。我使用 infitelist 来构建一个列表，因为我发现 infitelist 可以更巧妙地处理列表视图，因此应用程序栏不会像 Blow gif 中所示的那样位于顶部。由于不支持无限列表，我已经用容器包装了它。 下面是代码

        SliverList(
              delegate: SliverChildListDelegate(
                <Widget>[
                       Container(
                         height: 500,
                         child: Column(
                    children: [
                      TopListView(posts: state.posts),
                      Expanded(
                          child: InfiniteList(
                            loadingBuilder: (context) {
                              return const SizedBox(
                                height: 100,
                                child: LoadingIndicator(
                                  message: 'Fetching older posts',
                                ),
                              );
                            },
                            hasError: state.status.isFailure,
                            isLoading: state.status.isLoading,
                            itemCount: state.posts.length,
                            hasReachedMax: state.hasReachedMax,
                            onFetchData: () {
                              context.read<PostsBloc>().add(const PostsRequested());
                            },
                            itemBuilder: (context, index) {
                              final post = state.posts[index];
                              return PostCard(post: post);
                            },
                            errorBuilder: (context) {
                              return SizedBox(
                                height: 100,
                                child: Center(
                                  child: ReloadButton(
                                    onPressed: () {
                                      context
                                          .read<PostsBloc>()
                                          .add(const PostsRequested());
                                    },
                                    message: 'Failed to fetch more posts',
                                  ),
                                ),
                              );
                            },
                            emptyBuilder: (context) {
                              return Center(
                                child: ReloadButton(
                                  onPressed: () {
                                    context
                                        .read<PostsBloc>()
                                        .add(const PostsRequested());
                                  },
                                  message: 'No Posts Found',
                                ),
                              );
                            },
                          ),

                      ),
                    ],
                  ),
                       )
                ],
              ),
            )

我们如何解决这个问题？

Answer 1

您可以使用SingleChildScrollView 代替Container。

Answer 2

实际上，您只需要CustomScrollView 和SliverAppBar。 这是一个小部件示例：

Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            pinned: false,
            snap: true,
            floating: true,
            expandedHeight: 160.0,
            flexibleSpace: const FlexibleSpaceBar(
              title: Text('SliverAppBar'),
              background: FlutterLogo(),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  color: index.isOdd ? Colors.white : Colors.black12,
                  height: 100.0,
                  child: Center(
                    child: Text('$index', textScaleFactor: 5),
                  ),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );

If you want to know more this is SliverAppBar docs