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

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

我需要測驗塊占據與影像相同的高度。但是當文本全部在中間時，它占用的高度要少得多。這是我的代碼現在如何作業的示例：

我該如何解決？如何將行內的列拉伸到最大可用高度？

我嘗試了幾個選項，但它破壞了多行文本的顯示。

uj5u.com熱心網友回復：

雖然高度是固定的，你可以用Column用SizedBox(height:112)，并控制textOverflow，包裝SizedBox帶Expanded。

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

uj5u.com熱心網友回復：

對于最大高度，您可以使用

Expanded(
child : --- your child widget 
)

或者

Flexible(
child: -- your child widget 
)

擴展 Row、Column 或 Flex 的子級以便子級填充可用空間的小部件。

使用 Expanded 小部件可以使 Row、Column 或 Flex 的子項擴展以填充沿主軸的可用空間（例如，水平用于行或垂直用于列）。如果擴展了多個子項，則根據彈性系數在它們之間分配可用空間。

Expanded 小部件必須是 Row、Column 或 Flex 的后代，并且從 Expanded 小部件到其封閉的 Row、Column 或 Flex 的路徑必須僅包含 StatelessWidgets 或 StatefulWidgets（不是其他型別的小部件，如 RenderObjectWidgets）。

uj5u.com熱心網友回復：

首先，您需要固定卡片高度，以便更好地使用卡片影像定位您的文本，然后擴展您的列以動態處理多行文本。并且您不需要使用 align 小部件

試試下面的代碼

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，將私有方法分解為輔助類。引數問題