Flutter笔记应用：如何实现左侧颜色条高度随文本大小动态调整？

问题核心是左侧颜色条设置了固定高度200.0，且Row的crossAxisAlignment为CrossAxisAlignment.start，导致颜色条高度无法跟随右侧文本容器的高度变化。

解决方案 #

只需两个关键修改：

1. 移除颜色条的固定高度属性
2. 将Row的crossAxisAlignment改为CrossAxisAlignment.stretch

修改后的完整代码 #

return Container(
  margin: const EdgeInsets.all(8.0),
  decoration: BoxDecoration(),
  child: InkWell(
    onTap: () {},
    onLongPress: () {},
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch, // 调整对齐方式
      children: [
        Container(
          width: 8.0,
          // 移除固定height:200.0
          decoration: BoxDecoration(
              color: Color((int.parse('0x${list[idx].color}'))),
              borderRadius: const BorderRadius.only(
                  bottomLeft: Radius.circular(12.0),
                  topLeft: Radius.circular(12.0))),
        ),
        Flexible(
          child: Container(
            margin: const EdgeInsets.all(12.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Title',
                  style: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.w500),
                ),
                const SizedBox(height: 6.0),
                Text(
                  'No, you misunderstood. The maximum number of characters is 150. Container height changes according to variable text size. That's fine here. What doesn't change with different text size is the line length on the left side.',
                  style: TextStyle(
                      fontSize: 16.0),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
);

原理说明 #

CrossAxisAlignment.stretch会让Row内的所有子组件自动拉伸至Row的最大高度（即右侧文本容器的高度），颜色条不再需要固定高度，会完全匹配文本内容的高度，实现动态适配。

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