在 Row 上使用 Image 小部件时，Flutter 上出现不需要的高度扩展

Question

当在

Image

+

Expanded

中使用

IntrinsicHeight

小部件时，当宽度尺寸发生变化时，会出现奇怪的行为，使得

Expanded

即使在

Row

中也会在高度方向上扩展。我不知道如何解释它，但代码仅在设置高度或删除

Expanded

时才有效，这不是我想要的行为。

当可用宽度尺寸较小时，它具有正确的行为。 正常方式

当扩大可用宽度尺寸时，它会发生意外行为，扩大图像高度： 高度扩展

代码示例（可以在dartpad.dev中运行，粘贴代码，运行并调整宽度）：

import 'package:flutter/material.dart';
void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          body: Container(
            color: Colors.blue,
            child: IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Expanded(
                    // Works when not using Expanded here
                    child: Column(
                      children: [
                        Container(
                          color: Colors.redAccent,
                          child: Image.network(
                            'https://media.licdn.com/dms/image/C560BAQEu7AUSpfr2MQ/company-logo_200_200/0/1630622338041?e=2147483647&v=beta&t=TxFY6Qj5NDdhP8NIKQBgX0_NojCFunfkMb73BB_GgiY',
                            alignment: Alignment.topCenter,
//                             height: 250, // Works if uncomment
                          ),
                        ),
                        const Spacer(),
                        const Text('TEXT'),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Container(
                      height: 300,
                      color: Colors.amberAccent,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );

我尝试了一些不同的场景（例如添加高度尺寸，删除

Expanded

或

IntrinsicHeight

），但它们都没有给我带来我想要的行为：没有不必要地扩展高度，但“文本”保持对齐与右侧组件（黄色组件）的底部。

Answer 1

如果您的蓝色和黄色部分均分，请尝试以下代码...

body: Row(
        children: [
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.blue,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // Image Section
                  IntrinsicHeight(
                    child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 20),
                      child: Image.network(
                        'https://media.licdn.com/dms/image/C560BAQEu7AUSpfr2MQ/company-logo_200_200/0/1630622338041?e=2147483647&v=beta&t=TxFY6Qj5NDdhP8NIKQBgX0_NojCFunfkMb73BB_GgiY',
                        alignment: Alignment.topCenter,
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                  Spacer(),
                  Text("text"),
                ],
              ),
            ),
          ),
          Expanded(flex: 1, child: Container(color: Colors.yellow))
        ],
      ),