listview - flutter |在 ListView 中使用 Listview.builder - 使整个页面可滚动

Question

我想构建一个类似 instagram 的个人资料页面，其中当前用户的所有帖子都列在提要中。在此之上，应显示有关用户的一些信息(头像、关注者数量、帖子数量、简历等)。 用户应该能够滚动整个页面。目前页面只能滚动到我的 ListView.builder 中 sizedBox 小部件的高度。就这样:

ProfilePage 类的构建方法如下所示:

Widget build(BuildContext context) {

    return SafeArea(
      child: Scaffold(    
        appBar: AppBar(),
        body: ListView(    
          children: <Widget>[
           Padding(
                    padding: const EdgeInsets.only(left: 25.0, top: 30.0),
                    child: Text(_user.displayName,
                        style: TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.bold,
                            fontSize: 20.0)),
                  ),
                  ...(all the other information for the "header-part")

                  postImagesWidget(),

            ])));}

在 postImagesWidget 中，我使用 ListView.builder 构建提要:

Widget postImagesWidget(){
return FutureBuilder(
            future: _future,
            builder:
                ((context, AsyncSnapshot<List<DocumentSnapshot>> snapshot) {
              if (snapshot.hasData) {
                if (snapshot.connectionState == ConnectionState.done) {
                  return SizedBox(
                    height: 600,
                      child: ListView.builder(
                          physics: const NeverScrollableScrollPhysics(),

                          //shrinkWrap: true,
                          itemCount: snapshot.data.length,
                          itemBuilder: ((context, index) => ListItem(
                              list: snapshot.data,
                              index: index,
                              user: _user))));
                } else {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            }),
          );

}

我不得不添加一个 sizedBox-Widget 来避免这个错误:

Another exception was thrown: RenderBox was not laid out: RenderViewport#50ccf NEEDS-PAINT

此错误的描述说我应该将 shrinkwrap 添加到我的 ListView.builder，但是在出现此错误滚动后我的整个应用程序崩溃了:

Failed assertion: line 470 pos 12: 'child.hasSize': is not true.

如何让整个页面可滚动，而不是让两部分(页眉和提要)分开？

我知道这与我在 ListView 中使用 ListView.builder 的事实有关...

最好的问候。

Answer 1

我个人不会在 flutter 中为列表使用 sized 组件，除非您希望布局的一部分在特定区域可滚动。

但在您的情况下，我看到您希望整个页面都可以滚动，因此您有一个起点，您可以从这里设计页面的其余部分。 (整个页面应该是可滚动的，所以我理解这个页面的顶部小部件应该是可滚动的小部件，如 SingleChildScrollView、CustomScrollView、ListView 等)

现在您的方法没有错，但涉及到您知道 SizedBox 的最终高度，您可以根据列表计算出该高度。 (太难了)

为了解决您的问题，我使用了带有 SliverList 小部件的 CustomScrollView。

return SafeArea(
        child: Scaffold(
            appBar: AppBar(),
            body: CustomScrollView(
              slivers: <Widget>[
                SliverList(
                  delegate: SliverChildListDelegate(
                    [
                      Padding(
                        padding: const EdgeInsets.only(left: 25.0, top: 30.0),
                        child: Text(displayName,
                            style: TextStyle(
                                color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0)),
                      ),
                    ],
                  ),
                ),
                FutureBuilder(
                  future: ApiProvider.getPictures(),
                  builder: ((context, AsyncSnapshot snapshot) {
                    if (snapshot.hasData) {
                      if (snapshot.connectionState == ConnectionState.done) {
                        return SliverList(
                            delegate: SliverChildBuilderDelegate(
                                (context, index) => Container(
                                      margin: EdgeInsets.symmetric(vertical: 10),
                                      child: Column(
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: <Widget>[
                                          Text(
                                            displayName,
                                            style: TextStyle(
                                                fontSize: 17, fontWeight: FontWeight.bold),
                                          ),
                                          Text(snapshot.data[index].location),
                                          Image(
                                            image: NetworkImage(snapshot.data[index].pictureUrl),
                                            width: MediaQuery.of(context).size.width,
                                          )
                                        ],
                                      ),
                                    ),
                                childCount: snapshot.data.length));
                      } else {
                        return SliverFillRemaining(
                          child: Center(
                            child: CircularProgressIndicator(),
                          ),
                        );
                      }
                    } else {
                      return SliverFillRemaining(
                        child: Center(
                          child: CircularProgressIndicator(),
                        ),
                      );
                    }
                  }),
                ),
              ],
            )));

您的问题还有其他解决方案，但我相信这是性能方面的最佳解决方案。

如果您需要帮助，请随时寻求帮助。