Question

我有一个Flutter Widget，其列布局具有两个容器，其中一个具有ListView.builder。页面呈现后，我得到一个

底部溢出169px

，我不确定如何解决。

我一直在寻找解决方案，并尝试了各种操作，例如将一个或多个Container封装在Expanded小部件中，但这都不起作用。如果我仅将Container内包含FutureBuilder的{{1}}包装在Expanded中，则ListView根本不会呈现，并且会看到类似以下的错误：

I/flutter ( 3516): Another exception was thrown: RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 3516): Another exception was thrown: RenderBox was not laid out: RenderFlex#0caf9 relayoutBoundary=up2 NEEDS-PAINT
I/flutter ( 3516): Another exception was thrown: RenderBox was not laid out: RenderFlex#963f4 relayoutBoundary=up1 NEEDS-PAINT
I/flutter ( 3516): Another exception was thrown: NoSuchMethodError: The method '<=' was called on null.

这是我的Widget的构建功能的样子：

  Widget build(BuildContext context) {
    return Container(
        child: Column(children: <Widget>[
      Container(
          height: 40,
          color: Colors.grey.withOpacity(0.5),
          child: Padding(
              padding: const EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 2.0),
              child: TextField(
                  autofocus: false,
                  controller: searchFilterController,
                  keyboardType: TextInputType.text,
                  maxLines: 1,
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      filled: true,
                      fillColor: Colors.white.withOpacity(1),
                      hintText: 'Search',
                      suffixIcon: Icon(
                        Icons.search,
                        color: Colors.grey,
                      )),
                  onChanged: (value) {
                    filter = value;
                  }))),

      Container(
          child: FutureBuilder<UserPantry>(
        future: UserPantryDao.getUserPantry(widget.userId),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            widget.ingredientList.clear();
            if (filter == null || filter.trim() == "") {
              widget.ingredientList.addAll(snapshot.data.ingredients);
            } else {
              for (UserIngredient ingredient in snapshot.data.ingredients) {
                if (ingredient.ingredient.name
                    .toLowerCase()
                    .contains(filter.toLowerCase())) {
                  widget.ingredientList.add(ingredient);
                }
              }
            }

            return ListView.builder(
                shrinkWrap: true,
                itemCount: widget.ingredientList.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                      title: Text(
                    widget.ingredientList[index].ingredient.name,
                    style: TextStyle(fontSize: 20.0),
                  ));
                });
          } else if (snapshot.hasError) {
            print(snapshot.error);
            return Text(
                "An error occurred while loading your pantry. Please try again.");
          }
          //By default just show an empty container.
          return Container();
        },
      ))
    ]));
  }

Answer 1

只需将FutureBuilder<UserPantry>包装在Expanded小部件中，然后删除Container，因为这里根本不需要它。

 Expanded(
        child: FutureBuilder<UserPantry>(
           future: UserPantryDao.getUserPantry(widget.userId),
   ...

之所以会发生这种情况，是因为您给ListView赋予了无限的约束。另一种选择是向height父级添加一些ListView约束，例如将height中的Container设置为某项。

Answer 2

请尝试将Container移到外面，然后将列表包装在展开的位置。正如@Miguel Ruivo回答的那样，ListView必须具有有限的约束。

Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Container(
          height: 40,
          color: Colors.grey.withOpacity(0.5),
          child: Padding(
              padding: const EdgeInsets.fromLTRB(10.0, 2.0, 10.0, 2.0),
              child: TextField(
                  autofocus: false,
                  controller: searchFilterController,
                  keyboardType: TextInputType.text,
                  maxLines: 1,
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      filled: true,
                      fillColor: Colors.white.withOpacity(1),
                      hintText: 'Search',
                      suffixIcon: Icon(
                        Icons.search,
                        color: Colors.grey,
                      )),
                  onChanged: (value) {
                    filter = value;
                  }))),
      Expanded(
          child: FutureBuilder<UserPantry>(
        future: UserPantryDao.getUserPantry(widget.userId),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            widget.ingredientList.clear();
            if (filter == null || filter.trim() == "") {
              widget.ingredientList.addAll(snapshot.data.ingredients);
            } else {
              for (UserIngredient ingredient in snapshot.data.ingredients) {
                if (ingredient.ingredient.name
                    .toLowerCase()
                    .contains(filter.toLowerCase())) {
                  widget.ingredientList.add(ingredient);
                }
              }
            }

            return ListView.builder(
                shrinkWrap: true,
                itemCount: widget.ingredientList.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                      title: Text(
                    widget.ingredientList[index].ingredient.name,
                    style: TextStyle(fontSize: 20.0),
                  ));
                });
          } else if (snapshot.hasError) {
            print(snapshot.error);
            return Text(
                "An error occurred while loading your pantry. Please try again.");
          }
          //By default just show an empty container.
          return Container();
        },
      ))
    ]);
  }

Answer 3

在ListView.separated( separatorBuilder: (context, index) => Divider(), ...)中包装Expanded 将解决您的问题。

例如：Expanded(child: ListView.separated(separatorBuilder: (context, index) =>Divider(),itemCount: 1, itemBuilder: (context, index) {return Container(height:200.0, child: ...);})

Answer 4

仅用List包裹Expanded。试试这个：

Column(
            children: [
              Container(
                child: Text("data"),
                color: Colors.redAccent,
              ),
              Expanded(child: ListView.builder(itemBuilder: (context, i) {
                return Text("data");
              })),
            ],
          ),

颤振：如何解决底部溢出

4 个答案: