Flutter中如何让嵌套Row的Card宽度动态适配文本长度？

你的推测没错，Row默认会尽可能占据父组件的可用宽度，导致Card被撑满。要让Card宽度刚好包裹文本内容，只需要给Column加上约束，限制它的宽度为内容所需的最小宽度即可，以下是两种实用方法：

方法一：用IntrinsicWidth包裹Column #

IntrinsicWidth会让子组件（Column）的宽度收缩到内容的最小宽度，Card会自动适配这个宽度。再给Column加上crossAxisAlignment: CrossAxisAlignment.stretch，能让每个Row填满Column的宽度，避免右侧留空白：

Card(
  child: IntrinsicWidth(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Row(children: [Icon(Icons.ac_unit), Text(FIREBASEDATA)]),
        Row(children: [Icon(Icons.ac_unit), Text(FIREBASEDATA)]),
        Row(children: [Icon(Icons.ac_unit), Text(FIREBASEDATA)]),
      ],
    ),
  ),
)

方法二：给每个Row设置mainAxisSize: MainAxisSize.min #

让每个Row只占据自身内容的宽度，再用Align包裹Column，确保Card跟着收缩到内容宽度：

Card(
  child: Align(
    alignment: Alignment.centerLeft, // 可根据需求调整对齐方式
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [Icon(Icons.ac_unit), Text(FIREBASEDATA)],
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [Icon(Icons.ac_unit), Text(FIREBASEDATA)],
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [Icon(Icons.ac_unit), Text(FIREBASEDATA)],
        ),
      ],
    ),
  ),
)

注意事项 #

如果Card放在ListView、Column这类可滚动组件中，要确保父组件没有强制Card占满宽度的约束，否则上述方法可能不生效。IntrinsicWidth会有轻微性能开销，但在子组件数量不多的场景下完全可以忽略。

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