Flutter

Question

我需要在我的 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}',
        ),
        
      ],
    )
  ],
);

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

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

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

Answer 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}',
                ),
              ],
            ),
          ),
        )
      ],
    );

Answer 2

对于最大高度你可以使用

Expanded(
child : --- your child widget 
)

或

Flexible(
child: -- your child widget 
)

扩展行、列或 Flex 的 child 的小部件，以便 child 填充可用的 space。

使用 Expanded 小部件使行、列或 Flex 的 child 展开以填充可用的 space 沿主轴（例如，行水平或列垂直).如果展开多个children，可用的space按照flex系数平分。

Expanded 小部件必须是 Row、Column 或 Flex 的后代，并且从 Expanded 小部件到其封闭的 Row、Column 或 Flex 的路径必须仅包含 StatelessWidgets 或 StatefulWidgets（不能包含其他类型的小部件，像 RenderObjectWidgets).

Answer 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',
                      ),
                    ],
                  ),
                )
              ],
            ),
          )

输出：

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

Flutter - How to stretch Column inside Row to maximum available height?

dart

flutter-layout