Flutter中文字自动换行后宽度未收缩问题求助

方案1：用Wrap组件包裹文本及标识 #

直接将包含Premium标识的文本区域用Wrap包裹，Wrap会自动根据内容宽度换行并收缩容器：

PopupMenuItem(
  child: Wrap(
    crossAxisAlignment: WrapCrossAlignment.center,
    children: [
      Text("超长文本内容自动换行后宽度自适应"),
      SizedBox(width: 4),
      Container(
        padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
        decoration: BoxDecoration(
          color: Colors.orange,
          borderRadius: BorderRadius.circular(4),
        ),
        child: Text("Premium", style: TextStyle(fontSize: 12, color: Colors.white)),
      ),
    ],
  ),
)

方案2：用IntrinsicWidth + Column强制内容收缩 #

如果Wrap不符合布局需求，可以用IntrinsicWidth让容器宽度匹配内容的最小宽度，再结合Column处理换行：

PopupMenuItem(
  child: IntrinsicWidth(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Text("超长文本内容自动换行后宽度自适应"),
        Align(
          alignment: Alignment.centerRight,
          child: Container(
            margin: EdgeInsets.only(top: 4),
            padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
            decoration: BoxDecoration(
              color: Colors.orange,
              borderRadius: BorderRadius.circular(4),
            ),
            child: Text("Premium", style: TextStyle(fontSize: 12, color: Colors.white)),
          ),
        ),
      ],
    ),
  ),
)

方案3：自定义PopupMenuItem的布局约束 #

如果是系统PopupMenu的默认宽度限制导致的问题，可以通过自定义PopupMenuTheme修改最小宽度，或者直接给PopupMenuItem设置padding调整：

PopupMenuTheme(
  data: PopupMenuThemeData(
    minimumWidth: 160, // 设置最小宽度，让内容可以收缩到合理范围
  ),
  child: PopupMenuButton(
    itemBuilder: (context) => [
      PopupMenuItem(
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        child: Text.rich(
          TextSpan(
            text: "超长文本内容自动换行后宽度自适应",
            children: [
              WidgetSpan(
                child: Container(
                  margin: EdgeInsets.only(left: 4),
                  padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                  decoration: BoxDecoration(
                    color: Colors.orange,
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text("Premium", style: TextStyle(fontSize: 12, color: Colors.white)),
                ),
              ),
            ],
          ),
        ),
      ),
    ],
  ),
)

核心思路是打破系统菜单默认的宽度约束，让容器宽度由实际内容决定，避免强制撑开固定宽度。

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