Flutter实现类WhatsApp聊天回复框左侧竖线自适应高度方案咨询

推荐方案1：渐变背景实现（全版本兼容，性能最优） #

不需要使用IntrinsicHeight，也不需要嵌套多组件，直接通过渐变装饰实现左侧竖线效果，无额外布局开销：

Container(
  decoration: BoxDecoration(
    // 渐变实现左侧4px固定宽度的棕色竖线
    gradient: LinearGradient(
      colors: [_postColor, Colors.transparent],
      stops: const [0, 0],
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
    ),
    // 保留左侧上下圆角
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(4.0),
      bottomLeft: Radius.circular(4.0),
    ),
  ),
  // 左侧padding调整为10，留出4px竖线的显示空间
  padding: const EdgeInsets.fromLTRB(10, 4, 8, 4),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      Text(msg?.postByName ?? ''),
      Text(msg?.message ?? ''),
    ],
  ),
)

推荐方案2：高版本Flutter直接使用单侧边框 #

Flutter 3.10及以上版本已经修复了「borderRadius和单侧边框同时设置报错」的问题，可直接用更直观的边框实现：

Container(
  decoration: BoxDecoration(
    border: Border(left: BorderSide(color: _postColor, width: 4)),
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(4.0),
      bottomLeft: Radius.circular(4.0),
    ),
  ),
  padding: const EdgeInsets.fromLTRB(6, 4, 8, 4),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      Text(msg?.postByName ?? ''),
      Text(msg?.message ?? ''),
    ],
  ),
)

两种方案都完全规避了IntrinsicHeight的布局性能开销，即便长列表大量复用也不会造成页面卡顿。

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