Flutter如何实现TextField与正方形图片的Row布局（高度匹配）

需求说明：

• 在Row组件内实现两个子项布局：
  • 支持最多3行输入的TextField
  • 宽高比1:1、图片采用BoxFit.cover适配的正方形容器
• 核心约束：Row的高度由TextField决定（无论字号大小），图片始终保持正方形且高度与TextField完全一致，禁止使用固定像素值

初始代码（图片未正确约束）：

IntrinsicHeight(
  child: Row(
    children: [
      Flexible(
        child: TextField(
          controller: _controller,
          maxLines: 3,
        ),
      ),
      Image.file(File(imagePath), fit: BoxFit.cover)
    ],
  ),
)

问题根源：初始代码中Image没有宽度约束，会按照自身原始尺寸或父级宽松约束显示，无法自动匹配Row的高度形成正方形。修改方案如下：

IntrinsicHeight(
  child: Row(
    children: [
      Flexible(
        child: TextField(
          controller: _controller,
          maxLines: 3,
        ),
      ),
      AspectRatio(
        aspectRatio: 1,
        child: Image.file(
          File(imagePath),
          fit: BoxFit.cover,
        ),
      ),
    ],
  ),
)

关键修改说明：

1. 保留IntrinsicHeight：它会让Row的高度自动匹配TextField的实际高度，适配字号、内容行数变化
2. 用AspectRatio包裹Image：设置aspectRatio:1强制图片容器宽高比为1:1，容器高度继承自Row的高度（由TextField决定），宽度自动等于高度，实现严格正方形
3. BoxFit.cover确保图片在正方形容器内按比例填充，不会拉伸变形

内容的提问来源于stack exchange，提问作者user6097845