RenderFlex子项具有不受高度限制的问题

Question

我正在使用以下代码创建带有孩子的列表。

 return ListView.separated(
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      itemBuilder: (context, index) {
        return Card(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Flexible(
                fit: FlexFit.tight,
                flex: 1,
                child: ListTile(
                  leading: Image.asset( "/tray.png",width: 32.0,),
                  title: Text(packs[index]['name']),
                  trailing: IconButton(
                    onPressed: () {},
                    icon: Icon(
                      Icons.add,
                      color: Colors.yellow,
                    ),
                  ),
                ),
              ),
              Flexible(
                fit: FlexFit.loose,
                flex: 1,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  children: <Widget>[],
                ),
              ),
            ],
          ),
        );
      },
      separatorBuilder: (context, index) => Divider(
        color: Colors.black,
      ),
      itemCount: packs.length,
    );

我收到以下错误。在其他应用程序中，我早些时候遇到过许多此类问题。但是我无法解决这个问题。

The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

RenderBox was not laid out: RenderFlex#41bc7 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1691 pos 12: 'hasSize'
The relevant error-causing widget was: 
  Card file:///D:/apps/lib/tab_content.dart:49:16

Answer 1

问题是Card小部件没有大小，由hasSize错误指示。您可以通过使用Container或SizedBox小部件包装Card小部件并在其上设置高度和宽度属性，或者使用Expanded小部件包装Card小部件来解决此问题。这是有关扩展功能的快速视频：Widget of the Week - Expanded