列中展开的列表视图占用了额外的空间

Question

我在一列中有两个列表视图。我希望第一个列表视图占用尽可能少的空间。因此，如果列表中有一项，则包含列表视图的框的大小应该是一项高。
我曾尝试为 ListView 使用容器，但随后出现错误，告诉我在使用 FitFit.loose 时使用 Expanded 或 Flexible。使用这些的问题在于，它们都会导致 ListView 有额外的填充。

在此屏幕截图中，您可以在第一个请求下方看到一点红色。这是包含我的 ListView 的 Expanded 的一部分。

这是我的代码：

return new Scaffold(
  backgroundColor: Theme.of(context).backgroundColor,
  appBar: new PreferredSize(
    child: GradientAppBar(includeLogo: false),
    preferredSize: new Size.fromHeight(75.0),
  ),
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
          padding: EdgeInsets.only(left: 10.0, top: 0.0),
          child: TextField(
            onChanged: (text) {
              setState(() {
                _searchText = text;
              });
              print("search text: $text");
            },
            decoration: new InputDecoration(
                hintText: 'Search',
                contentPadding: const EdgeInsets.symmetric(vertical: 20.0),
                border: InputBorder.none,
                hintStyle: new TextStyle(
                    color: Theme.of(context).secondaryHeaderColor),
                icon: new Icon(searchIcon,
                    color: Theme.of(context).secondaryHeaderColor)),
          )),
      FutureBuilder<FriendRequests>(
        future: fetchFriendRequests(),
        builder: (context, snapshot) {
          if (snapshot.hasData && snapshot.data.friendRequests.length > 0) {
            return Flexible(
                child: Column(mainAxisSize: MainAxisSize.min, children: <
                    Widget>[
              Container(
                  padding: EdgeInsets.all(15.0),
                  width: MediaQuery.of(context).size.width,
                  decoration: BoxDecoration(
                      color: Theme.of(context).bottomAppBarColor,
                      border: new Border(
                          bottom: new BorderSide(
                              color: Theme.of(context).accentColor,
                              width: 1.0,
                              style: BorderStyle.solid),
                          top: new BorderSide(
                              color: Theme.of(context).accentColor,
                              width: 1.0,
                              style: BorderStyle.solid))),
                  child: Center(child: Text("Requests"))),
              Flexible(
                  child: Container(
                      decoration: new BoxDecoration(
                        color: Colors.red,
                      ),
                      child: new ListView.builder(
                        shrinkWrap: true,
                        itemCount: snapshot.data.friendRequests.length,
                        itemBuilder: (BuildContext context, int index) {
                          return new Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              new Container(
                                decoration: new BoxDecoration(
                                    color:
                                        Theme.of(context).backgroundColor,
                                    border: new Border.all(
                                        color:
                                            Theme.of(context).accentColor)),
                                child: new FriendRequestView(
                                    snapshot.data.friendRequests[index]
                                        .friendName,
                                    snapshot.data.friendRequests[index]
                                        .pictureURL,
                                    snapshot.data.friendRequests[index].id,
                                    snapshot.data.friendRequests[index]
                                        .creationDate),
                              )
                            ],
                          );
                        },
                      )))
            ]));
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          } else if (snapshot.hasData &&
              snapshot.data.friendRequests.length == 0) {
            return Container();
          }

          // By default, show a loading spinner
          return Center(child: CircularProgressIndicator());
        },
      ),
      Container(
          padding: EdgeInsets.all(15.0),
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
              color: Theme.of(context).bottomAppBarColor,
              border: new Border(
                  bottom: new BorderSide(
                      color: Theme.of(context).accentColor,
                      width: 1.0,
                      style: BorderStyle.solid),
                  top: new BorderSide(
                      color: Theme.of(context).accentColor,
                      width: 1.0,
                      style: BorderStyle.solid))),
          child: Center(child: Text("Suggestions"))),
      FriendSuggestionsView(
        searchText: _searchText,
      )
    ],
  ),
);

这是我的 FriendSuggestionsView：

Widget build(BuildContext context) {
return Flexible(
    child: FutureBuilder<FriendSuggestions>(
        future: fetchSuggestions(),
        builder: (context, snapshot) {
          if (snapshot.hasData &&
              snapshot.data.friendSuggestions.length > 0) {
            return new ListView.builder(
                shrinkWrap: true,
                itemCount: snapshot.data.friendSuggestions.length,
                itemBuilder: (BuildContext context, int index) {
                  return FriendSuggestionRow(
                      name: snapshot.data.friendSuggestions[index].name,
                      userID: snapshot.data.friendSuggestions[index].userID,
                      pictureURL: snapshot
                          .data.friendSuggestions[index].pictureURL);
                });
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          } else if (snapshot.hasData &&
              snapshot.data.friendSuggestions.length == 0) {
            return Container(
                padding: EdgeInsets.all(20.0),
                child: Center(child: Text("No suggestions")));
          }

          // By default, show a loading spinner
          return Container(
              padding: EdgeInsets.all(20.0),
              child: Center(child: CircularProgressIndicator()));
        }));

}

Answer 1

我也遇到了同样的问题，在做了一些研究后，我发现了一个适合我的解决方案： 您必须为 padding 属性指定 EdgeInsets.zero。

Answer 2

在FutureBuilder 下，您应该使用Flexible 容器而不是Expanded，以防止其子级占用过多空间。在构建requests ListView 时，您还需要将shrinkWrap 属性设置为true。但是，请注意文档的最后一段：

收缩包裹滚动视图的内容比展开到允许的最大尺寸 (...) 要昂贵得多。

更新： 根据提供的其他信息，以下是您如何防止 suggestions 重叠 requests。

@override
Widget build(BuildContext context) {
  return Scaffold(
    ..., // other scaffold properties
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.max,
      children: [
        ..., // search field widget
        Expanded(
          child: LayoutBuilder(
            builder: (context, constraints) => Column(children: [
                  LimitedBox(
                    maxHeight: constraints.maxHeight / 2,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        ..., // requests header widget
                        FutureBuilder<FriendRequests>(
                          future: fetchFriendRequests(),
                          builder: (context, snapshot) {
                            if (snapshot.hasData &&
                                snapshot.data.friendRequests.length > 0) {
                              return Flexible(
                                child: Container(
                                  ..., // box decoration
                                  child: new ListView.builder(
                                    shrinkWrap: true,
                                    ..., // item count and builder
                                  ),
                                ),
                              );
                            } else ... // handle other data states
                          },
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Column(
                      children: [
                        ..., // suggestions header widget
                        FutureBuilder<FriendSuggestions>(
                          future: fetchSuggestions(),
                          builder: (context, snapshot) {
                            if (snapshot.hasData &&
                                snapshot.data.friendSuggestions.length > 0) {
                              return Expanded(
                                child: new ListView.builder(
                                  ..., // item count and builder
                                ),
                              );
                            } else ... // handle other data states
                          },
                        ),
                      ],
                    ),
                  ),
                ]),
          ),
        ),
      ],
    ),
  );
}

Answer 3

使用padding: EdgeInsets.zero,In ListView.builder

ListView.builder(
                      padding: EdgeInsets.zero,
                      shrinkWrap: true,
                      itemCount: 3,
                      physics: ScrollPhysics(),
                      itemBuilder: (context, index) {
                        return Container(
                       
                        );
                      },
                    ),

Answer 4

这通常会从列表视图中移除额外的顶部填充：

   MediaQuery.removePadding(
           context:context,
            removeTop: true,
             child  ListView.Builder(
              itemCount:2,
              itemBuilder(context,index){
          });