Question

我有以下小部件代表我的ListView中的一项：

class ListItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: [
          Image.network('https://via.placeholder.com/100'),
          Expanded(
            child: Padding(
              padding: EdgeInsets.all(5.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    'Lorem ipsum dolor sit amet',
                    style: Theme.of(context).textTheme.headline6,
                    textAlign: TextAlign.left,
                  ),
                  Text(
                    'Lorem ipsum',
                    style: Theme.of(context).textTheme.subtitle1,
                    textAlign: TextAlign.left,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text('Lorem'),
                      Text('Ipsum'),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我得到以下结果：

我希望图像右侧的Column元素垂直扩展，以便其mainAxisAligment实际上在其3个子元素之间确实增加了一些空间。

我尝试在父行上添加crossAxisAlignment中的CrossAxisAlignment.stretch，但是随后出现一个异常，内容为“ BoxConstraints强制将高度设置为无限高。”

我还能如何垂直扩展此列？

Answer 1

据我了解，您想在它们之间留出间隔，如果是这样，则可以使用 IntrinsicHeight 小部件。对不起，我的英语不好。

class ListItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: IntrinsicHeight(
        child: Row(
          children: [
            Image.network('https://via.placeholder.com/100'),
            Expanded(
              child: Padding(
                padding: EdgeInsets.all(5.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'Lorem ipsum dolor sit amet',
                      style: Theme.of(context).textTheme.headline6,
                      textAlign: TextAlign.left,
                    ),
                    Text(
                      'Lorem ipsum',
                      style: Theme.of(context).textTheme.subtitle1,
                      textAlign: TextAlign.left,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('Lorem'),
                        Text('Ipsum'),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

如何展开使“行”子级在列表项内达到最大高度？

1 个答案: