Flutter布局问题：如何让Container适配文本且文本可在Row内换行撑满

要实现你需求的布局，核心是让容器既能跟随短文本自适应宽度，又能在文本过长时限制最大宽度（不超过Row的可用空间）并让文本自动换行。以下是两种可行的实现方案：

方案一：使用LayoutBuilder（推荐） #

通过LayoutBuilder直接获取Row的可用宽度约束，给容器设置最大宽度限制，同时容器宽度由文本内容自动决定：

return Padding(
  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      LayoutBuilder(
        builder: (context, constraints) {
          return Container(
            padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 8),
            // 限制容器最大宽度为Row的可用宽度
            constraints: BoxConstraints(maxWidth: constraints.maxWidth),
            decoration: BoxDecoration(
              color: PlatformTheme.getMainBkColorSection(context),
              borderRadius: BorderRadius.circular(9),
              boxShadow: [
                BoxShadow(
                  color: isDarkModeOnContext(context)
                      ? const Color.fromARGB(68, 27, 27, 27)
                      : const Color.fromARGB(159, 245, 245, 245),
                  blurRadius: 9,
                  spreadRadius: 5,
                ),
              ],
            ),
            child: Text(
              (msg as types.SystemMessage).text,
              style: NORMAL_S_TXT_STYLE.copyWith(color: Colors.grey.shade500),
              textAlign: TextAlign.center,
              softWrap: true,
            ),
          );
        },
      ),
    ],
  ),
);

关键说明： #

• LayoutBuilder：获取父级Row的宽度约束，确保容器不会超出Row的可用空间。
• BoxConstraints(maxWidth: constraints.maxWidth)：当文本长度超过Row可用宽度时，容器自动扩展到最大宽度，文本触发换行；文本较短时，容器宽度贴合文本实际长度。
• Row的mainAxisAlignment: MainAxisAlignment.center：保证容器始终在Row中居中显示。

方案二：使用Flexible + ConstrainedBox #

如果你需要保留Row内的Flexible布局逻辑，可以通过ConstrainedBox限制容器的最大宽度：

return Padding(
  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Flexible(
        child: Align(
          alignment: Alignment.center,
          child: ConstrainedBox(
            // 允许容器最大宽度占满Flexible的可用空间
            constraints: const BoxConstraints(maxWidth: double.infinity),
            child: Container(
              padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 8),
              decoration: BoxDecoration(
                color: PlatformTheme.getMainBkColorSection(context),
                borderRadius: BorderRadius.circular(9),
                boxShadow: [
                  BoxShadow(
                    color: isDarkModeOnContext(context)
                        ? const Color.fromARGB(68, 27, 27, 27)
                        : const Color.fromARGB(159, 245, 245, 245),
                    blurRadius: 9,
                    spreadRadius: 5,
                  ),
                ],
              ),
              child: Text(
                (msg as types.SystemMessage).text,
                style: NORMAL_S_TXT_STYLE.copyWith(color: Colors.grey.shade500),
                textAlign: TextAlign.center,
                softWrap: true,
              ),
            ),
          ),
        ),
      ),
    ],
  ),
);

关键说明： #

• Flexible：让容器可以使用Row的剩余空间，但不会强制占满。
• ConstrainedBox：限制容器最大宽度为Flexible的可用空间，文本过长时自动换行，容器扩展到最大宽度；文本短时，容器宽度贴合文本。
• Align：确保容器在Flexible的空间内居中显示。

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