Flutter - 如何将行内的列拉伸到最大可用高度？答案

【问题标题】：Flutter - How to stretch Column inside Row to maximum available height?Flutter - 如何将行内的列拉伸到最大可用高度？
【发布时间】：2021-12-27 15:39:33
【问题描述】：

我需要在我的 Flutter 应用中创建这个 UI：

这是我列表的行。这是我的代码：

return Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    CachedNetworkImage(
      imageUrl: photoUrl,
      imageBuilder: (context, imageProvider) => Container(
        height: 112,
        width: 90,
      ),
    ),
    const SizedBox(
      width: 14,
    ),
    Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '${title}',
        ),
        
        Align(
          alignment: Alignment.centerLeft,
          child: SizedBox(
            width: descriptionWidth,
            child: Text(
              '${shortDescription}',
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
        
        Text(
          '${footer}',
        ),
        
      ],
    )
  ],
);

我需要测试块占据与图像相等的高度。但是当文本都在中间时，它占用的高度要少得多。这是我的代码现在如何工作的示例：

我该如何解决这个问题？如何将行内的列拉伸到最大可用高度？

我尝试了几个选项，但它破坏了多行文本的显示。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

虽然高度是固定的，但您可以用SizedBox(height:112) 包裹Column 并控制textOverflow，用Expanded 包裹SizedBox。

Expanded(
  child: SizedBox(
    height: 112,
    child: Column(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [

完整方法

 return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Container(
          /// replace with image
          height: 112,
          width: 90,
          color: Colors.red,
        ),
        const SizedBox(
          width: 14,
        ),
        Expanded(
          child: SizedBox(
            height: 112,
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '${title}',
                ),
                Flexible(
                  child: Text(
                    '${shortDescription}',
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                Text(
                  '${footer}',
                ),
              ],
            ),
          ),
        )
      ],
    );

【讨论】：

【解决方案2】：

你可以使用的最大高度

Expanded(
child : --- your child widget 
)

或

Flexible(
child: -- your child widget 
)

扩展 Row、Column 或 Flex 的子项以使子项填充可用空间的小部件。

使用 Expanded 小部件可以使 Row、Column 或 Flex 的子项展开以填充沿主轴的可用空间（例如，水平的 Row 或垂直的 Column）。如果展开多个children，则根据flex factor在它们之间分配可用空间。

Expanded 小部件必须是 Row、Column 或 Flex 的后代，并且从 Expanded 小部件到其封闭的 Row、Column 或 Flex 的路径必须仅包含 StatelessWidget 或 StatefulWidget（而不是其他类型的小部件，如 RenderObjectWidget )。

【讨论】：

【解决方案3】：

首先，您需要固定卡片高度，以便更好地定位您的文本与卡片图像，然后扩展您的列以动态处理多行文本。而且您不需要使用对齐小部件

试试下面的代码

Container(
            height: 112, // here you fixed the container height
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                CachedNetworkImage(
                  imageUrl:
                      "https://avatars.githubusercontent.com/u/26745548?v=4",
                  imageBuilder: (context, imageProvider) => Container(
                    height: 112,
                    width: 90,
                  ),
                ),
                const SizedBox(
                  width: 14,
                ),
                Expanded(
                  // here expand your column
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'title',
                      ),
                      Text(
                        '{shortDescription 23487509387 2039487502930349857  03984 5 30498 503498 503948 70293847 50923487503}',
                       
                      ),
                      Text(
                        'footer',
                      ),
                    ],
                  ),
                )
              ],
            ),
          )

输出：

【讨论】：