颤振：如何解决底部溢出 [英] Flutter: how to fix bottom overflow

问题描述

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

I have a Flutter Widget with a column layout that has two Containers, one of which has a ListView.builder. When the page renders I get a

底部溢出169px

bottom overflow by 169px

，但我不确定如何解决。

and I'm not sure how to fix it.

我一直在寻找解决方案，并尝试了各种方法，例如将一个或多个 Container 包裹在其中展开小部件中的小部件，但这也不起作用。如果我仅将 FutureBuilder 包含在其中的 Container 包装在 Expanded ，那么 ListView 根本不会呈现，我看到如下错误：

I've googled around for solutions and have tried various things like wrapping one or more of the Containers in the widget in an Expanded widget, but that doesn't work either. If I wrap just the Container that has the FutureBuilder inside of it in an Expanded, then the ListView doesn't render at all and I see errors like:

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.

这是我的窗口小部件的构建功能：

This is what the build function of my Widget looks like:

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

推荐答案

尝试删除容器，然后将列表包装在展开的位置。
正如@Miguel Ruivo回答的那样，ListView必须具有有限的约束。

Try remove the Container outside, and wrap the list in a expanded. As @Miguel Ruivo answered, ListView must have a bounded constraints.

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

这篇关于颤振：如何解决底部溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！