Flutter中Container内Text无法换行的问题求助

我的Widget结构为：Scaffold > Column > Row > Container > Text，需要实现Text内容自动换行，不希望文本被截断或显示省略号。查资料得知通常用Expanded组件解决，但以下三种尝试均未生效：

• 将Row嵌套在Expanded内
• 将Container嵌套在Expanded内
• 将Text嵌套在Expanded内

以下是当前页面body的代码：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF282B32),
      body: Column(
        children: <Widget>[
          createRow(
            context,
            "https://i.sstatic.net/6Utrc.jpg?s=256&g=1",
            "GuildProtect is a powerful, baterries-included moderation bot for your *safe* server!"
          ),
          createDivider(),
          createRow(
            context, 
            "https://cdn.discordapp.com/avatars/967406876029501462/bd3c60dcf55c83fba41b15fba89f798a.webp?size=256", 
            "This is a very beatiful (because it's pink) avatar of this shitty website creator, enjoy!"
          )
        ]
      )
    );
  }

  Row createRow(BuildContext context, String imageUrl, String text) {
    const containerHeight = 256.0;

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Container(
          alignment: Alignment.centerLeft,
          height: containerHeight,
          padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
          child: Image.network(imageUrl),
        ),
        Container(
          alignment: Alignment.centerRight,
          height: containerHeight,
          padding: const EdgeInsets.only(right: 50, top: 25),
          child: Text(
            text,
            style: TextStyle(
              color: const Color(0xFFFFFCF9),
              fontWeight: FontWeight.bold,
              fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
            ),
          ),
        ),
      ]
    );
  }

  Divider createDivider() {
    return const Divider(
      color: Color(0xFF131518),
      indent: 30,
      endIndent: 30,
      thickness: 1,
      height: 20,
    );
  }
}

有效解决方案 #

核心是给文本所在的Container外层包裹Expanded，同时给Image设置宽度约束，避免它撑满Row导致文本无空间换行。修改后的createRow方法如下：

Row createRow(BuildContext context, String imageUrl, String text) {
  const containerHeight = 256.0;

  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Container(
        alignment: Alignment.centerLeft,
        height: containerHeight,
        padding: const EdgeInsets.only(left: 50, top: 25, bottom: 25),
        child: Image.network(
          imageUrl,
          // 给图片设置固定宽度或fit属性，防止撑满Row
          width: 200,
          fit: BoxFit.contain,
        ),
      ),
      // 关键：用Expanded包裹文本容器，让它占据Row剩余空间
      Expanded(
        child: Container(
          alignment: Alignment.centerRight,
          height: containerHeight,
          padding: const EdgeInsets.only(right: 50, top: 25),
          child: Text(
            text,
            softWrap: true, // 明确开启自动换行（默认已开启，可强化效果）
            style: TextStyle(
              color: const Color(0xFFFFFCF9),
              fontWeight: FontWeight.bold,
              fontSize: DefaultTextStyle.of(context).style.apply(fontSizeFactor: 1.3).fontSize,
            ),
          ),
        ),
      ),
    ],
  );
}

原因说明 #

• Row的布局特性是让子组件尽可能占用自身所需宽度，若文本容器不被Expanded包裹，会无限延伸导致文本无法触发换行；
• Image若没有宽度约束，可能会占用Row的全部可用空间，挤压文本的显示区域，所以需要给图片设置固定宽度或使用fit属性限制尺寸。

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