如何在AlertDialog顶部添加可跟随对话框自适应宽度的LinearProgressIndicator

AI 小北

2026-10-19

解决方案

核心问题说明

你当前的实现将LinearProgressIndicator与AlertDialog放在Stack的平级节点中，进度条无法感知AlertDialog的动态宽度，硬编码屏幕比例适配的方式在不同尺寸屏幕、不同内容长度的Dialog下都会出现适配错误。

方案1（推荐）：将进度条整合到AlertDialog内部

直接把进度条放在AlertDialog的标题结构中，天然继承Dialog的宽度，无需额外适配：

AlertDialog(
  // 移除title默认内边距，让进度条贴满顶部边缘
  titlePadding: EdgeInsets.zero,
  title: Column(
    mainAxisSize: MainAxisSize.min,
    // 让子组件宽度填充满父级
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      LinearProgressIndicator(
        value: _controller.value,
        semanticsLabel: 'Linear progress indicator',
      ),
      // 给标题补回原生AlertDialog的默认内边距
      Padding(
        padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
        child: const Text('Title'),
      ),
    ],
  ),
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Text('Content'),
      SizedBox(height: 50)
    ],
  ),
);

方案2：外层Stack搭配IntrinsicWidth自适应

如果你需要保留进度条悬浮在Dialog外部的效果，可以用IntrinsicWidth让Stack的宽度匹配Dialog的宽度：

IntrinsicWidth(
  child: Stack(
    alignment: const Alignment(0.0, -0.8),
    clipBehavior: Clip.none,
    children: [
      AlertDialog(
        title: const Text('Title'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: const [
            Text('Content'),
            SizedBox(height: 50)
          ],
        ),
      ),
      Positioned(
        left: 0,
        right: 0,
        child: LinearProgressIndicator(
          value: _controller.value,
          semanticsLabel: 'Linear progress indicator',
        ),
      )
    ],
  ),
);