时间戳

首页 > 解决方案 > 带有 ListView 的 Flutter Stepper 未呈现

flutter - 带有 ListView 的 Flutter Stepper 未呈现

问题描述

我正在使用 Stepper，其中一个步骤里面有一个 ListView.builder，如下所示：

steps: <Step>[
          new Step(
            title: new Text('Select Ingredients'),
            content: _buildPantryStep(),
            isActive: _currentStep >= 0,
            state: _currentStep >= 0 ? StepState.complete : StepState.disabled,
          )

_buildPantryStep() {
    return Column(children: <Widget>[
      FutureBuilder(
        future: _pantryMemoizer.future,
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.hasData) {
            return Expanded(
                child: PantryIngredients(ingredientList: ingredientList));
          } else if (snapshot.hasError) {
            return new Text('An error occurred retrieving your pantry');
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      )
    ]);
  }

PantryIngredients 主要是这样的：

Widget getList() {
    if (widget.ingredientList.isEmpty) {
      return Text("There are no items in your pantry. Let's add some!");
    } else {
      return ListView.builder(
          itemCount: widget.ingredientList.length,
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            if ((filter == null || filter.trim() == "") ||
                widget.ingredientList[index].ingredient.name
                    .toLowerCase()
                    .contains(filter.toLowerCase())) {
              return IngredientListEntry(widget.ingredientList[index]);
            } else {
              return Container(height: 0, width: 0);
            }
          });
    }
  }

我可以看到它在 getList() 函数中的位置，并且成分列表中填充了项目。但是，调试器永远不会进入实际的 itemBuilder 函数，并且 Step 内容以 CircularProgressIndicator 开始，但在 Future 完成后，内容只是空白。

如果我改变

return Expanded(child: PantryIngredients(ingredientList: ingredientList))

成为类似的东西

return Container(height: 500, width: 500, child: PantryIngredients(ingredientList: ingredientList))

然后它会渲染。所以，这似乎是 Step 内部的 Expanded 不活跃，或者我只是在做一些非常愚蠢的事情。

标签： flutterflutter-layout

解决方案

您的问题似乎与尺寸和布局有关。以下是我可以在不实际尝试的情况下做的一些评论：

  1. Expanded通常直接进入Column. 你有一个FutureBuilder介于两者之间。尝试移动Column里面的FutureBuilder这样Expanded的父级Column。

  2. 据我所知，Steps需要给出自己的尺寸。你试图用Column/做的Expanded是说“请占用所有可用的大小”。然而，Step可能是期待它的孩子的大小。您应该确定列的大小并用SizedBox.

推荐阅读