Flutter技术问题：如何让ListView嵌套Column中的文本限制在图片宽度内并自动换行

Hey there! Let's get that text wrapping properly for you. The root issue here is that your Row widget doesn't enforce any horizontal constraints on its child Container—so the Text just keeps stretching horizontally instead of wrapping to fit the image's width.

Here are two straightforward fixes you can try:

Fix 1: Explicitly set the Container's width #

Since your image already has a maxWidth of width - 50, just apply that same width to the parent Container. This locks the entire column's width, forcing the text to wrap within that space:

Row(
 children: [
  Container(
   width: width - 50, // Add this line to constrain the container's width
   alignment: Alignment.centerRight,
   decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(width: 1, color: AppColors.pink2),
   ),
   child: Column(
    crossAxisAlignment: CrossAxisAlignment.start, // Optional: Align text left for better readability
    children: [
     ConstrainedBox(
      constraints: BoxConstraints(maxHeight: 300, maxWidth: width - 50),
      child: ClipRRect(
       borderRadius: BorderRadius.circular(12),
       child: Image(
        image: MemoryImage(chatMessageModel.rawData!),
        fit: BoxFit.cover,
       ),
      ),
     ),
     Padding(
      padding: const EdgeInsets.all(14),
      child: Text(
        'I need this text to wrap around',
        softWrap: true, // Explicitly enable wrapping (default is true, but clear to set)
      ),
     ),
    ],
   ),
  ),
 ],
)

Fix 2: Use IntrinsicWidth to match the image's actual width #

If you want the column's width to automatically match the image's actual width (not just the max width), wrap your Column with IntrinsicWidth. This lets the text inherit the image's width without hardcoding a value:

Row(
 children: [
  Container(
   alignment: Alignment.centerRight,
   decoration: BoxDecoration(
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(width: 1, color: AppColors.pink2),
   ),
   child: IntrinsicWidth(
    child: Column(
     crossAxisAlignment: CrossAxisAlignment.stretch, // Make children fill the column's width
     children: [
      ConstrainedBox(
       constraints: BoxConstraints(maxHeight: 300, maxWidth: width - 50),
       child: ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: Image(
         image: MemoryImage(chatMessageModel.rawData!),
         fit: BoxFit.cover,
        ),
       ),
      ),
      Padding(
       padding: const EdgeInsets.all(14),
       child: Text(
         'I need this text to wrap around',
         softWrap: true,
       ),
      ),
     ],
    ),
   ),
  ),
 ],
)

Both approaches will make your text wrap neatly within the bounds of the image's width. Pick whichever fits your layout needs better!

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