Flutter - 容器宽度和高度适应父级

Question

我有一个包含多个小部件的Column的Card小部件。其中之一是Container。

Widget _renderWidget() {
    return Column(
      children: <Widget>[
        Visibility(
          visible: _isVisible,
          child: Container(
              width: 300,
              height: 200,
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.grey)),
              child: ListView.builder(
                itemCount: titles.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      leading: Icon(icons[index]),
                      title: Text(titles[index]),
                    ),
                  );
                },
              )),
        ),
      ],
    );
  }

这里，如果我不指定width和height，将会出现错误。但是，有没有一种方法可以使它们适应父元素？

编辑

完整代码：

return ListView(
      children: <Widget>[
        Center(
          child: Container(
            child: Card(
                margin: new EdgeInsets.all(20.0),
                child: new Container(
                  margin: EdgeInsets.all(20.0),
                  width: double.infinity,
                  child: Column(
                    children: <Widget>[
                      FormBuilder(
                        key: _fbKey,
                        autovalidate: true,
                        child: Column(
                          children: <Widget>[
                            FormBuilderDropdown(

                             onChanged: (t) {
                                setState(() {
                                  text = t.vrsta;
                                });
                              },
                              validators: [FormBuilderValidators.required()],
                              items: user.map((v) {
                                return DropdownMenuItem(
                                    value: v,
                                    child: ListTile(
                                      leading: Image.asset(
                                        'assets/img/car.png',
                                        width: 50,
                                        height: 50,
                                      ),
                                      title: Text("${v.vrsta}"),
                                    ));
                              }).toList(),
                            ),
                          ],
                        ),
                      ),
                      Container(child: _renderWidget()),
                      text.isEmpty
                          ? Container()
                          : RaisedButton(
                              child: Text("Submit"),
                              onPressed: () {
                                _fbKey.currentState.save();
                                if (_fbKey.currentState.validate()) {
                                  print(_fbKey.currentState.value.toString());
                                  print(formData.startLocation);
                                  getAutocomplete();
                                }
                              },
                            )
                    ],
                  ),
                )),
          ),
        ),
      ],
    );
  }

- harunB10

Answer 1

只需将您的容器的height和width属性设置为double.infinity

解决方案代码：

Widget _renderWidget() {
    return Column(
      children: <Widget>[
        Visibility(
          visible: _isVisible,
          child: Container(
              width: double.infinity,
              height: double.infinity,
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.grey)),
              child: ListView.builder(
                itemCount: titles.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      leading: Icon(icons[index]),
                      title: Text(titles[index]),
                    ),
                  );
                },
              )),
        ),
      ],
    );
  }

- Son of Stackoverflow

Answer 2

您正在将ListView放在Column中，因此需要在Container中指定高度以避免错误。最好的方法是使用Expanded或Flexible作为您的ListView的父级。

Expanded(
  child: ListView.builder(...)
)

更新：

Widget _renderWidget() {
  return Column(
    children: <Widget>[
      Visibility(
        visible: _isVisible,
        child: Expanded(
          child: ListView.builder(
            itemCount: titles.length,
            itemBuilder: (context, index) {
              return Card(
                child: ListTile(
                  leading: Icon(icons[index]),
                  title: Text(titles[index]),
                ),
              );
            },
          ),
        ),
      ),
    ],
  );
}

- CopsOnRoad

---

但是我遇到了错误：RenderFlex子元素具有非零flex，但传入的高度约束未被限制。 - harunB10

它对我有效，我测试了你的代码，请确保删除“Container”小部件。 - CopsOnRoad

仍然无法工作。我有一个容器 - 列表 - 容器 - 扩展 - 列表视图。 - harunB10

再次不确定为什么它没有起作用，你能否请发完整的代码？ - CopsOnRoad

谢谢您的更新，但是当前的帖子中有许多我无法访问的变量。您能否再次更新它，使得易于重现？ - CopsOnRoad