Flutter布局问题：Container宽度自适应及WebIconButton右上对齐失效

1. 设置Container宽度自适应内容宽度 #

默认情况下，未指定width的Container会尽可能填充父容器可用宽度。要让它自适应内容宽度，可通过以下方式实现：

• 用Wrap包裹：Wrap会根据子组件内容自动调整尺寸，Container会随之适配内容宽度：

Wrap(
  children: [
    Container(
      color: Colors.lightBlueAccent,
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      child: const Text("自适应内容宽度的Container"),
    ),
  ],
)

• 用IntrinsicWidth包裹：该组件会强制子组件宽度适配自身内容，适合需要精确包裹的场景（注意：嵌套过多会有性能开销）：

IntrinsicWidth(
  child: Container(
    color: Colors.lightBlueAccent,
    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
    child: const Text("自适应内容宽度的Container"),
  ),
)

• 用Row包裹：Row的子组件默认会包裹自身内容，因此Container会自适应内容宽度：

Row(
  children: [
    Container(
      color: Colors.lightBlueAccent,
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      child: const Text("自适应内容宽度的Container"),
    ),
  ],
)

2. 将WebIconButton对齐到MTWebModal弹窗右上角 #

设置MainAxisAlignment.end无效，通常是因为按钮所在的父容器宽度未撑满弹窗宽度，导致对齐范围受限。以下是两种修复方案：

方案1：Row+宽度撑满实现右对齐 #

让按钮所在的Row占满弹窗宽度，再通过MainAxisAlignment.end实现右对齐：

MTWebModal(
  child: Column(
    children: [
      SizedBox(
        width: double.infinity,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            WebIconButton(icon: Icons.close),
          ],
        ),
      ),
      // 弹窗主体内容
      const Padding(
        padding: EdgeInsets.all(20),
        child: Text("弹窗内容区域"),
      ),
    ],
  ),
)

方案2：Stack+Align直接定位 #

通过Stack将按钮直接定位到弹窗右上角，适配更复杂的弹窗布局：

MTWebModal(
  child: Stack(
    children: [
      // 弹窗主体内容（可按需调整布局）
      const Center(
        child: Text("弹窗内容区域"),
      ),
      Align(
        alignment: Alignment.topRight,
        child: Padding(
          padding: const EdgeInsets.all(8),
          child: WebIconButton(icon: Icons.close),
        ),
      ),
    ],
  ),
)

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