flutter - flutter :如何解决底部溢出

Question

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

bottom overflow by 169px

我不确定如何解决。

我一直在谷歌搜索解决方案，并尝试了各种操作，例如将一个或多个 Container包装在 Expanded小部件中的小部件中，但这也不起作用。如果我仅将其中包含 Container的 FutureBuilder包装在 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 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

尝试将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();
        },
      ))
    ]);
  }