如何让Container在Expanded to Row时换行到文本，并适合它自己的宽度？

Question

这是我最近遇到的一个奇怪的布局问题。

我尝试了很多不同的方法来构建都失败了。

这就是我想要的：

• 连续；
• 文本应扩展到行；
• 文本有一个容器作为背景，我希望容器始终适合文本；
• 它应该展开或软包装，但当文本不长时，包含内容应该适合文本。

我现在正在尝试这样：

 return Padding(
        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Flexible(
              child: Align(
                alignment: Alignment.center,
                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,
                  ),
                ),
              ),
            ),
          ],
        ));

问题是：

要展开文本，我必须使用 Expanded 或 Flexiable in a Row，但每次这样做时，我都需要容器包装文本提供背景，但它总是扩展到整个宽度

有人知道如何实现吗？

Answer 1

将灵活替换为扩展

& 删除Align及其在Flexible后面写的属性

child: Align(
                alignment: Alignment.center,