Jetpack Compose：如何让行内第一列项高度随第二列自动调整？

当然可以实现，完全不用硬编码计算高度，用CSS的Grid或Flexbox布局就能轻松搞定，以下是两种具体实现方式：

方法一：CSS Grid 布局 #

Grid天生适合这种跨行列的高度对齐场景，核心思路是让左侧列占据容器的全部行高，再通过内部Flex布局分配项的位置：

<div class="grid-container">
  <div class="left-col">
    <div class="col-item">顶部内容</div>
    <div class="col-item">底部内容</div>
  </div>
  <div class="right-col">
    <p>这里是右侧的多行内容...</p>
    <p>可以随意添加更多内容，高度会自动变化...</p>
    <p>左侧列会跟着同步高度</p>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr; /* 左列自适应宽度，右列占剩余空间 */
  gap: 15px; /* 列之间的间距 */
}

.left-col {
  grid-row: 1 / -1; /* 强制左侧列占据容器的所有行高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让内部项上下分布，中间自动留白 */
  border: 1px solid #ddd; /* 方便查看效果，可删除 */
}

.right-col {
  border: 1px solid #ddd; /* 方便查看效果，可删除 */
}

.col-item {
  padding: 10px;
  background: #f5f5f5;
}

方法二：Flexbox 布局 #

Flexbox也能实现，利用容器默认的align-items: stretch属性，让左侧列自动拉伸到和右侧同高，再通过内部Flex布局分配项：

<div class="flex-container">
  <div class="left-col">
    <div class="col-item">顶部内容</div>
    <div class="col-item">底部内容</div>
  </div>
  <div class="right-col">
    <p>这里是右侧的多行内容...</p>
    <p>可以随意添加更多内容，高度会自动变化...</p>
    <p>左侧列会跟着同步高度</p>
  </div>
</div>

.flex-container {
  display: flex;
  gap: 15px;
}

.left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 内部项上下分布 */
  flex-shrink: 0; /* 防止左侧列被压缩 */
  width: fit-content; /* 宽度自适应内容 */
  border: 1px solid #ddd; /* 方便查看效果，可删除 */
}

.right-col {
  flex: 1; /* 右列占剩余空间 */
  border: 1px solid #ddd; /* 方便查看效果，可删除 */
}

.col-item {
  padding: 10px;
  background: #f5f5f5;
}

这两种方法都不需要手动计算高度，左侧列的高度会完全跟随右侧内容的高度自动调整，内部的项也会按照需求分布在顶部、底部或其他位置。

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