flutter - children 有非零弹性，但传入的高度限制是无限的

Question

return Card(
  child: Row(
    children: <Widget>[
      Placeholder(
        fallbackHeight: 100,
        fallbackWidth: 100,
      ),
      Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(height: 10,  child: Container(child: Text("One"),)),
          Expanded(child: Container(child:  Text("Center") )),

        ],
      )
    ],
  ),
);

在上面的代码中出现错误:

I/flutter ( 4872): The following assertion was thrown during performLayout(): I/flutter ( 4872): RenderFlex children have non-zero flex but incoming height constraints are unbounded. I/flutter ( 4872): When a column is in a parent that does not provide a finite height constraint, for example if it is I/flutter ( 4872): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a I/flutter ( 4872): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining I/flutter ( 4872): space in the vertical direction.

完整代码:

class FilmItems extends StatelessWidget {
  List<String> filmListList;

  List<String> _getFilmList() {
    var items = List<String>.generate(101, (counter) => "item $counter");
    return items;
  }

  FilmItems() {
    filmListList = _getFilmList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: filmListList.length,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Row(
              children: <Widget>[
                Placeholder(
                  fallbackHeight: 100,
                  fallbackWidth: 100,
                ),
                Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(height: 10,  child: Container(child: Text("One"),)),
                    Expanded(child: Container(child:  Text("Center") )),

                  ],
                )
              ],
            ),
          );
        });
  }
}

怎么了？

Answer 1

问题是您正在使用 Expanded 并且它的任何一个父项都有明确的高度。

解决方案取决于您希望如何处理 Expanded 的高度。在您的情况下，您似乎想要一个固定高度等于 Placeholder 的 Row。在这种情况下，您需要用与 Placeholder 相同的高度包裹 Row，如下所示:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("")),
    body: ListView.builder(
        itemCount: 3,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: SizedBox(
              height: 100,
              child: Row(
                children: <Widget>[
                  Placeholder(
                    fallbackHeight: 100,
                    fallbackWidth: 100,
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Text("One"),
                      Expanded(child: Center(child: Text("Center"))),
                    ],
                  ),
                ],
              ),
            ),
          );
        }),
  );
}

我删除了 Text("One") 的高度 10，因为如果 fontSize 更大，文本看起来会被裁剪。我用 Center 小部件包装了 Text("Center")，我认为这就是您想要实现的目标。

建议:如果Row 中的内容可以比Row 的高度大，则内容看起来会被裁剪。如果发生这种情况，您可能想采用另一种方法。